Praktikum 2
COMPONENTS FIGMA
A. Materi
• Mempelajari Components dan Instance di Figma
B. Kompetensi Dasar
• Mengenali pengertian component dan instance dalam Figma.
• Memahami perbedaan antara master component dan instance serta hubungan antar
keduanya.
• Membuat component dari elemen UI dasar di canvas Figma.
• Menggunakan instance dan melakukan override sederhana seperti perubahan teks, warna,
dan ukuran.
• Memahami fungsi reset dan detach instance serta kapan penggunaannya dalam desain UI.
C. Tujuan
• Mahasiswa memahami konsep dasar component dan instance dalam Figma.
• Mahasiswa mampu membuat master component dari elemen desain.
• Mahasiswa memahami cara detach, reset, dan mengelola banyak komponen dalam satu
file.
D. Dasar Teori
• Pengertian Components
a. Komponen (component) adalah elemen UI (seperti tombol, form, ikon, dsb.) yang
dirancang agar bisa digunakan kembali di berbagai bagian desain. Fitur ini membantu
menjaga konsistensi desain dan memungkinkan perubahan secara serentak di seluruh
project.
• Pengertian Master Components dan Instance
a. Master components di Figma adalah versi asli atau induk dari sebuah komponen yang
berfungsi sebagai sumber utama (source of truth) bagi semua salinannya. Setiap
perubahan yang dilakukan pada master component akan otomatis diterapkan ke semua
instance yang terkait, sehingga memastikan konsistensi desain di seluruh proyek.
b. Instance adalah salinan atau turunan dari master component. Instance tetap terhubung
ke master component, sehingga jika master diubah, instance juga ikut berubah. Namun,
instance bisa diubah sebagian propertinya (seperti teks atau warna) tanpa memutus
keterkaitan dengan master component.
c. Singkatnya, Master Component adalah komponen utama yang pertama kali dibuat.
Sedangkan instance adalah salinan dari master component yang bisa digunakan di
berbagai tempat dalam desain. Semua perubahan yang dilakukan pada master
component akan otomatis diterapkan pada semua instance-nya.
BY: ASPRAK 22 – UNIBA MADURA
• Cara Membuat Component
a. Pilih elemen yang ingin dijadikan component (misal: tombol, ikon, atau form).
b. Gunakan shortcut keyboard: Ctrl + Alt + K atau bisa juga dengan klik kanan pada
elemen, lalu pilih Create Component.
c. Komponen yang berhasil dibuat akan ditandai dengan ikon empat berlian ungu di panel
Layers.
• Cara Menggunakan Component (Membuat Instance)
a. Duplikat: Pilih component, lalu tekan Ctrl + D atau drag sambil tekan Alt dari master
component ke area canvas.
b. Bisa juga copy-paste: Ctrl + C lalu Ctrl + V.
c. Master ditandai dengan ikon empat berlian, sementara instance memiliki satu berlian.
BY: ASPRAK 22 – UNIBA MADURA
• Override
Override adalah perubahan yang dilakukan hanya pada instance tanpa memengaruhi
master component.
Beberapa hal yang bisa di-override antara lain:
- Teks
- Warna atau efek bayangan
- Ukuran
Namun, struktur internal (seperti posisi layer, rotasi, dan constraint) tidak dapat diubah
dari instance.
• Reset Instance dan Detach Instance
Reset Instance: Untuk mengembalikan instance ke bentuk awal master.
BY: ASPRAK 22 – UNIBA MADURA
Detach Instance: Untuk memutus hubungan instance dari master.
E. Kegiatan Praktikum
Soal:
1. Buat tombol dengan teks “Kirim” dan warna oranye, lalu ubah menjadi component.
2. Buat 3 instance dari tombol tersebut, dan ubah teksnya menjadi:
- Submit
- Simpan
- Lanjut
3. Ubah warna pada master component menjadi biru, lalu perhatikan apakah semua instance ikut
berubah.
BY: ASPRAK 22 – UNIBA MADURA
F. Tugas Praktikum
Soal:
1. Buatlah desain UI sederhana untuk tampilan daftar produk (seperti katalog belanja)
menggunakan fitur component dan instance. Selanjutnya, buat 3 instance dari master
tersebut dan lakukan override pada bagian teks, harga/informasi, dan gambar atau ikon
(jika diperlukan), agar setiap instance memiliki tampilan dan isi yang berbeda namun
tetap konsisten secara desain.
BY: ASPRAK 22 – UNIBA MADURA