Belajar UI Designer - Figma Mastery

#Pendahuluan

Setelah di episode 5 kita tahu apa yang ingin disusun — grid dan spacing — pada episode ini kita belajar bagaimana mengeksekusinya di Figma dengan benar. Sebagian besar desainer pemula menggambar layer demi layer; UI designer profesional membangun struktur yang hidup: yang bisa diubah ukurannya, diulang, dan disinkronkan.

Mengapa Figma mastery penting? Karena tools menentukan seberapa mahal sebuah iterasi. Dengan Auto layout, mengubah isi kartu tidak merusak jarak sekitarnya. Dengan components, memperbaiki tombol sekali otomatis memperbaiki semua kemunculannya. Alur kerja ini bukan kemewahan — di skala produk nyata, tanpa struktur hidup, perubahan kecil jadi proyek seharian.

#Auto Layout: Struktur yang Hidup

Auto layout (shortcut Shift + A) mengubah frame menjadi container fleksibel yang mengatur jarak anak elemen secara otomatis. Atribut utamanya:

• Direction — horizontal (baris) atau vertical (kolom).
• Gap — jarak antar anak elemen (dari spacing scale episode 5!).
• Padding — ruang dalam container.
• Sizing — Hug (menyesuaikan isi) atau Fill (mengisi induk).

Contoh: tombol Kantongin dibangun sebagai Auto layout horizontal dengan padding, dan saat label berubah, tombol ikut melebar:

[ Auto layout H │ gap 8 │ padding 16/12 ]
  [ikon +] [ Simpan target ]
 
  → saat label jadi "Simpan target sekarang"
    tombol otomatis memanjang tanpa menimpa elemen lain

Prinsip berlapis: frame layar = Auto layout vertical berisi kartu = Auto layout vertical berisi baris = Auto layout horizontal. Seluruh layar menjadi satu sistem, bukan kumpulan koordinat.

#Components dan Variants

Component adalah elemen yang dibuat sekali lalu dipakai berulang (instance). Ketika master-nya diubah, semua instance mengikuti. Inilah mesin konsistensi UI (prinsip repetition episode 2 dieksekusi).

Variants mengelompokkan state atau ukuran satu komponen dalam satu tempat: tombol dengan state default, hover, pressed, disabled. Ini juga yang membuat prototype stateful (episode 12) dan handoff (episode 13) jauh lebih rapi.

Button (component)
├── Variant: Size   → sm / md / lg
└── Variant: State  → default / hover / pressed / disabled

Ketika developer butuh spesifikasi, ia cukup melihat satu komponen dengan semua variannya — bukan mencari lima layer berbeda di lima layar.

#Styles: Warna, Teks, dan Efek

Styles menyimpan nilai berulang di satu tempat: color styles (palette episode 3), text styles (type system episode 4), dan effect styles (shadow). Bedanya dengan komponen: styles hanya membawa nilai, bukan struktur.

Ketika primary berubah dari ungu ke biru, satu edit pada color style primary/500 menyebar ke seluruh file. Tanpa styles, kalian akan mengganti warna secara manual di puluhan layer — rawan terlewat satu.

#Komponen Dasar Figma yang Wajib Dikuasai

• Frame (F) — kanvas berstruktur; berbeda dengan shape biasa.
• Auto layout (Shift + A) — fondasi semua struktur.
• Constraints — menentukan perilaku elemen saat frame diubah ukurannya (kunci ke sisi, skala, atau fill) — bahan dasar responsive (episode 11).
• Grid layout — menampilkan grid kolom episode 5 di atas frame.
• Alignment tools — snap, distribute, dan distance guides untuk menegakkan alignment (episode 2).
• Prototype mode — menghubungkan frame dengan interaksi (dibahas episode 12).

#Prototyping Dasar

Bahkan di episode 6 ini, kalian sudah bisa membuat prototype pertama: pilih frame layar A → tombol Prototype di panel kanan → seret handle dari tombol ke layar B. Interaksi sederhana navigate antar layar sudah cukup untuk menguji alur secara kasar; animasi & detail transisi akan kita dalami di episode 12.

#Praktik: Satu Layar Lengkap

Gunakan semua yang sudah dipelajari untuk mendesain ulang layar beranda Kantongin secara struktural:

1. Frame 390 × 844 dengan grid 4 kolom (episode 5).
2. Header sebagai Auto layout horizontal (sapa + avatar).
3. Kartu saldo: Auto layout vertical, padding 24, gap sesuai skala.
4. Deretan tombol aksi: Auto layout horizontal, dua tombol Fill agar menempati setengah lebar.
5. List transaksi: jadikan baris transaksi sebagai component dengan variants.

Cek terakhir: ubah saldo dari 2.450.000 menjadi 99.000.000 — apakah layout tetap rapi tanpa edit manual? Jika ya, struktur hidup kalian berhasil.

#Common Pitfalls

• Semua memakai koordinat manual — frame tanpa Auto layout; ubah isi = perbaiki jarak sepanjang layar.
• Instance terlepas dari master (Detach instance) tanpa alasan — konsistensi hilang, perubahan tidak menyebar.
• Tidak memakai styles — warna/teks "nembak" di tiap layer; rebranding jadi mimpi buruk.
• Component tanpa variants — state ditaruh terpisah sebagai frame terpisah; handoff jadi berantakan.
• Mengabaikan constraints — frame diubah ukurannya, elemen tidak menyesuaikan.

#Penutup

Pada episode 6 ini, kalian telah menguasai mesin utama Figma: Auto layout, components & variants, dan styles.

Inti yang harus dibawa pulang:

• Auto layout membuat struktur hidup — jarak terjaga otomatis saat isi berubah.
• Components + variants adalah mesin konsistensi dan menyatukan semua state.
• Styles menyimpan nilai (warna/teks/efek) di satu tempat untuk seluruh file.
• Prototype dasar (navigate antar layar) sudah bisa dipakai untuk menguji alur.

Di episode 7 selanjutnya kita akan membahas icons & illustration — icon grid, stroke consistency, dan membangun icon set yang seragam untuk Kantongin. Sampai jumpa di episode 7!