Cara Menggunakan Komponen dalam Figma

Dalam beberapa tahun kebelakangan ini, Figma telah berkembang pesat dalam populariti, dan tidak hairanlah. Perisian berasaskan awan yang boleh digunakan secara percuma boleh diakses dengan mudah pada semua peranti dan tidak memerlukan sebarang ansuran atau muat turun. Daripada mereka bentuk antara muka apl mudah alih kepada pembuatan siaran media sosial, dengan Figma, anda boleh bereksperimen dengan semua jenis ciri reka bentuk grafik dan mengembangkan kemahiran anda.

Untuk lebih konsisten dalam reka bentuk anda, anda mungkin ingin mempertimbangkan untuk menggunakan komponen dalam kerja anda. Komponen ialah elemen antara muka pengguna (UI) yang boleh digunakan merentas berbilang fail pada Figma. Ini selalunya boleh menjadi tambahan yang kukuh pada reka bentuk anda dan meningkatkan kualiti keseluruhannya.

Sama ada anda baru menggunakan Figma atau telah menggunakannya untuk seketika dan tidak pasti cara menggunakan komponen dengan jayanya, kami sedia membantu.

Dalam artikel ini, kami akan meneroka cara menggunakan komponen Figma dan cara ini boleh membantu anda meningkatkan kerja anda.

Jika anda berminat untuk mengetahui lebih lanjut, teruskan membaca.

Cara Menggunakan Komponen dalam Figma

Menguasai penggunaan komponen boleh membantu anda dengan organisasi dan konsistensi semasa mengendalikan Figma. Elemen UI ini boleh digunakan berulang kali dalam pelbagai projek reka bentuk yang mungkin anda sedang usahakan. Komponen boleh dibuat dalam ikon, butang dan banyak lagi, bergantung pada projek anda.

Perkara yang menarik tentang memperkenalkan komponen kepada pengalaman Figma anda ialah ia menjimatkan banyak masa anda. Sebarang perubahan yang mungkin anda buat pada satu komponen secara automatik dikemas kini pada yang lain. Ini mungkin berguna terutamanya jika anda mempunyai tempoh masa yang ketat atau bekerjasama dengan pereka bentuk lain dan ingin mempercepatkan aliran kerja anda.

Bermula, anda akan perasan bahawa terdapat dua bar sisi pada setiap sisi kanvas utama yang anda gunakan. Anda boleh menggunakan alatan daripada salah satu bar sisi ini untuk membuat pengeditan pada projek anda.

Bar sisi di sebelah kanan memberi anda akses kepada sebarang tetapan prototaip dan membolehkan anda melaraskan atau mengedit sebarang sifat komponen anda. Walau bagaimanapun, bar sisi di sebelah kiri membentangkan anda dengan lapisan, aset dan halaman yang digunakan dalam projek anda. Ini dirujuk sebagai Panel Lapisan.

Komponen harus diperkenalkan pada kerja anda agak awal. Ia membantu anda mengekalkan konsistensi dalam reka bentuk anda dan membolehkan anda mempercepatkan kadar anda membuat perubahan merentas projek anda. Terdapat dua elemen utama komponen:

• Komponen Induk (atau Utama) (ikon berlian empat kali ganda)
• Komponen Contoh (ikon berlian tunggal)

Komponen Induk

Sebelum perkara lain, anda mesti mencipta Komponen Induk terlebih dahulu. Untuk melakukan ini, ikuti langkah di bawah:

1. Klik kanan pada lapisan, kumpulan atau bingkai anda.
   
2. Pilih Cipta Komponen.
   
3. Di sebelah kiri skrin, anda akan melihat menu lungsur yang tertera Komponen. Klik pada ini.
   
4. Dari sini, anda akan melihat menu di mana anda boleh membuat perubahan pada komponen anda dan gaya reka bentuk semula merentas projek.
   

Cara lain untuk mencipta Komponen Induk ialah menggunakan pintasan:

• Pilihan + Perintah + K untuk Mac
• Ctrl + Alt + K untuk Windows

Sudah tentu, kaedah ini hanya berfungsi jika anda menggunakan Figma pada PC.

Komponen Segera

Komponen Segera ialah salinan Komponen Induk anda. Apabila Komponen Induk disunting dalam apa jua cara, Instance dikemas kini secara automatik untuk memadankan sebarang perubahan yang dibuat. Jika anda membina tapak web, alat ini amat berguna dan menjimatkan banyak masa anda. Sebagai contoh, hilang ialah hari-hari untuk masuk ke semua komponen anda secara manual untuk mengulangi pengeditan yang sama. Sebaliknya, Figma mengubah semuanya untuk anda.

Mungkin tiba masanya anda telah mencipta berbilang Contoh dan ingin kembali ke Komponen Induk anda supaya anda boleh membuat perubahan pantas pada semua komponen anda. Untuk mengakses Komponen Utama anda, lakukan perkara berikut:

1. Klik kanan pada mana-mana Contoh.
   
2. Klik pada Pergi ke Komponen Induk.
   
3. Komponen Induk akan muncul di bar sisi di sebelah kiri.
   

Walaupun membuat komponen satu demi satu adalah agak mudah; anda boleh mempercepatkan perkara dengan membuatnya secara pukal. Untuk melakukan ini, ikuti langkah berikut:

bagaimana membuat pelayan tidak terputus

1. Daripada Panel Lapisan anda, pilih lapisan yang anda ingin buat komponen.
   
2. Klik ikon anak panah yang menghadap ke bawah yang terletak di sebelah ikon Komponen Induk dalam Panel Lapisan.
   
3. Pilih Cipta Berbilang Komponen daripada pilihan yang tersedia.
   
4. Dari situ, Figma akan membuat komponen untuk setiap lapisan bingkai.
   

Soalan Lazim Tambahan

Bagaimana Saya Mengatasi atau Mengeluarkan Contoh?

Mungkin ada kalanya anda ingin membuat perubahan pada sifat Instance tertentu tanpa mengubah semua yang lain. Anda boleh membuat variasi komponen yang berbeza. Dalam Figma, ini dirujuk sebagai mengatasi.

Sebaik sahaja anda mengatasi Instance, sebarang perubahan yang dibuat dalam Komponen Induk tidak akan menjejaskannya. Untuk melakukan ini, lihat langkah-langkah di bawah:

1. Klik pada Komponen Instance anda.

2. Daripada panel Properties di sebelah kanan skrin anda, pilih Component.

3. Daripada menu lungsur yang muncul, pilih Detach Instance.

Jika anda ingin mengosongkan penggantian, pilih komponen, kemudian pilih Tetapkan Semula Contoh daripada bar tengah atas pada skrin anda.

Apakah Yang Saya Lakukan Jika Saya Secara Tidak Sengaja Padamkan Komponen Induk Saya?

Apabila anda menghabiskan sepanjang hari mengedit kandungan, kadangkala anda mungkin tergelincir secara tidak sengaja dan memadamkan sesuatu yang penting, seperti Komponen Induk anda. Jangan takut, kerana memulihkannya semudah 1-2-3. Cuma ikut langkah asas ini untuk mendapatkan kembali Komponen Induk yang hilang itu:

1. Pergi ke salah satu Contoh komponen.

2. Dalam panel Properties di sebelah kanan skrin, pilih Restore Master Component.

3. Komponen Induk akan muncul serta-merta.

Bagaimanakah Saya Menambah Penerangan untuk Komponen Saya?

Apabila membuat komponen anda, menambah penerangan dan pautan dokumentasi kepada setiap satu boleh membantu anda menavigasi projek anda dengan lebih baik. Ia juga berguna untuk mana-mana kolaborator yang mungkin bekerjasama dengan anda untuk mempunyai akses kepada nota tambahan. Untuk menambah penerangan, pergi ke panel Properties di sebelah kanan halaman dan pilih Tambah Penerangan.

Setelah anda melakukannya, mana-mana penonton luar boleh mengakses maklumat ini dengan pergi ke Panel Periksa di bar sisi sebelah kanan.

Bagaimanakah Saya Mengimport Komponen Ke dalam Figma?

Anda boleh mengimport semua jenis fail ke dalam komponen Figma. Cara paling mudah untuk melakukannya ialah dari desktop anda. Hanya ikuti langkah berikut:

1. Dalam Figma, buka halaman yang anda ingin mengimport fail.

2. Daripada fail anda, pilih fail khusus yang anda ingin gunakan.

3. Seret dan lepaskan fail yang dipilih ke dalam halaman Figma anda.

4. Apabila anda telah selesai ini, klik Selesai.

Jalan Menuju Kejayaan

Figma ialah alat yang hebat untuk digunakan sama ada anda baru untuk mereka bentuk atau telah berada dalam permainan selama bertahun-tahun. Perisian ini menawarkan sistem penyuntingan mesra pemula di mana pereka boleh mencipta kandungan dari awal atau menggunakan bantuan templat jika perlu.

Memahami cara menggunakan komponen dengan jayanya pada Figma boleh menjimatkan banyak masa anda semasa menjalankan projek reka bentuk. Dengan mempelajari cara mencipta sistem komponen berkualiti tinggi, anda akan dapat berkembang sebagai pereka bentuk. Bukan itu sahaja, tetapi ia juga boleh membantu anda mengekalkan aliran kerja yang konsisten sepanjang perjalanan kreatif anda dan membolehkan mana-mana rakan usaha sama masa hadapan mencari kerja anda dengan mudah.

Pernahkah anda mencuba menggunakan Figma untuk projek kreatif anda? Bagaimanakah anda mendapati menggunakan komponen? Beritahu kami lebih lanjut tentang pengalaman anda di bahagian komen di bawah.