Dalam beberapa tahun terakhir, Figma telah berkembang pesat dalam popularitas, dan itu tidak mengherankan. Perangkat lunak berbasis cloud yang gratis digunakan ini mudah diakses di semua perangkat dan tidak memerlukan cicilan atau unduhan apa pun. Dari mendesain antarmuka aplikasi seluler hingga membuat postingan media sosial, dengan Figma, Anda dapat bereksperimen dengan semua jenis fitur desain grafis dan memperluas keterampilan Anda.

Untuk konsistensi lebih dalam desain Anda, Anda mungkin ingin mempertimbangkan untuk menggunakan komponen dalam pekerjaan Anda. Komponen adalah elemen antarmuka pengguna (UI) yang dapat digunakan di banyak file di Figma. Ini sering kali dapat menjadi tambahan yang kuat untuk desain Anda dan meningkatkan kualitas keseluruhannya.

Apakah Anda baru mengenal Figma atau telah menggunakannya untuk sementara waktu dan tidak yakin bagaimana cara menggunakan komponen dengan sukses, kami di sini untuk membantu.

Dalam artikel ini , kita akan mempelajari cara menggunakan komponen Figma dan bagaimana ini dapat membantu Anda meningkatkan pekerjaan Anda.

Jika Anda tertarik untuk mengetahui lebih lanjut, lanjutkan membaca.

Cara Menggunakan Komponen di Figma

Menguasai penggunaan komponen dapat membantu Anda organisasi dan konsistensi saat mengoperasikan Figma. Elemen UI ini dapat digunakan berulang kali pada berbagai proyek desain yang mungkin sedang Anda kerjakan. Sebuah komponen dapat dibuat dalam sebuah ikon, tombol, dan banyak lagi, tergantung pada proyek Anda.

Hal hebat tentang memperkenalkan komponen ke pengalaman Figma Anda adalah menghemat banyak waktu. Setiap perubahan yang mungkin Anda buat pada satu komponen secara otomatis diperbarui pada komponen lainnya. Ini mungkin sangat berguna jika Anda memiliki kerangka waktu yang ketat atau berkolaborasi dengan desainer lain dan ingin mempercepat alur kerja Anda.

Memulai, Anda akan melihat bahwa ada dua bilah sisi di setiap sisi kanvas utama yang Anda gunakan. Anda dapat menggunakan alat dari salah satu bilah samping ini untuk mengedit proyek Anda.

Bilah samping di sisi kanan memberi Anda akses ke pengaturan prototipe apa pun dan memungkinkan Anda untuk menyesuaikan atau mengedit properti apa pun dari komponen Anda. Namun, bilah sisi di sebelah kiri memberi Anda lapisan, aset, dan halaman yang digunakan dalam proyek Anda. Ini disebut sebagai “Panel Lapisan.” Komponen

harus diperkenalkan ke pekerjaan Anda sejak dini. Mereka membantu Anda mempertahankan konsistensi dalam desain Anda dan memungkinkan Anda untuk mempercepat tingkat di mana Anda membuat perubahan di seluruh proyek Anda. Ada dua elemen kunci dari sebuah komponen:
Komponen Master (atau Utama) (ikon berlian empat kali lipat)Komponen Instance (ikon berlian tunggal)
Komponen Master

Sebelum hal lain, Anda harus membuat Komponen Master terlebih dahulu. Untuk melakukannya, ikuti langkah-langkah di bawah ini:
Klik kanan pada layer, grup, atau bingkai Anda. Pilih "Buat Komponen". Di sisi kiri layar, Anda akan melihat menu tarik-turun yang bertuliskan "Komponen .” Klik ini. Dari sini, Anda akan melihat menu di mana Anda dapat membuat perubahan pada komponen Anda dan mendesain ulang gaya di seluruh proyek.
Cara lain untuk membuat Komponen Master adalah dengan menggunakan pintasan:
Options + Command + K untuk MacCtrl + Alt + K untuk Windows
Tentu saja, metode ini hanya berfungsi jika Anda menggunakan Figma di PC.

Instant Components

An Instan Component adalah salinan dari Master Component Anda. Saat Komponen Master diedit dengan cara apa pun, Instans diperbarui secara otomatis agar sesuai dengan perubahan apa pun yang dibuat. Jika Anda sedang membangun situs web, alat ini bisa sangat berguna dan menghemat banyak waktu Anda. Misalnya, hari-hari untuk masuk ke semua komponen Anda secara manual untuk mengulangi pengeditan yang sama akan hilang. Sebagai gantinya, Figma mengubah semuanya untuk Anda.

Mungkin ada saatnya Anda telah membuat beberapa Instance dan ingin kembali ke Komponen Master sehingga Anda dapat membuat perubahan cepat ke semua komponen Anda. Untuk mengakses Komponen Utama Anda, lakukan hal berikut:
Klik kanan pada Instance mana saja.Klik “Go to Master Component.” Master Component akan muncul di sidebar di sisi kiri.
Sementara membuat komponen satu per satu relatif sederhana; Anda dapat mempercepat dengan membuatnya dalam jumlah besar. Untuk melakukannya, ikuti langkah-langkah berikut:
Dari “Layers Panel” Anda, pilih layer tempat Anda ingin membuat komponen. Klik ikon panah menghadap ke bawah yang terletak di sebelah ikon Master Component dalam “Layers Panel.” Pilih “Create Multiple Components” dari opsi yang tersedia. Dari sana, Figma akan membuat komponen untuk setiap layer frame.
Tanya Jawab Tambahan
Bagaimana Cara Mengganti atau Melepas Instance?


Mungkin ada saatnya Anda ingin membuat perubahan pada properti Instans tertentu tanpa mengubah semua yang lain. Anda dapat membuat variasi dari komponen yang berbeda. Di Figma, ini disebut sebagai "penggantian."

Setelah Anda mengganti Instance, perubahan apa pun yang dilakukan di Komponen Master tidak akan memengaruhinya. Untuk melakukannya, lihat langkah-langkah di bawah ini:

1. Klik pada Komponen Instance Anda.

2. Dari panel Properties di sisi kanan layar Anda, pilih “Component.”

3. Dari menu tarik-turun yang muncul, pilih “Detach Instance.”

Jika Anda ingin menghapus override, pilih komponen, lalu pilih “Reset Instance” dari bilah tengah atas di layar Anda.
Apa yang Harus Saya Lakukan jika Saya Tidak Sengaja Hapus Komponen Master Saya?


Ketika Anda menghabiskan sepanjang hari mengedit konten, terkadang Anda mungkin secara tidak sengaja terpeleset dan menghapus sesuatu yang penting, seperti Komponen Master Anda. Jangan takut, untuk memulihkannya semudah 1-2-3. Cukup ikuti langkah-langkah dasar ini untuk mendapatkan kembali Komponen Master yang hilang:

1. Buka salah satu Instance dari component.

2. Di panel Properties di sisi kanan layar, pilih “Restore Master Component.”

3. Komponen Master akan segera muncul.
Bagaimana Cara Menambahkan Deskripsi untuk Komponen Saya?


Saat membuat komponen, menambahkan deskripsi dan tautan dokumentasi ke masing-masing komponen dapat membantu Anda menavigasi proyek dengan lebih baik. Ini juga berguna untuk setiap kolaborator yang mungkin bekerja dengan Anda untuk memiliki akses ke catatan tambahan. Untuk menambahkan deskripsi, buka panel Properties di sisi kanan halaman dan pilih “Add a Description.”

Setelah Anda selesai melakukannya, setiap pemirsa luar dapat mengakses informasi ini dengan masuk ke “Panel Inspeksi” di sidebar kanan.
Bagaimana Cara Mengimpor Komponen Ke Figma?


Anda dapat mengimpor semua jenis file ke dalam komponen Figma. Cara termudah untuk melakukannya adalah dari desktop Anda. Cukup ikuti langkah-langkah berikut:

1. Di Figma, buka halaman tempat Anda ingin mengimpor file.

2. Dari file Anda, pilih file tertentu yang ingin Anda gunakan.

3. Seret dan jatuhkan file yang dipilih ke halaman Figma Anda.

4. Setelah Anda menyelesaikan ini, klik "Selesai."

Jalan Menuju Sukses

Figma adalah alat yang hebat untuk digunakan baik Anda baru dalam mendesain atau telah berkecimpung dalam game selama bertahun-tahun. Perangkat lunak ini menawarkan sistem pengeditan yang ramah bagi pemula di mana desainer dapat membuat konten dari awal atau menggunakan bantuan template jika diperlukan.

Memahami cara menggunakan komponen dengan sukses di Figma dapat menghemat banyak waktu Anda saat melakukan proyek desain. Dengan mempelajari cara membuat sistem komponen berkualitas tinggi, Anda akan dapat berkembang sebagai seorang desainer. Tidak hanya itu, tetapi juga dapat membantu Anda mempertahankan alur kerja yang konsisten sepanjang perjalanan kreatif Anda dan memungkinkan kolaborator masa depan untuk menemukan pekerjaan Anda dengan mudah.

Sudahkah Anda mencoba menggunakan Figma untuk proyek kreatif Anda? Bagaimana Anda menemukan menggunakan komponen? Beri tahu kami lebih banyak tentang pengalaman Anda di bagian komentar di bawah.