Coba hitung berapa kali warna ungu #7C5CFF muncul di sebuah aplikasi: di tombol, tautan, ikon aktif, garis fokus input, dan banyak lagi. Kalau suatu hari brand berganti warna, kamu harus mencari dan mengganti semuanya. Lebih buruk lagi, kalau aplikasimu perlu mode gelap, setiap warna harus punya pasangan yang berbeda.

Solusinya adalah memberi nama pada nilai desain lalu memakai nama itu, bukan nilai mentahnya. Nilai desain yang diberi nama ini disebut design tokens. Di Figma, ada dua alat untuk ini: styles dan variables.

Styles menyimpan satu set nilai visual yang bisa dipakai ulang. Jenisnya:

• Color: warna atau gradient.
• Text: font, ukuran, line height, dan pengaturan teks lain.
• Effect: bayangan dan blur.
• Layout grid: pengaturan kolom dan baris.

Satu style menyimpan satu set nilai, sehingga styles ideal untuk tipografi dan bayangan. Text style "Heading", misalnya, menyimpan font, ukuran 24, dan line height sekaligus. Effect style "Bayangan kartu" menyimpan warna, jarak, dan blur bayangan dalam satu nama.

Variables menyimpan satu nilai per mode, dan bisa dipakai di banyak properti. Tipe variables ada empat:

Kekuatan utama variables ada pada modes. Satu variable bisa punya nilai berbeda untuk setiap mode, misalnya Light dan Dark, beberapa bahasa, atau beberapa brand. Variables juga bisa dipakai dalam logika prototipe, yang akan kamu temui di bab prototyping.

Contoh: satu nama, nilai berbeda per mode

Deck memakai dua variable sebagai contoh: bg/surface dan text/primary.

Semua layer di layar memakai variable, bukan warna langsung. Saat kamu mengganti mode frame dari Light ke Dark, semua warna yang terikat variable ikut berubah. Tidak ada satu pun warna yang perlu diedit manual.

Kapan memakai styles, kapan variables

Aturan praktisnya: kalau nilainya perlu berubah per mode, pakai variable. Kalau yang disimpan adalah gabungan beberapa nilai, pakai style.

Variables di Figma punya padanan yang sangat dekat di CSS, yaitu custom properties. Nama variable menjadi nama properti yang diawali dua tanda minus, dan mode menjadi selector yang mengganti nilainya.

:root {
  --bg-surface: #ffffff;
  --text-primary: #1a1a1a;
  --radius: 12px;
}

[data-mode="dark"] {
  --bg-surface: #1a1a1a;
  --text-primary: #ffffff;
}

.kartu {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-radius: var(--radius);
}

<section class="kartu">Mode terang</section>
<section data-mode="dark">
  <div class="kartu">Mode gelap</div>
</section>

Perhatikan bahwa .kartu hanya ditulis sekali. Kartu di dalam data-mode="dark" otomatis memakai nilai gelap karena custom properties diwariskan ke elemen di dalamnya. Ini persis seperti mengganti mode pada sebuah frame di Figma: semua layer di dalam frame itu ikut berganti.

Garis miring di nama Figma seperti bg/surface biasanya diubah menjadi tanda minus di CSS, --bg-surface, karena garis miring tidak umum dipakai di nama custom property. Yang penting, nama dan strukturnya tetap sama di kedua sisi sehingga designer dan developer bisa saling merujuk.

1. Buka panel variables dan buat koleksi bernama "Warna".
2. Tambahkan mode kedua sehingga koleksi punya mode Light dan Dark.
3. Buat variable bg/surface dan text/primary, isi nilainya untuk kedua mode.
4. Pada layar Login, ganti semua fill latar dengan bg/surface dan semua warna teks dengan text/primary.
5. Duplikasi layar, lalu ubah mode frame duplikat menjadi Dark.

Sekarang kamu punya dua versi layar dari satu desain. Kalau besok warna latar terang ingin sedikit lebih hangat, ubah satu nilai di variable dan semua layar ikut berubah.

Hubungan dengan Dev Mode

Saat developer membuka layar di Dev Mode, warna yang terikat variable ditampilkan dengan namanya, bukan hanya kode heksadesimalnya. Developer yang melihat bg/surface langsung tahu harus memakai var(--bg-surface), bukan menyalin #ffffff. Inilah alasan utama design tokens sangat disukai tim: satu nama yang sama berpindah dari file desain ke codebase tanpa diterjemahkan ulang. Kalau tim memutuskan mengganti nilai warna, cukup satu baris di variable Figma dan satu baris di CSS.

• Menempelkan kode warna langsung ke setiap layer. Mode gelap menjadi mustahil dikelola.
• Memberi nama berdasarkan warna, bukan fungsi. Nama seperti ungu-muda membingungkan saat di mode gelap warnanya bukan ungu muda lagi. Nama fungsi seperti bg/surface tetap masuk akal di semua mode.
• Membuat variable untuk tipografi lengkap. Satu variable menyimpan satu nilai, jadi gabungan font, ukuran, dan line height lebih cocok menjadi text style.
• Nama berbeda di Figma dan kode. Kalau designer menyebut bg/surface tetapi developer menulis --latar-1, komunikasi menjadi sulit.