Figma Profesional
Figma adalah alat utama designer modern. Modul ini mengajarkan cara kerja yang rapi dan scalable: Auto Layout, components, variants, styles, variables/design tokens, prototype interaktif, dan Dev Mode untuk handoff.
Tujuan Modul
User bisa bekerja dengan Figma seperti designer profesional.
- Menyusun file Figma yang rapi dengan naming convention jelas.
- Menguasai Auto Layout untuk layout responsif tanpa drama.
- Membuat komponen dengan variants dan state lengkap.
- Membangun prototype interaktif dan menyiapkan handoff lewat Dev Mode.
Auto Layout & Components: Berhenti Menggeser Manual
30 menit
Tujuan Lesson
Kenapa Auto Layout mengubah segalanya
Tanpa Auto Layout, kamu menggeser setiap elemen secara manual setiap kali ada perubahan teks. Dengan Auto Layout, elemen menata diri otomatis: padding, jarak antar item, dan arah (horizontal/vertikal) diatur sekali, lalu komponen menyesuaikan ukuran konten.
Frame, grid, dan constraints
Frame adalah wadah. Layout grid membantu menyusun kolom. Constraints menentukan bagaimana elemen menempel saat frame diubah ukurannya (pin kiri, kanan, stretch). Kombinasi ketiganya membuat desain responsif.
Components & instances
Component adalah master; instance adalah salinan yang mengikuti master. Ubah master sekali, semua instance ikut berubah. Ini fondasi konsistensi dan kecepatan kerja.
Variants untuk state
Variants menyatukan banyak versi komponen (default, hover, disabled) dalam satu set yang bisa di-switch lewat properti. Satu tombol bisa punya properti size, state, dan icon dalam satu tempat.
Contoh Baik
Tombol dibuat dengan Auto Layout sehingga melebar otomatis mengikuti teks, dan punya variants untuk semua state. Mengganti teks tidak merusak layout.
✕ Contoh Buruk
Tombol digambar manual dengan ukuran tetap. Saat teks lebih panjang, teks keluar dari kotak dan harus diperbaiki manual satu per satu.
Kesalahan Umum Pemula
- ⚠Tidak memakai Auto Layout sehingga semua manual.
- ⚠Menduplikat komponen alih-alih membuat instance.
- ⚠Penamaan layer berantakan (Frame 123, Rectangle 5).
- ⚠Membuat variant terpisah-pisah tanpa properti yang konsisten.
Designer Mahal Berpikir Begini
Coba Latihan
- Buat button dengan 4 state: default, hover, pressed, disabled.
- Buat input field dengan state: default, focused, error, success.
- Susun ulang sebuah card memakai Auto Layout penuh.
Checklist Lesson
Uji Pemahaman
Apa keuntungan utama Auto Layout?
Styles, Variables & Design Tokens: Pondasi Sistem
26 menit
Tujuan Lesson
Dari nilai mentah ke token
Token adalah nama untuk sebuah keputusan desain. Alih-alih menulis #3461FF di banyak tempat, kamu membuat token 'color/primary'. Saat brand berubah, kamu cukup ubah satu token dan seluruh desain ikut berubah.
Styles vs Variables
Styles cocok untuk tipografi dan efek. Variables (color, number, string, boolean) lebih fleksibel dan mendukung mode seperti light/dark. Variables menjadi dasar design token modern di Figma.
Naming convention token
Gunakan struktur kategori/peran/varian, contoh:
- color/text/primary, color/text/muted
- color/bg/surface, color/brand/500
- space/4, space/8, space/16
- radius/sm, radius/md, radius/lg
Dev Mode & file organization
Dev Mode memberi developer ukuran, warna token, dan spec siap pakai. Susun file dengan halaman terpisah: Cover, Foundations, Components, Flows. Struktur rapi menghemat waktu seluruh tim.
Contoh Baik
Seluruh warna memakai token. Mengubah brand dari biru ke ungu cukup mengganti color/brand/500 dan semua komponen ikut berubah konsisten.
✕ Contoh Buruk
Warna hex ditulis manual di setiap komponen. Saat brand berubah, designer harus mengganti puluhan tempat dan beberapa terlewat.
Kesalahan Umum Pemula
- ⚠Tidak memakai token, menempel hex di mana-mana.
- ⚠Penamaan token tidak konsisten.
- ⚠Mencampur foundations dan komponen di satu halaman berantakan.
- ⚠Tidak memanfaatkan Dev Mode untuk handoff.
Designer Mahal Berpikir Begini
Coba Latihan
- Buat mini design system: color, typography, spacing token.
- Konversi satu desain lama agar memakai token sepenuhnya.
- Buat prototype onboarding 5 screen dengan komponen ber-token.
Checklist Lesson
Uji Pemahaman
Apa itu design token?
Project Modul
Starter Design System di Figma
Bangun file Figma terstruktur berisi foundations (token), komponen inti dengan variants, dan satu prototype onboarding 5 layar.
Deliverables:
- Halaman Foundations berisi token.
- Button & Input dengan seluruh state sebagai variants.
- Prototype onboarding 5 layar yang bisa diklik.
- File rapi siap Dev Mode.