Tanpa skala tipografi dan grid yang eksplisit, desain dan kode akan terus berdebat soal “sedikit lebih besar”. Token yang kecil namun cukup mengunci keputusan tanpa membunuh fleksibilitas.
Artikel ini merangkum cara menyelaraskan Figma dengan implementasi web: mulai dari skala tipe, baseline vertikal, hingga pemetaan ke Tailwind atau CSS variables.
Skala tipe dan ritme vertikal
Pilih 5–7 ukuran dengan peran jelas: display, judul halaman, subjudul, body, keterangan, label form. Pasangkan dengan line-height dan margin vertikal kelipatan basis (misalnya 4px atau 8px) agar ritme antar blok konsisten.
- Hindari ukuran “aneh” satu-of-a-kind — jika perlu, revisi skala daripada menambah pengecualian permanen.
- Gunakan token nama semantik (
text-heading) bukan hanya nilai piksel mentah di komponen. - Uji pada layar sempit: panjang baris dan ukuran tap target sering mengubah keputusan tipografi.
Grid dan implementasi
Samakan kolom grid Figma dengan breakpoint CSS: misalnya 12 kolom desktop, 8 tablet, 4 mobile. Dokumentasikan gutter dan margin halaman sebagai token agar engineer tidak menduga dari screenshot saja.
Setelah fondasi stabil, komponen komposit (kartu, tabel, modal) akan jauh lebih cepat disepakati — karena ruang putih dan hierarki sudah punya bahasa bersama.