Menguasai cara kami menamakan lapisan, pembolehubah, komponen dan token dalam Figma bukanlah suatu kehendak, ia adalah keperluan praktikal. Sistem penamaan yang difikirkan dengan baik mempercepatkan kerja, mengelakkan kekeliruan dan menghapuskan geseran antara reka bentuk dan pembangunan.terutamanya apabila beberapa orang sedang mengedit fail yang sama.
Jika anda bekerja dalam reka bentuk antara muka dan ingin meningkatkan tahap anda, adalah idea yang baik untuk menyusun rumah anda dari bawah: nama yang digunakan, cara ia distrukturkan dan cara ia didokumenkan. Sepanjang panduan ini, anda akan menemui amalan yang terbukti, contoh yang jelas dan cadangan yang koheren untuk menyeragamkan segala-galanya dalam Figmadaripada fail dan halaman hingga ke pembolehubah warna atau tipografi terkecil.
Asas: Mengapa menyeragamkan tatanama dalam Figma
Sebelum pergi ke perincian, adalah wajar mengingati asas: sistem reka bentuk adalah sumber kebenaran untuk produk digital. Ia ialah set komponen dan gaya yang mentakrifkan identiti visual, kebolehcapaian dan konsistensi antara muka andaDan Figma adalah tempat di mana kebenaran itu dibina, diterbitkan, dan digunakan.
Dalam sistem itu, sifat dan nilainya adalah bahan binaan yang mengekalkannya. Warna, fon, jarak, saiz, kesan dan keadaan memerlukan tatanama yang logik, boleh dibaca dan berskala. untuk keseluruhan organisasi, bukan hanya untuk orang yang mereka bentuk komponen pertama.
Standard biasa mengelakkan kekaburan. Penamaan bukan tentang meletakkan label yang cantik, tetapi tentang mencipta taksonomi yang tahan ujian masa dan pertumbuhan produk.dan itu membolehkan sesiapa sahaja dalam pasukan mengetahui perkara yang perlu digunakan, tempat untuk menukarnya dan cara ia memberi kesan kepada pengguna akhir.
Organisasi komponen dan gaya: corak yang berfungsi
Amalan yang baik ialah nama untuk menceritakan tentang apa itu sesuatu, bagaimana ia berkelakuan, dan di mana ia digunakan. Ini melibatkan pengasingan nama peranan semantik daripada nama deskriptif atau penampilan semata-mata.dan pastikan mereka konsisten antara satu sama lain.
Untuk komponen interaktif, adalah dinasihatkan untuk menentukan elemen dan keadaan. Contohnya, butang boleh mempunyai keadaan asas, tuding, fokus, ditekan dan dilumpuhkan.Dan adalah penting bahawa nama itu menunjukkan dengan jelas corak yang akan diikuti oleh seluruh perpustakaan.
- Butang: Gunakan konvensyen yang konsisten, seperti Butang Utama, Butang Sekunder, Butang Tertiari dan tambah keadaan dengan akhiran, contohnya Butang Utama — Tuding.
- Ikon: pilih nama deskriptif seperti Ikon Mel, Ikon Rangkaian Sosial atau Ikon Carian. Elakkan kad bebas generik yang tidak dikira untuk apa-apa dan dalam jangka masa panjang menjadikan pencarian lebih sukar.
Jika anda bekerja dengan lebih daripada satu sistem atau jenama, bezakan skop dengan jelas. Primer dan Secondary ialah label yang berguna apabila dua sistem reka bentuk atau dua palet utama wujud bersamadan membantu mengekalkan kejelasan pada tahap komponen dan token.
Keajaiban tatanama bukan sekadar estetik; kesan sebenar terletak pada kerjasama. Apabila reka bentuk dan pembangunan berkongsi nama dan struktur, komunikasi bertambah baik, penyerahan lebih lancar, dan ralat dikurangkan. kerana sesiapa sahaja boleh mencari sumber yang betul pada percubaan pertama.
Bagaimana untuk menyediakan dan mengekalkan sistem reka bentuk anda dalam Figma
Mewujudkan sistem reka bentuk dalam fail khusus membawa ketertiban dan tadbir urus. Fail itu hendaklah menjadi rujukan untuk perpustakaan, komponen induk dan gaya yang diterbitkan.dan ia harus dilindungi dan versi.
- Inventori awalSenaraikan elemen utama. Tentukan palet asas dan skalanya, tipografi dan tahapnya, corak jarak dan gaya kesan.
- Fail induk sistem: mencipta fail khusus dalam Figma untuk sistem reka bentuk. Ia akan menjadi asal komponen dan gaya, serta dokumentasinya.
- Komponen tersusunKumpulan mengikut keluarga (Butang, Borang, Navigasi, Maklum Balas). Gunakan konvensyen penamaan yang dipersetujui dan kekalkan hierarki yang jelas dalam Aset.
- Gaya yang jelas: menerbitkan gaya warna, teks, grid dan kesan. Namakan gaya menggunakan kriteria yang sama yang anda akan gunakan untuk pembolehubah dan token. untuk mengelakkan pertindihan.
- Dokumentasi hidupTambahkan halaman panduan pengguna, contoh dan garis panduan. Tentukan perkara yang boleh diedit, siapa yang menerbitkan dan cara mengubah versi.
Semua ini mesti disertai dengan proses. Adalah dinasihatkan untuk bersetuju dengan aliran kerja untuk penerbitan perpustakaan, semakan rakan sebaya dan jadual keluaran. supaya perubahan merebak dengan kawalan dan kebolehkesanan.
Token dan piawaian reka bentuk: daripada JSON hingga W3C dan Kamus Gaya
Token reka bentuk ialah perwakilan terkecil keputusan visual dan interaksi dalam format mudah alih. Menyimpan token dalam JSON telah menjadi amalan biasa dan alatan seperti Style Dictionary merapatkan jurang kepada platform menjana pembolehubah untuk web, iOS atau Android.
Walau bagaimanapun, walaupun terdapat kata sepakat untuk menggunakan JSON, tidak selalu ada persetujuan tentang cara mengatur JSON itu. Kamus Gaya mempopularkan taksonomi CTI (Kategori, Jenis, Item) untuk menstrukturkan token, sesuatu yang sangat berguna untuk menapis dan mengubah dalam saluran paip automatik.
Pada Julai 2023, draf yang berkaitan telah diterbitkan oleh kumpulan kerja W3C untuk menyeragamkan format token reka bentuk. Spesifikasi itu mencadangkan, antara lain, harta khas yang dipanggil $type untuk mengkategorikan token secara eksplisit, menjauhkan diri daripada CTI dalam beberapa aspek.
Apakah maksud ini? Jika anda mengeksport token daripada Figma dengan spesifikasi baharu dan berhasrat untuk memprosesnya dengan konfigurasi Kamus Gaya klasik, Ketidakserasian mungkin timbul apabila menapis atau mengubah Kerana peraturan mengharapkan CTI. Berita baiknya ialah Kamus Gaya adalah fleksibel: anda boleh menyesuaikan transformasi, penapis dan format agar sesuai dengan standard yang muncul.
Semasa garis panduan rasmi sedang dibangunkan, struktur yang anda pakai adalah penting untuk mengingati pengguna: kebolehkesanan berubah-ubah, kejelasan semantik dan keserasian dengan alat binaanSelain itu, perlu diingat analisis pihak ketiga dan kes praktikal yang diterbitkan oleh pemimpin industri (contohnya, cadangan taksonomi untuk skala antara muka atau pengalaman yang dikongsi oleh sistem besar seperti Salesforce) supaya tidak mencipta semula roda.
Penamaan boleh ubah: warna dan tipografi tanpa sakit kepala
Banyak pasukan mencampurkan nama seperti Biru Utama dengan skala seperti Biru-500 dan peranan tipografi seperti Tanduk Besar atau Badan Biasa. Cara paling teguh untuk menyelesaikan masalah ini ialah memisahkan lapisan: token penampilan asas dan token niat semantik..
warna. Tentukan palet asas mengikut skala (contohnya, Biru 50, 100, 200, 300, 400, 500, 600, 700, 800, 900) dan neutral berasingan. Itu adalah token asas Dan ia tidak boleh digunakan secara langsung dalam komponen jika anda mencari fleksibiliti tematik. Selain itu, cipta token semantik seperti Warna Latar Belakang Utama, Teks Sekunder atau Sempadan Interaktif, yang memetakan kepada yang asas. Dengan cara ini, menukar tema atau jenama adalah pemetaan, bukan pembedahan.
Untuk keadaan, tambahkan akhiran yang konsisten: Tuding, Fokus, Aktif, Dilumpuhkan dan Dipilih Ini adalah mencukupi untuk menampung kebanyakan kes. Jika anda memerlukan kontras yang boleh diakses, pertimbangkan varian Kontras Tinggi yang dikaitkan dengan peranan semantik.
Tipografi. Isytiharkan token gubahan yang memisahkan saiz, berat, pendahuluan dan penjejakan serta membina gaya teks dengan peranan. guna Nama niat seperti Tajuk XLSari kata M, Body M, Footer S, dan jelaskan berat dengan akhiran piawai, contohnya, Body M Regular, Body M Semibold. Jika anda bekerja dengan berbilang jenama atau produk, tambahkan awalan konteks seperti Web, iOS atau Jenama A apabila sangat diperlukan.
Mencampurkan bahasa Sepanyol dengan kod angka adalah berdaya maju jika anda konsisten. Gunakan tanda sempang untuk memisahkan atribut, mengelakkan ruang bermasalah dan mengekalkan susunan semantik daripada makro kepada mikroContohnya, Warna — Latar Belakang — Utama — Tuding atau Teks — Badan — M — Semibold. Jika anda memilih skala bernombor (mis., Biru-500), gunakannya hanya pada token asas; peranan semantik tidak seharusnya bergantung pada nombor yang tidak menjelaskan maksud.
Nota mengenai pengantarabangsaan: walaupun pasukan berbahasa Sepanyol, Penyeragaman akhiran teknikal atau singkatan (md, lg, sm, xl) memudahkan penggunaan oleh alatan dan orang dari pasukan lainKuncinya bukan bahasa, tetapi konsistensi dan kebolehkesanan.
Seni bina Figma: pasukan, projek, fail dan halaman
Struktur Figma mempengaruhi kebenaran, carian dan prestasi. Dalam akaun Pasukan Profesional anda bekerja dengan Projek, Fail dan HalamanDalam Pasukan Organisasi, lapisan Pasukan ditambah, berguna dalam perbadanan dan struktur kompleks.
kebenaran. Anda boleh memberikan akses baca sahaja, edit atau pentadbiran pada peringkat projek dan fail. Selain itu, terdapat projek lihat sahaja, di mana hanya pencipta mengedit, dan projek jemputan sahaja, yang bertindak sebagai peribadi.Sentiasa sampaikan jemputan dengan keupayaan menyunting untuk mengekalkan kawalan sistem.
Konvensyen penamaan projek. Wujudkan corak seperti _ supaya semuanya boleh dikenal pasti dan boleh disusun. Ia mengutamakan nama pendek dan utilitarian supaya ia kelihatan lengkap dalam antara muka dan jangan menimbulkan kekaburan.
Jenis fail. Perbezaan antara Utama, Aktif dan Arkib. Utama adalah sumber kebenaran dan tertutup kepada perubahan kecuali untuk tadbir urusAktif ialah tempat anda bekerja; Diarkibkan ialah rekod sejarah yang boleh dicari. Apabila menerbitkan perpustakaan, lakukan daripada Main.
Sampul dan persembahan. Figma membolehkan anda memilih bingkai sebagai lakaran kenit (Tetapkan sebagai lakaran kenit). Gunakan bingkai 620×320 px untuk menjadikan penutup kelihatan tajam. dan warna yang konsisten mengikut jenis fail (contohnya, satu warna untuk Utama, satu lagi untuk Aktif, satu lagi untuk Arkib). Elakkan memuatkan fail yang besar: bahagikan mengikut ciri dan produk.
Penomboran halaman, aliran dan bingkai: jadikan segala-galanya penting.
Penamaan halaman. Corak yang berkesan ialah , dengan id tambahan dan sifar pendahuluan untuk pesanan yang stabil. Lengkapkan nama dengan kod status dalam tajuk itu sendiri atau dengan emoji yang dipersetujui. untuk menunjukkan sama ada ia telah siap, sedang berjalan, dalam semakan atau dibuang.
Aliran dan baris. Bekerja dalam setiap halaman dengan deretan bingkai yang mewakili cerita atau senario pengguna. Sertakan bingkai penutup pada permulaan setiap baris dengan nama aliran dan penerangan kontekstual ringkas untuk mengelakkan salah faham dan memudahkan semakan.
Penomboran bingkai. Sintaks seperti _ berfungsi dengan baik. Gunakan sifar pendahuluan untuk memastikan pesanan semula jadi (01, 02, 03, 04, 05, 06, 07, 08, 09, 10) dan paparan nombor dari kiri ke kanan dalam baris. Contoh: 01_100, 01_101, 01_102 untuk baris pertama; 01_200, 01_201, 01_202 untuk yang kedua.
Berversi. Jangan bergantung pada autosimpan semata-mata. Gunakan sejarah versi untuk menjana komitmen apabila pencapaian dicapai, terutamanya dalam sistem reka bentuk atau fungsi besar.meninggalkan mesej yang jelas untuk pasukan dan untuk audit masa depan.
Peralatan sistem dan perpustakaan tadbir urus
Perpustakaan menukar fail Figma menjadi pembekal komponen dan gaya yang boleh digunakan semula. Ia diterbitkan daripada panel Aset dan memerlukan disiplin kebenaran dan semakan. untuk mengelakkan pecah reka bentuk bergantung.
Dalam organisasi yang lebih besar, adalah berbaloi untuk mewujudkan pasukan khusus untuk sistem reka bentuk. Dengan cara ini anda mempunyai kawalan yang lebih baik ke atas siapa yang boleh mengedit dan menerbitkan, dan seluruh syarikat menggunakan kebenaran baca sahaja.Pemisahan ini mengurangkan insiden dan menjadikan kitaran perubahan lebih mudah diramal.
Jenis pasukan dalam Organisasi: Terbuka, Tertutup dan Rahsia. Terbuka membenarkan sesiapa sahaja untuk menyertai dan melihat dokumentasi; Ditutup memerlukan jemputan untuk melihat kandungan; Rahsia tidak dapat dilihat tanpa jemputanPilih mengikut sensitiviti projek dan fasa sistem.
Analitis dan pentadbiran. Konsol Pentadbiran Organisasi menyediakan metrik pada penggunaan komponen dan gaya serta membolehkan anda mengaktifkan pustaka lalai. Ini amat berguna untuk aset jenama, muka depan, ikonografi atau sumber biasa yang perlu tersedia dengan lancar..
Automatikkan penamaan semula dengan Figma AI
Figma AI boleh menjimatkan masa dengan memberikan nama kontekstual kepada lapisan secara pukal. AI menganalisis kandungan, kedudukan dan hubungan antara lapisan yang dipilih untuk mencadangkan nama yang koheren, dan juga menyegerakkan antara bingkai peringkat lebih tinggi jika ia mengesan lapisan tidak bernama yang sama.
Alat ini menghormati apa yang telah anda namakan semula. Ia hanya menukar lapisan yang masih mempunyai konvensyen Figma lalai. Dan, jika anda menyertakan lapisan yang dinamakan semula dalam pemilihan, ia akan memastikan lapisan itu utuh melainkan anda memaksa tindakan itu.
Lapisan yang dinamakan semula: bingkai, kumpulan, teks, kejadian yang mengekalkan nama lalai komponen dan segi empat tepat dengan isian imej. Dalam sesetengah keadaan, ia hanya bertindak pada bekas, bukan pada sublapisan.untuk mengelakkan kesan sampingan.
Lapisan yang tidak dinamakan semula: lapisan yang telah dinamakan semula, disembunyikan atau dikunci; sublapisan dalam keadaan; bentuk vektor individu seperti elips, bintang, poligon dan grid vektor; dan segi empat tepat tanpa isian imej. Bagi mereka, perubahan masih manual atau di peringkat komponen.
Cara melancarkannya: Selepas memilih lapisan, anda boleh menggunakan menu konteks, butang Tindakan dalam bar alat atau menu tindakan pantas. Jika tiada apa-apa untuk menamakan semula, Figma memaparkan amaran dan membenarkan anda memaksa tindakan dengan Namakan semula juga. jika anda perlu menyeragamkan nama.
Amalan terbaik khusus untuk warna dan teks dalam pembolehubah
Jika hari ini Pengetua Azul dan Azul-500 wujud bersama, buat lompatan kepada model dwi. Tentukan pembolehubah asas mengikut skala (Biru-50 hingga Biru-900) dan pembolehubah semantik mengikut tujuan (Latar Belakang-Utama, Teks-Sekunder, Sempadan-Interaktif)dan memetakan satu sama lain. Jambatan itulah yang memberikan anda daya tahan terhadap perubahan dalam penjenamaan atau tema.
Memperkenalkan akhiran seragam untuk keadaan: Tuding, Fokus, Aktif, Dilumpuhkan, DipilihJika anda bekerja dengan permukaan dan ketinggian, tambahkan varian untuk Permukaan Tinggi atau Kandungan-Pada-Latar Belakang Halus, sentiasa di bawah payung semantik.
Dalam tipografi, ia memisahkan alias dan token komposisi. Alias ​​mengikut peranan (Tajuk-XL, Sarikata-M, Badan-M) dan komposisi dengan saiz, berat, jarak baris dan penjejakanApabila nama fon berubah atau produk berkembang, anda tidak perlu menyentuh setiap skrin, hanya pemetaan.
Pendekatan ini juga memudahkan komunikasi dengan pembangunan. Pembangun biasanya menghargai pembolehubah yang stabil dan boleh diramal.Contohnya, –color-text-primary atau –font-body-md, bukannya nama estetik yang berubah mengikut arah aliran.
Pemalam yang disyorkan untuk memastikan perkara teratur
Menggunakan alat bantu menghapuskan tugas berulang dan kesilapan manusia. Terdapat pemalam dalam Figma yang membantu membersihkan nama, menyegerakkan kandungan atau mengesan sambungan antara skrin.
- Cari dan Ganti: berguna untuk menyatukan nama lapisan, gaya atau teks secara pukal.
- Kekili Kandungan: Ia membolehkan anda memasukkan kandungan sampel yang konsisten dan boleh digunakan semula. untuk menguji keadaan dan panjang.
- Pengisih: membantu mengisih lapisan dan papan seni dengan kriteria yang boleh diramal.
- Penyegerakan Helaian Google: menyegerakkan data jadual dengan reka letak, sesuai untuk senarai atau jadual.
- Autoflow: lukis anak panah dan sambungan antara bingkai untuk membentangkan mengalir dengan mudah.
- Garis Merah: Menghasilkan spesifikasi visual ukuran, jarak dan gaya.
Bekerja dengan pelanggan dan Organisasi akaun
Apabila anda bekerjasama dengan organisasi luar, struktur dan kebenaran perlu diselaraskan. Dalam akaun Pasukan Organisasi, anda boleh membuat pasukan mengikut produk, mengaktifkan pustaka lalai dan melihat analitis penerimaanyang membantu mentadbir sistem dengan data.
Kelebihan mempunyai pasukan yang berasingan: hierarki yang jelas, pengasingan produk atau projek, kebenaran khusus mengikut peranan, tahap organisasi tambahan dan kerjasama yang lebih lancar. Direktori berperingkat (Pasukan, Projek) menyediakan peta minda segera yang mengurangkan geseran apabila memasukkan fail baharu.
Untuk kegunaan harian, kekalkan corak yang sama seperti di rumah anda sendiri: projek untuk Utama, Aktif dan Arkib; fail ringan mengikut fungsi; halaman dengan ID dan status yang boleh dilihat; dan dikemas kini dengan mesej yang jelas pada penghujung setiap peristiwa penting untuk meninggalkan jejak.
Latihan dan pembangunan profesional
Jika anda ingin mendalami dan meningkatkan kerjaya anda dalam UX/UI, pertimbangkan untuk berlatih dengan profesional yang aktif. Program intensif seperti KeepCoding's UX/UI Design AI Driven Full Stack Bootcamp menggabungkan amalan, pertimbangan dan teknologi gunaan kepada reka bentuk dan pembangunan, dengan profesor yang berada dalam sektor ini setiap hari.
Selain belajar menguasai Figma, latihan jenis ini mendedahkan anda kepada kes dunia sebenar, aliran kerja pasukan dan keputusan yang memberi kesan. Gabungan teori dan amalan ini mempercepatkan kebolehpasaran anda dan membantu anda membina portfolio yang kukuh dalam pasaran yang kompetitif.
Dengan rangka kerja yang jelas bagi nama dan proses, sistem reka bentuk yang diterbitkan dengan baik, dan strategi token yang mematuhi piawaian, Pasukan anda akan memperoleh kelajuan, mengurangkan ralat dan dapat mengembangkan produk tanpa melanggar apa-apa.Perkara yang penting ialah bersetuju dengan konvensyen, mendokumentasikannya dan menguatkuasakannya dengan alatan, kebenaran dan ulasan: selebihnya diulang secara bijak.
