Layar aplikasi, sekompleks apa pun, tersusun dari bahan yang sama: wadah, bentuk, dan teks. Di Figma, wadah itu adalah Frame, Group, dan Section. Bentuk dibuat dengan alat shape dan pen. Teks diatur dengan tipografi. Bab ini membahas ketiganya, karena kesalahan di tahap ini, misalnya memilih wadah yang salah, akan terasa sakitnya nanti saat kamu mulai memakai Auto Layout dan komponen.

Ketiganya sama-sama membungkus objek lain, tetapi perilakunya sangat berbeda.

Analogi dengan HTML

Kalau kamu sudah mengenal HTML dan CSS, Frame paling mirip dengan sebuah div yang punya ukuran, latar, dan overflow: hidden. Group lebih mirip pengelompokan sementara tanpa gaya apa pun. Section mirip folder atau label di canvas untuk merapikan pekerjaan, bukan bagian dari tampilan aplikasi.

<!-- Frame: wadah yang punya gaya dan layout sendiri -->
<div class="kartu">
  <h3>Judul</h3>
  <p>Isi kartu</p>
</div>

.kartu {
  width: 320px;
  background: #ffffff;
  overflow: hidden; /* serupa clip content */
}

Kesalahan paling umum

Kesalahan pemula yang paling sering adalah memakai Group untuk semuanya. Group memang cepat dibuat (Ctrl + G), tetapi tidak mendukung Auto Layout dan constraints. Begitu kamu ingin tombol tetap menempel di kanan saat layar melebar, atau ingin isi kartu tersusun otomatis, Group tidak bisa membantu. Biasakan memakai Frame untuk elemen UI. Simpan Group untuk hal sederhana seperti beberapa bentuk yang membentuk sebuah ikon.

Section juga sering disalahgunakan sebagai wadah tombol atau kartu. Ingat, Section bukan elemen UI. Pakai Section untuk menandai area seperti "Alur Login" atau status "Ready for dev" agar developer tahu layar mana yang sudah siap dikerjakan.

Bentuk dasar

Figma menyediakan rectangle, ellipse, polygon, star, line, dan arrow. Sebagian besar elemen antarmuka, seperti kartu, tombol, avatar, dan pemisah, bisa dibuat dari bentuk dasar ini.

Pen tool dan vector networks

Untuk bentuk yang lebih bebas, pakai pen tool (P). Klik untuk membuat titik anchor dengan garis lurus, dan klik sambil seret untuk membuat kurva Bezier. Tekan Enter pada sebuah vektor untuk masuk ke mode edit vektor.

Figma memakai konsep vector networks: satu titik bisa terhubung ke banyak garis sekaligus. Di banyak alat lain, sebuah path hanya bisa berupa satu rantai titik. Dengan vector networks, kamu bisa membuat bentuk bercabang, misalnya huruf Y, tanpa harus menumpuk beberapa path.

Jika kamu ingin beberapa bentuk menjadi satu vektor utuh, pilih semuanya lalu tekan Ctrl + E untuk Flatten.

Operasi boolean

Operasi boolean menggabungkan dua bentuk atau lebih dengan aturan tertentu.

Contoh kerja: kamu ingin membuat ikon bulan sabit. Gambar lingkaran besar, lalu gambar lingkaran kedua yang sedikit bergeser di atasnya. Pilih keduanya dan pakai Subtract. Lingkaran atas memotong lingkaran bawah sehingga tersisa bentuk sabit. Coba keempat operasi pada dua lingkaran yang sama untuk melihat perbedaannya, karena cara ini paling cepat untuk memahami boolean.

Perhatikan urutan layer saat memakai Subtract: bentuk yang berada di atas menjadi pemotong. Kalau hasilnya terbalik, ubah urutan layer lalu ulangi.

Teks adalah bagian terbesar dari kebanyakan antarmuka, jadi tipografi yang konsisten sangat berpengaruh pada kesan profesional.

Skala tipografi

Skala tipografi adalah kumpulan ukuran teks yang dipakai berulang. Contoh skala sederhana:

Dengan skala yang tetap, kamu tidak lagi memilih ukuran secara acak seperti 17, 19, atau 23 di layar yang berbeda.

Fitur teks yang penting

• Text styles: simpan font, ukuran, dan line height agar konsisten. Saat style diubah, semua teks yang memakainya ikut berubah.
• Auto width, auto height, fixed: mengatur perilaku kotak teks saat isinya berubah. Auto width melebar mengikuti teks, auto height tingginya bertambah saat teks membungkus ke baris baru, fixed ukurannya tetap.
• Line height dan spacing: line height 120 sampai 150% membuat teks lebih mudah dibaca.
• Google Fonts bawaan: ribuan font siap pakai, ditambah font lokal di komputermu.

Padanan di CSS

Text style di Figma sangat dekat dengan class CSS. Satu text style, satu class.

.heading {
  font-size: 24px;
  line-height: 1.3; /* 130% */
}

.body {
  font-size: 16px;
  line-height: 1.5; /* 150% */
}

Developer yang menerima file dengan text style rapi cukup membuat empat class seperti ini. Tanpa text style, developer harus memeriksa setiap teks satu per satu.

• Memakai Group untuk tombol dan kartu, lalu kesulitan saat menambahkan Auto Layout.
• Memakai Section sebagai bagian dari tampilan aplikasi.
• Mengatur ukuran teks satu per satu tanpa text style, sehingga ukuran tidak konsisten.
• Line height terlalu rapat untuk paragraf panjang, sehingga teks sulit dibaca.