Saat pertama membuka Figma, layar terlihat penuh panel dan ikon. Banyak pemula langsung menggambar, lalu bingung kenapa objeknya hilang, tidak bisa dipilih, atau berada di tempat yang salah. Hampir semua kebingungan itu selesai kalau kamu tahu empat area utama dan apa tugas masing-masing. Setelah itu, shortcut akan membuat kerjamu jauh lebih cepat, terutama saat file berisi puluhan layar.

Antarmuka Figma Design terbagi menjadi empat area.

Di antarmuka terbaru, toolbar mengambang di bagian bawah canvas, bukan di atas seperti versi lama. Jadi kalau kamu mengikuti tutorial lama dan tidak menemukan toolbar di atas, lihat ke bawah.

Cara kerja keempat area bersama-sama

Alurnya biasanya begini: kamu memilih alat di toolbar, menggambar di canvas, melihat objek itu muncul sebagai layer di panel kiri, lalu mengatur ukuran, warna, dan perilakunya di panel kanan. Panel kanan punya dua tab. Tab Design berisi properti visual seperti ukuran, fill, stroke, dan efek. Tab Prototype berisi interaksi, misalnya apa yang terjadi saat tombol diketuk.

Bagi developer, analogi yang membantu adalah DevTools di browser. Panel Layers mirip pohon elemen, panel kanan mirip panel style, dan canvas mirip halaman yang sedang kamu lihat.

Memakai mouse untuk memilih alat itu lambat. Designer berpengalaman hampir selalu memakai shortcut keyboard. Berikut alat utama beserta shortcut-nya.

Di macOS, Ctrl diganti dengan tombol Command dan Alt diganti dengan Option. Aturan ini berlaku untuk semua shortcut di kelas ini.

Cara belajar shortcut yang efektif adalah memakainya satu per satu, bukan menghafal tabel. Misalnya hari ini kamu bertekad tidak mengklik ikon Rectangle sama sekali dan selalu menekan R. Besok tambah T untuk teks, dan seterusnya.

Canvas Figma tidak terbatas, jadi kamu butuh cara cepat untuk bergerak di dalamnya.

Navigasi canvas

Shift + 1 adalah penyelamat saat kamu "tersesat" di canvas dan tidak menemukan desainmu. Tekan, dan semua isi page akan terlihat. Shift + 2 berguna saat kamu ingin fokus memperbaiki satu tombol kecil.

Produktivitas

Kalau kamu lupa sebuah shortcut, tekan Ctrl + K lalu ketik nama perintahnya. Menu Actions ini mirip command palette di editor kode. Daftar lengkap shortcut bisa dibuka dengan Ctrl + Shift + ?.

Contoh alur kerja dengan shortcut

Misalkan kamu ingin membuat tiga kartu yang sama:

1. Tekan F, gambar sebuah frame untuk kartu.
2. Tekan T, klik di dalam kartu, ketik judulnya.
3. Pilih kartu, tekan Shift + A agar isinya tersusun dengan Auto Layout.
4. Tekan Ctrl + D dua kali untuk membuat dua duplikat.
5. Tekan Shift + 2 untuk memperbesar tampilan ke kartu yang terpilih.

Semua dilakukan tanpa mengklik satu ikon pun. Setelah terbiasa, kecepatan kerjamu bisa berlipat.

Figma mengorganisasi pekerjaan dalam enam tingkat, dari yang paling luas ke yang paling kecil.

Contoh nyata untuk aplikasi kasir:

Tim "Aplikasi Kasir"
  Project "Mobile App"
    File "Checkout v2"
      Page "UI Final"
        Frame "Android – Bayar"
          Layer "Tombol Bayar"

Struktur ini mirip folder di komputer atau repositori kode. Tim seperti organisasi di GitHub, project seperti folder, file seperti satu dokumen, dan page seperti tab di dalam dokumen. Struktur yang rapi memudahkan tim mencari file. Bayangkan mencari layar pembayaran di file yang hanya punya satu page berisi seratus frame tanpa nama, dibandingkan membuka page "UI Final" lalu langsung menemukan frame "Android – Bayar".

• Mencari toolbar di atas layar. Di antarmuka terbaru, toolbar mengambang di bawah canvas.
• Tersesat di canvas lalu mengira desain hilang. Tekan Shift + 1 untuk menampilkan semuanya.
• Menaruh semua layar di satu page. Pisahkan pekerjaan ke beberapa page agar file mudah dijelajahi.
• Membiarkan nama default. Frame dan layer bernama otomatis menyulitkan orang lain memahami struktur filemu.