Grid Flex responsif dalam Sketsa menggunakan AutoLayout dan Stack Groups

Memperbaiki sistem desain untuk struktur, modularitas, dan skala

Alat-alat seperti FlexBox di CSS, UIStackView di iOS, dan FlexboxLayout di Android telah lama memberikan pengembang alur kerja yang diperlukan untuk menangani banyak pandangan adaptif dan responsif yang ada saat ini.

Namun untuk desainer, proses desain tata letak di beberapa alat desain favorit kami selalu lebih manual, lebih statis, lebih membosankan, dan umumnya kurang tepat secara matematis. Tetapi berkat kerja yang luar biasa dari orang-orang di Anima, kita mungkin segera memiliki struktur dan fleksibilitas yang kita butuhkan untuk menjembatani kesenjangan itu dengan lebih baik.

Dengan fitur Stacks baru yang dibundel ke dalam plugin Auto-Layout terbaru, kami sekarang memiliki alur kerja yang mengakomodasi output UI lebih baik dan memungkinkan kami mencapai lebih banyak konsistensi dan pemeliharaan di seluruh sistem desain kami. (Penafian - Konsep ini masih pada tahap awal. Tidak setiap jenis tata letak akan mendapat manfaat dari sistem ini jadi campur dan cocok sesuai keinginan Anda).

Demo

Dalam video di bawah ini, saya telah menyusun tata letak kisi-kisi flex proof-of-concept untuk memamerkan kehebatan Stacks. Ini adalah artboard yang mencerminkan struktur halaman web dasar.

Sementara masih dalam tahap eksplorasi awal, fungsionalitas berikut dimasukkan ke dalam templat:

  • Desktop ke ponsel dalam beberapa klik.
  • Artboards dapat diubah ukurannya dan perataan / distribusi grid tidak putus
  • Grid disusun oleh:
  • Tubuh
     - Header
     - Utama
     - —bagian
     - - - grup baris (memiliki layer ukuran kotak saudara)
     - - - - baris
     - - - - - kolom
     - - - - - - modul
     - - - - - - - komponen (simbol bersarang dengan logika internal)
     - Footer
  • Gunakan simbol bersarang, yang didefinisikan oleh kombinasi dari properti Ubah Ukuran Sketsa, pinning Autolayout, dan kelompok stack untuk membuat sistem modular komponen yang dapat ditukar.
  • Layout menyesuaikan dengan lebar artboard (konten memiliki lebar maksimum 1.200 piksel, dan ponsel memiliki talang built-in).
  • Berbagai distribusi kolom dan mudah runtuh / memodifikasi selokan.
  • dan
    tumbuh dan menyusut terlepas dari
    .
  • Perubahan ketinggian untuk
    mendorong
    ke bawah di artboard, sambil menjaga margin dan bantalan tetap seperti halaman web.
  • Ketinggian dapat disesuaikan untuk mempengaruhi ketinggian kolom anak
  • Penjajaran kolom (atas, tengah, bawah, peregangan) dapat ditentukan pada tingkat baris.
  • Menambahkan kolom baru (atau menghapus satu) dari baris secara otomatis menyesuaikan lebar kolom saudara agar sesuai.
  • Menambahkan modul anak baru di dalam kolom akan membuat kolom itu tumbuh secara vertikal (modul berisi sejumlah jenis konten, seperti gambar, teks, daftar, tabel, grup, dan simbol)
  • Penjajaran modul (kiri, tengah, kanan, peregangan) dapat ditentukan di tingkat kolom.
  • simbol menukar komponen untuk mengganti konten atau menyematkan lapisan baru ke komponen yang ada.
  • Artboard desktop telah diatur untuk menggunakan garis dasar 8pt.

File Sketsa

Ini dia. Jangan ragu untuk memperbaikinya dengan cara apa pun dan beri tahu saya.
* PENTING * - File tidak akan berfungsi kecuali Anda memiliki rilis terbaru dari Tata Letak Otomatis dengan Dukungan Stacks (.0.2.0 pada tulisan ini).

https://cl.ly/2v2I373P2E1f

Beberapa pemikiran terakhir

Saya harap itu bermanfaat bagi sebagian orang. Saya tahu saya akan mengeksplorasi kemungkinan Autolayout dan Stacks lebih dalam. Pada versi ini, saya telah memperhatikan beberapa quirks kecil dengan pembulatan matematika, tetapi mudah-mudahan itu akan beres pada waktunya. Di antara beberapa permintaan yang saya sarankan kepada para devs, saya pikir ini bisa berharga.

  • Kemampuan untuk menambahkan latar belakang ke grup yang ditumpuk (baris induk kolom) tanpa mempengaruhi logika tumpukan. Dalam HTML / CSS, ini hanya akan dilakukan di level atau "div", tetapi Sketch tidak mengizinkan cara untuk melakukan itu seperti yang sekarang.
    Ada pendekatan untuk melakukan ini sekarang yang melibatkan pengelompokan lapisan latar belakang dengan kelompok bertumpuk dan menyematkan bg ke atas / kiri / 100% lebar & tinggi, dan sementara latar belakang tumbuh untuk mengakomodasi konten, itu tidak menyusut ketika konten dihapus. Saya percaya penyusutan sudah ada dalam daftar TO-DO tim.
  • Pengenalan breakpoints di artboard, dan simbol swapping berdasarkan pada artboard (menukar nav 4 item dengan ikon hamburger ketika artboard <400px, atau lebih baik lagi, menggunakan pendekatan query kontainer.
  • Dengan breakpoints tersebut, kemampuan untuk beralih antara kelompok-kelompok bertumpuk horizontal ke vertikal, sedemikian rupa sehingga kolom bertumpuk di atas satu sama lain ketika ada ruang yang tidak cukup. Dan untuk kolom untuk membungkus jika ditentukan.
  • Kemampuan untuk menentukan lebar persentase per kolom.
    (Pembaruan - Versi ide ini baru saja diterapkan dalam plugin dengan menggunakan fitur Bobot)
  • Meskipun ini tidak harus jatuh pada tim Anima, Sketch juga harus memperkenalkan dukungan untuk variabel, terutama sekarang dengan properti seperti jarak, min dan ketinggian maksimum, dan nilai-nilai lain yang harus dijaga konsisten di beberapa lapisan. Variabel-variabel ini dapat digunakan lebih lanjut untuk memetakan ke warna juga, dan membantu dalam proses handoff Sass.

Ya, hanya itu yang saya dapat! Hanya ingin memberikan teriakan kepada tim di Anima sekali lagi. Mereka sangat berbakat, responsif, dan mengundang jadi pastikan untuk mendukung kerja keras mereka! Bergabunglah dengan halaman Facebook mereka.

Jika Anda memiliki pertanyaan atau komentar (baik!), Jangan ragu untuk memposting di bawah ini atau menjangkau di Twitter.