Tata Letak Otomatis Figma vs Flexbox dan Grid CSS: Menutup Kesenjangan Desain-ke-Kode
Bagaimana tata letak otomatis Figma dipetakan ke flexbox dan grid CSS (arah, celah, padding, pelukan, isi, bungkus) dan perbedaannya, sehingga desain tetap bertahan saat handoff.
Pengambilan Inti
Tata letak otomatis Figma berperilaku seperti kotak fleksibel CSS: peta arah ke arah fleksibel, celah ke celah, bantalan ke bantalan, "Peluk konten" ke ukuran berdasarkan konten, "Isi wadah" ke pertumbuhan fleksibel atau lebar penuh, dan bungkus ke bungkus fleksibel. Aliran kisi tata letak otomatis sesuai dengan kisi CSS. Perbedaan muncul pada ukuran minimum dan maksimum, pembungkusan teks, perataan garis dasar, dan titik henti sementara responsif, jadi periksalah secara eksplisit saat handoff.
Pemetaan
Panduan Figma menjelaskan bingkai tata letak otomatis yang mengatur anak berdasarkan arah, jarak, bantalan dan perataan, dengan aliran horizontal, vertikal, dan kisi serta bungkus opsional. Masing-masing memiliki persamaan yang mirip dengan CSS:
Peluk, isi, dan perbaiki
Di Figma, kumpulan bingkai untuk memeluk konten diubah ukurannya berdasarkan turunannya, dan kumpulan turunan untuk mengisi wadah direntangkan untuk mengisi ruang yang tersedia; Figma mencatat bahwa jika seorang anak diatur untuk mengisi, orang tua tidak bisa lagi berpelukan ke arah itu. Di CSS, yang setara adalah ukuran berbasis konten (konten otomatis atau sesuai) dan flex: 1 atau lebar: 100%. Panduan flexbox MDN menjelaskan bagaimana flex-grow, flex-shrink, dan flex-basis mendistribusikan ruang, yang merupakan sisi CSS dari ide yang sama.
Dimana kesenjangan itu muncul
Kebanyakan bug handoff berasal dari beberapa area:
- Ukuran minimum dan maksimum: atur keduanya di kedua tempat, atau teks dan wadah akan berperilaku ekstrem secara berbeda.
- Teks: tinggi garis, pembungkusan, dan pemotongan berbeda antara rendering teks Figma dan browser.
- Penyelarasan garis dasar: CSS dapat disejajarkan berdasarkan garis dasar teks; periksa bagaimana ini dimaksudkan.
- Anak absolut: "Abaikan tata letak otomatis" Figma (sebelumnya posisi absolut) dipetakan ke position: absolute pada induk yang diposisikan.
- Daya tanggap: bingkai tata letak otomatis tidak memiliki titik henti sementara; tentukan bagaimana tata letak berubah pada setiap lebar.
kisi-kisi
Gunakan aliran kisi tata letak otomatis untuk tata letak dua dimensi yang sebenarnya, dan petakan ke kisi CSS, yang digambarkan MDN sebagai sistem untuk menata konten dalam baris dan kolom. Baris fleksibel yang dibungkus tidak sama dengan kisi: item dalam baris yang dibungkus tidak berbaris dalam kolom.
Gerakan adalah kesenjangan yang lebih besar
Tata letak dipetakan dengan cukup baik dari Figma hingga CSS. Gerakan tidak terjadi: transisi prototipe harus dibangun kembali dalam kode, dan keadaan sering kali hilang. Itu adalah alat gap dengan runtime, seperti ExodeUI (kami membuatnya) dan Rive, alamat untuk komponen interaktif.
Kunci Principles untuk Diingat
- Arah tata letak otomatis, celah, padding, dan bungkus peta ke flexbox
- Pelukan ≈ ukuran konten; Isi ≈ flex: lebar 1 atau 100%.
- Aliran grid dipetakan ke grid CSS
- Periksa ukuran min/maks, teks, garis dasar, dan titik henti sementara saat handoff
- Gerakan dan keadaan adalah kesenjangan desain-ke-kode yang lebih besar
Pertanyaan yang Sering Diajukan
Sumber
- Guide to auto layout — Pusat Bantuan Figma
- Basic concepts of flexbox — Dokumen Web MDN
- Basic concepts of grid layout — Dokumen Web MDN