Figma’s New Grid – Anda harus memahami kisi CSS sebagai desainer | Christine Vallaure | Mei 2025 – Beragampengetahuan
Sebagai orang yang sangat percaya pada perancang yang memahami CSS, saya akan mengatakan ini: Jika Anda ingin menguasai jala baru Figma, Anda perlu tahu bagaimana css jala bekerja. Jala Figma meniru mesh CSS, tapi itu bukan pasangan yang sempurna, tidak apa -apa. Itulah mengapa pemahaman sangat penting Di mana ara berakhir, browser mengambil alih angkat berat – Jadi Anda tidak akan melewatkan fleksibilitas, responsif, dan kekuatan tata letak yang hanya dapat diberikan oleh browser sepenuhnya.
memahami Di mana ara berakhir, browser mengambil alih angkat berat – Jadi Anda tidak akan melewatkan fleksibilitas, responsif, dan kekuatan tata letak yang hanya dapat diberikan oleh browser sepenuhnya.
Memahami cara kerja kisi -kisi CSS saat menggunakan kisi tata letak Figma akan membantu Anda merancang lebih pintar, bekerja lebih baik dengan pengembang, dan membangun tata letak yang dipelihara di dunia nyata.
Mari kita hancurkan – apa yang dipetakan dari CSS, apa yang tidak.
Pada Mei 2025, Figma memperkenalkan pembaruan besar pada sistem tata letaknya. Di masa lalu, desainer saja Tata letak otomatis satu dimensi,berlari One Direction, Mirip dengan CSS Flexbox. Sekarang, buah ara telah menambahkan opsi baru: Mesh, membuat tata letak dua dimensi sama dengan mesh CSS. Pembaruan ini membawa kontrol dan fleksibilitas yang lebih besar ke desain UI sambil menyelaraskan lebih dekat dengan tata letak dalam kode.
Seperti yang ditunjukkan pada menu tata letak yang diperbarui di atas, Figma sekarang menawarkan tiga opsi tata letak: Tidak ada (bawaan), Horizontal dan vertikal (satu dimensi, mirip dengan flexbox), dan baru Kisi (Dua dimensi, mirip dengan CSS Grid). Sangat penting untuk memahami perbedaan antara jenis tata letak ini. Tapi mari kita pertama -tama jelajahi fitur grid baru:
Opsi kisi ada tata letak Bagian di panel kanan. Buka saja untuk mendefinisikan Anda Baris, kolom, parit drainaseDan laba. Setelah diatur, masukkan elemen Anda ke dalam jaringan. Mereka bisa Baris silang atau kolom, dan Ubah Ulang Secara Otomatis Dengan tata letak berubah.
✏️ petunjuk: Dalam Gambar, Buka Tag atribut Dari menu drop-down. Melihat setiap bidang bekerja membuatnya lebih mudah, terutama begitu segalanya mulai terasa sedikit bingung. Sakelar kecil dapat menghemat banyak dugaan.
Grid Figma baru didasarkan pada kode CSS aktual, menjadikannya metode tata letak kunci yang digunakan di seluruh jaringan. Meskipun lucu dan intuitif, kekuatan itu benar -benar bersinar ketika Anda memahami kode di baliknya. Alat desain melakukan yang terbaik, tetapi mereka tidak pernah persis cocok dengan bagaimana tata letak diberikan di browser. Memahami grid CSS berarti Anda dapat menentukan di mana buah ara mungkin lebih pendek, bahkan melebihi harapan – dan mencari tahu kapan harus membiarkan browser melakukan keajaibannya.
Grid Figma baru terlihat dan berfungsi secara acak. Seperti sebagian besar konten dalam Gambar, ini didasarkan pada kode aktual – dalam hal ini CSS Grid, yang merupakan metode tata letak kunci yang digunakan untuk membuat konten di jaringan.
CSS Grid Ini adalah sistem tata letak yang mengatur konten halaman web ke dalam baris dan kolom. Ini memungkinkan pengembang untuk menempatkan item di tempat yang mereka inginkan – apakah itu judul di bagian atas, bilah samping di samping, atau kartu yang diatur dengan rapi di halaman. Kisi CSS tidak terbatas pada tata letak halaman penuh; Anda juga dapat menggunakannya untuk area yang lebih kecil seperti galeri, bentuk, atau komponen UI tunggal. Bagi desainer, memahami kisi -kisi CSS berarti menciptakan tata letak yang lebih bersih dan lebih konsisten yang lebih mudah dibangun untuk pengembang.
Contents
Pikirkan kisi CSS seperti kotak bento
Bayangkan desain Anda sebagai kotak bento: Anda memiliki bagian yang ditentukan – baris dan kolom – Anda dapat memasukkan “bahan” seperti teks, gambar, dan tombol menjadi “bahan”. Sama seperti menyesuaikan pembagi dalam kotak melengkung, kisi CSS memungkinkan Anda untuk menyempurnakan struktur, memberikan fleksibilitas dan presisi.
Pikirkan di garis kisi, bukan kolom
Dalam terjemahan antara desainer dan pengembang, hal -hal yang sering hilang. Sebagai desainer UI, kami biasanya berpikir di kolom – kami menganggap kisi tata letak sebagai satu set trek dan elemen vertikal yang tersebar di seluruh kolom ini. Tapi di kisi CSS, semuanya Kabel. Kotak ditentukan oleh garis melintasi wadah, menciptakan ruang atau sel tempat konten berada.
Sistem koordinat yang kuat
Ini menciptakan sistem koordinat yang kuat. Secara default, proyek mengikuti proses HTML, tetapi dengan grid Anda dapat memberi tahu elemen dengan tepat, misalnya: [grid-column-start: 2; grid-column-end: 5]. Jadi bukan hanya memikirkan “ini mencakup tiga kolom”, tetapi menjadi ‘tDia mulai di baris 1 dan berakhir pada baris 4‘([grid-column: 1 / 4]) .T adalah transisi yang halus, tetapi mengubah seluruh pendekatan tata letak Anda. Anda dapat menempatkan item secara akurat, mendefinisikan area mesh yang disebutkan, dan bahkan lapisan atau elemen tumpang tindih saat dibutuhkan. Anda juga memiliki kendali penuh atas margin di sekitar grid dan celah di antara baris. Setelah Anda menguasainya, itu bersih, fleksibel, dan luar biasa.
Catatan: Jika Anda melompat ke mode Figma Dev, Anda akan dapat melihat simbol yang serupa ([grid-column: 1 / 4])
Cobalah dalam kode (ya, terutama jika Anda seorang desainer UI!)
Ini adalah protein kode; Jika Anda ingin memahami ini dengan lebih baik, coba gunakan penargetan. Saya memiliki artikel terperinci tentang kisi -kisi CSS (agak tua) yang menjelaskan posisi lebih rinci.
FR atau unit fraksional
Kolom dan sel grid kami tidak harus memiliki ukuran yang sama – kami dapat membentuknya sesuai kebutuhan. Anda dapat mengatur lebar atau penggunaan tetap Unit FR (singkatan Pecahan unit), pisahkan ruang yang tersisa. Jadi jika sel 2fr Yang lainnya adalah 1frYang pertama membutuhkan dua kali ruang. Ini adalah pendekatan sederhana dan fleksibel yang mengontrol proporsi tata letak tanpa terlalu banyak berpikir.
Berikut ini adalah codepen kecil di mana Anda dapat menggunakan unit yang berbeda di CSS:
✅ Baris, kolom, dan penempatan gratis
Ya! Kami akhirnya di sini – kisi CSS dan buah ara diselaraskan sekarang, memungkinkan Anda untuk menempatkan item menggunakan sistem terkoordinasi Garis kisi.
✅ Garis kisi
Sama seperti kisi CSS, buah ara bekerja dengan mendefinisikan baris dan kolom. Garis kisi bekerja di belakang layar meskipun tidak selalu ditampilkan dengan jelas.
✅ Parit dan tepi
ini selokan (ruang antar sel) dan laba (Ruang di sekitar seluruh mesh) bekerja dalam Gambar seperti CSS. Ini memungkinkan Anda untuk menjaga jarak tata letak yang konsisten antara desain dan kode.
✅ Bersarang juga efektif
Sama seperti di CSS, Anda bisa Tata letak bersarang Di antara ara. Ini berarti Anda bisa menempatkannya Tata letak otomatis di jaringan bahkan Kisi di dalam jaringan lain. Ini memberi Anda lebih banyak fleksibilitas untuk membangun tata letak yang kompleks sambil menjaga semuanya tetap teratur dan responsif.
⚠️ satuan
Dalam kisi CSS Anda dapat menggunakan ukuran tetap, persentase dan Unit fraksi (fr) Alokasikan ruang secara proporsional – misalnya ke kolom 2fr Ada yang lain 1fr.
Buah ara tidak mendukung yang berbedafr Unit (sekarang!). Anda dapat menetapkan ukuran tetap atau ukuran otomatis, tetapi Anda tidak akan mendapatkan perilaku fleksibel yang sama.
⚠️ Tinggi/lebar otomatis (saat ini)
Tidak seperti CSS, Figma belum mendukung lebar otomatis atau ketinggian baris yang sebenarnya berdasarkan konten. Mudah -mudahan ini akan segera terjadi, tetapi ingatlah saat menyiapkan jaringan sekarang.
Ini berarti bahwa browser memberi Anda kontrol tata letak yang lebih besar daripada Gambar. Jika Anda mengunci terlalu banyak dalam desain Anda dan mengharapkannya berperilaku persis sama dalam kode Anda, Anda mungkin dapat membatasi CSS untuk melakukan yang lebih baik. Jadi, tinggalkan ruang untuk fleksibilitas dan diskusi, terutama saat menyerahkannya kepada pengembang.
Sama sekali tidak! Pertanyaan bagus. Tata letak otomatis satu dimensi jauh dari berlebihan. Ini adalah alat pilihan kami dalam ara, terutama analog Flexbox. Meskipun kisi CSS dan Flexbox memiliki tujuan yang berbeda – Kisi-kisi adalah dua dimensi, dan flexbox adalah satu dimensi – Mereka dirancang untuk saling melengkapi.
Tata Letak Otomatis → Simulasikan Flexbox (Jalan tata letak satu dimensi atau Daftar)
Grid ara → kisi CSS yang disimulasikan (Baris tata letak dua dimensi Dan Daftar)
Sama seperti kisi CSS, Flexbox adalah bagian dari sistem tata letak CSS. Dibandingkan dengan yang lain, ini bukan satu – mereka bertujuan Bekerja samasetiap orang memiliki keunggulan mereka sendiri. Hal yang sama berlaku untuk opsi ara-otomatis ara.
Memahami kedua alat ini dan kapan menggunakan masing -masing adalah kunci untuk menciptakan desain yang efektif dan responsif.
Mari kita pahami bagaimana mereka bekerja dengan benar -benar memahami perbedaan di antara mereka Satu dimensi Dan Dua dimensi tata letak.
Fig Grid dan CSS Grid: Layout 2D
Kisi -kisi adalah a Sistem dua dimensi Ini memungkinkan Anda untuk mengontrol tata letak baris dan kolom secara bersamaan. Ingat bagaimana cara membandingkan kisi CSS dengan kotak bento? Ada bagian yang jelas – baris dan kolom yang dapat membantu Anda mengatur konten Anda secara akurat. Anda bekerja Sistem seperti koordinatIni membuatnya lebih mudah untuk menyelaraskan elemen, menciptakan jarak yang konsisten dan membangun ritme visual yang kuat.
ini untuk Struktur halaman keseluruhanDasbor, kartu atau tata letak apa pun yang ingin Anda miliki kontrol penuh atas penempatan di kedua arah.
Fig Tata Letak Otomatis dan Flexbox: Tata Letak Satu Dimensi
Bukan kotak bento, pertimbangkan itu sebagai Tempatkan item di sepanjang senarsatu per satu, satu Arah horizontal atau vertikal. Itulah yang membuatnya Tata letak satu dimensi.
Anda bisa mengaktifkan Kemasan (Dalam CSS dan Figma), jadi ketika ruang habis, item bergerak ke baris berikut. Tapi paket ini terjadi Tertutupbukan ke luar – berarti tata letak didasarkan pada Isi elemen anak -anak,,,,, ukuranDan Perilakubukan struktur kisi.
Tata letak ini lebih banyak tentang mengalir Lebih dari struktur tetap. Ini adalah elemen yang secara alami harus menanggapi kontennya, seperti tombol, menu navigasi, label, atau bidang formulir yang ditumpuk.
Satu dimensi sangat bagus saat Anda meletakkan item dalam baris atau kolom. Jika Anda perlu mengontrol kedua arah (baris dan kolom) sekaligus, saat itulah kisi adalah pilihan yang lebih baik.
Menyaring alat tata letak yang berbeda
Baik Gambar dan CS memungkinkan Anda untuk menyatukan sistem tata letak yang berbeda. Anda dapat menggunakan kisi CSS untuk Nest Flexbox dalam tata letak dan bagian halaman penuh, dan sebaliknya. Tidak ada aturan yang sulit – hanya masalah memilih alat yang tepat untuk pekerjaan Anda. Dunia adalah tiram Anda.
Poin kunci terakhir: mesh eksplisit dan implisit. Dalam Gambar, kami menggunakan jaringan eksplisit, mendefinisikan setiap baris dan kolom. Namun, ketika Anda tidak yakin tentang segalanya, kisi CSS juga dapat membuat kisi implisit yang secara otomatis menghasilkan baris atau kolom berdasarkan konten. Ini sangat berguna untuk tata letak dinamis, seperti umpan blog atau daftar produk. Sebagai desainer, kami mengontrol jala eksplisit, tetapi memahami mesh implisit dapat membantu Anda tahu kapan harus mengisi celah di browser Anda, memastikan desain Anda berkembang dan beradaptasi dengan penggunaan dunia nyata.
Sebagai perancang UI, rasanya wajar untuk memiliki pendekatan yang jelas – itulah yang kami lihat dan kendalikan. Tetapi Mesh implisit Sangat kuat. Saat konten melampaui definisi, itu mengintervensi, memungkinkan tata letak iklan. Ini berarti desain Anda terlihat sempurna pada buah ara, tetapi apakah itu berbeda di browser karena browser mengisi celah untuk Anda.
Itulah mengapa sangat penting untuk menyadari hal ini. Ini bukan hanya tentang penampilannya, tetapi juga tentang bagaimana mereka berkembang dan merespons di dunia nyata. ini Grid implisit mempengaruhi jarak, penyelarasan dan aliran keseluruhan Ini tidak selalu merupakan cara yang jelas sampai Anda masuk ke browser.
Jadi biarkan pengingat ini: Tata letak bukan hanya tugas visual – ini adalah ruang umum antara desain dan pengembangan. DLebih dari sekadar berbicara dengan file Figma Anda. Bicaralah dengan pengembang Anda juga. Saat itulah keajaiban nyata terjadi.
Kami hanya menggaruk permukaan, jika Anda ingin menggali lebih dalam, ini Saya sangat merekomendasikan menjelajahi beberapa sumber daya gratis yang hebat:
Saya selalu ingin mendengar pendapat Anda! Jangan ragu untuk berbagi umpan balik atau beri tahu saya bahwa saya harus membahas detailnya.
Ingat berlangganan Di media kultur Kemudian ikuti saya Pembelajaran bulanmilikku komunikasi,,,,, twitter,,,,, atau LinkedIn Lebih banyak wawasan tentang desain UI, ara dan kode.
Pastikan untuk memeriksa kursus saya di mana saya juga dapat menggali tata letak Figma dan kode.
rencana pengembangan website
metode pengembangan website
jelaskan beberapa rencana untuk pengembangan website, proses pengembangan website, kekuatan dan kelemahan bisnis pengembangan website
, jasa pengembangan website, tahap pengembangan website, biaya pengembangan website
#Figmas #Grid #Anda #harus #memahami #kisi #CSS #sebagai #desainer #Christine #Vallaure #Mei
