Pernah nggak sih kamu ngalamin momen horor kayak gini:
Kamu udah bikin 50 halaman desain aplikasi. Tiba-tiba klien (atau dosen pembimbing) bilang: "Mas, warna birunya kurang 'nendang' ya. Coba ganti jadi agak tua dikit dong semua tombolnya."
Mampus. 💀
Kalau kamu desainnya manual (satu-satu), selamat menikmati lembur semalaman gantiin warna di 50 halaman itu. Tapi kalau kamu pakai Design System, revisi itu cuma butuh waktu 30 detik. Serius.
Yuk, kita belajar cara bikin Design System sederhana di Figma biar kerjaanmu jadi scalable dan anti ribet!
Apa Itu Design System? (Analogi LEGO)
Bayangkan kamu mau bangun istana dari LEGO.
-
Kalau manual: Kamu cetak batanya satu-satu dari tanah liat tiap mau pasang tembok. Lama banget!
-
Kalau pakai Design System: Kamu udah punya kotak berisi bata merah, bata biru, jendela, dan atap yang ukurannya standar. Tinggal comot dan susun.
Di Figma, Design System adalah "kotak LEGO" kamu. Isinya adalah aturan warna, font, dan komponen (tombol, input form) yang bisa dipakai berulang-ulang.
Langkah 1: Tentukan "Style" Dasar (Color & Typography)
Jangan pernah pakai Color Picker manual berulang kali!
-
Color Styles: Tentukan palet warnamu (Primary, Secondary, Neutral/Grey, Error/Red). Masukkan ke menu "Local Styles" di Figma (klik ikon 4 titik di menu kanan).
-
Keuntungan: Pas mau ganti warna brand dari Biru ke Merah, tinggal edit Style-nya, otomatis SEMUA halaman berubah.
-
-
Text Styles: Tentukan ukuran font untuk H1, H2, Body Text, dan Caption. Simpan juga sebagai Style.
Langkah 2: Buat Komponen Dasar (Atomic Design)
Sekarang kita bikin bata LEGO-nya. Mulai dari yang paling kecil: Tombol (Button).
-
Bikin frame, kasih warna background (pakai Color Style tadi), kasih teks (pakai Text Style).
-
Klik kanan -> "Create Component" (atau tekan
Ctrl + Alt + K). -
Sekarang tombol itu jadi Master Component.
-
Kalau mau pakai tombol di halaman lain, tarik dari menu Assets. Itu namanya Instance.
Kuncinya: Kalau kamu ubah Master Component-nya (misal: sudutnya dibikin bulat), semua Instance di seluruh desain bakal ikut berubah otomatis. Magic!
Langkah 3: Gunakan "Variants" Biar Rapi
Satu tombol biasanya punya banyak kondisi: Normal, Hover (pas kursor nempel), Disabled (nggak bisa diklik).
-
Jangan bikin komponen terpisah (Button 1, Button 2, Button 3). Pusing nyarinya!
-
Gunakan fitur Variants. Gabungkan semua kondisi tadi jadi satu grup komponen.
-
Nanti pas makai, kamu tinggal ganti opsinya lewat dropdown di panel kanan. Berasa kayak coding beneran!
Langkah 4: Kumpulkan di Satu Halaman Khusus
Jangan campur komponen master kamu sama halaman desain utama.
-
Buat Page baru di Figma, kasih nama "🧰 Design System" atau "Style Guide".
-
Taruh semua warna, font, dan komponen master di situ.
-
Jadi kalau mau revisi aturan global, kamu tau harus lari ke mana.
Kenapa Mahasiswa/Freelancer Wajib Punya Ini?
-
Konsistensi: Nggak ada lagi kasus ukuran font beda-beda tipis di tiap halaman.
-
Kecepatan: Nggak perlu mikir "Eh kemarin pakai kode warna hex berapa ya?".
-
Disayang Developer: Pas di-handoff ke programmer, mereka seneng banget karena kodenya jadi rapi dan terstruktur. Nilai plus kalau ini proyek tugas akhir!
Kesimpulan
Bikin Design System emang agak capek di awal (mungkin butuh 1-2 jam buat setup). Tapi percaya deh, ini investasi waktu terbaik.
Mending capek 2 jam sekarang, daripada nangis darah pas disuruh revisi warna di H-1 deadline! 🛠️
