Sampai di sini kamu sudah mengenal banyak fitur: frame, Auto Layout, komponen, variables, prototipe, Dev Mode, dan AI. Pertanyaan berikutnya: kapan memakai yang mana? Bab penutup ini menyatukan semuanya dalam alur kerja proyek, kebiasaan yang membuat file terlihat profesional, dan latihan membuat layar Login.

Proyek desain biasanya melewati enam tahap. Setiap tahap punya alat Figma yang paling cocok.

Wireframe adalah sketsa kasar tanpa warna dan detail, fokus pada letak elemen. Membuat wireframe dulu menghemat waktu, karena memindahkan kotak abu-abu jauh lebih murah daripada memindahkan layar yang sudah dipoles.

Yang terpenting, proses ini berulang (iteratif). Masukan dari uji pengguna dan developer dikembalikan ke tahap desain. Karena semua orang bekerja di file yang sama, siklus revisi menjadi jauh lebih cepat. Alur ini bukan tangga yang hanya dinaiki sekali, melainkan putaran yang diulang sampai desain cukup baik.

Contoh penerapan: tim membuat aplikasi kasir. Ide fitur dikumpulkan di FigJam, lalu layar pembayaran dibuat sebagai wireframe. Setelah disetujui, layar dipoles memakai style dan komponen, disambungkan menjadi prototipe, lalu diuji ke beberapa kasir lewat tautan prototipe. Ternyata kasir kesulitan menemukan tombol diskon, jadi desain kembali ke tahap Desain UI sebelum akhirnya ditandai Ready for dev.

Kebiasaan kecil berikut membedakan file pemula dan file profesional.

Kenapa kelipatan 8

Jarak yang dipilih acak, misalnya 13, 17, dan 22, membuat layar terasa sedikit "tidak beres" walaupun orang sulit menjelaskan alasannya. Dengan skala tetap 4, 8, 16, 24, 32, semua jarak saling berkaitan dan ritme visual terasa teratur. Developer juga senang, karena skala ini mudah dijadikan design tokens.

Kenapa 44 × 44

Jari manusia jauh lebih besar dari kursor. Tombol atau ikon yang area sentuhnya lebih kecil dari 44 × 44 px sering meleset saat diketuk. Area sentuh tidak harus sama dengan ukuran ikon yang terlihat. Ikon 24 px bisa dibungkus frame 44 × 44 sehingga tetap terlihat ringan tetapi mudah diketuk.

Di CSS, aturan ini biasanya ditulis sebagai ukuran minimum:

.tombol-ikon {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Sekarang saatnya menyatukan semua yang sudah kamu pelajari. Layar yang dibuat berisi judul "Selamat datang", subjudul "Masuk untuk melanjutkan", input Email, input Kata sandi, tombol Masuk, dan teks "Belum punya akun? Daftar".

Tugasnya:

1. Buat frame ukuran ponsel, misalnya Android Compact 412 × 917.
2. Susun layout dengan Auto Layout vertikal, gap 16.
3. Buat komponen tombol dan input lengkap dengan variants.
4. Terapkan color variables dengan mode Light dan Dark.
5. Hubungkan prototipe Login ke Beranda dengan Smart animate.
6. Bagikan tautan dan kumpulkan masukan lewat komentar.

Durasinya sekitar 90 menit, lalu setiap peserta presentasi 3 menit.

Peta tugas ke bab sebelumnya

Saran urutan kerja: susun dulu layout dengan Auto Layout memakai frame biasa, lalu ubah tombol dan input menjadi komponen setelah bentuknya pas. Terakhir, ganti warna mentah dengan variables agar mode Dark bisa diaktifkan.

Fondasi Figma bisa diringkas menjadi lima hal: Frame, Auto Layout, Komponen, Variables, dan Prototipe. Untuk belajar lebih lanjut, kamu bisa membuka pusat bantuan di help.figma.com, Figma Community di figma.com/community, kanal YouTube resmi Figma, dan rekaman Config di config.figma.com.

• Melompat langsung ke desain berwarna tanpa wireframe.
• Menganggap handoff sebagai akhir, padahal masukan developer bisa membawa desain kembali ke tahap sebelumnya.
• Menaruh semua pekerjaan di satu page tanpa pemisahan WIP dan Final.
• Membuat ikon yang bisa diketuk dengan area sentuh lebih kecil dari 44 × 44 px.