DEV Community

Cover image for ProjekHarusJadi — Hari 2: Merakit UI Kit di Figma
zidanpahrudin_
zidanpahrudin_

Posted on

ProjekHarusJadi — Hari 2: Merakit UI Kit di Figma

Hari ini adalah HARI KEDUAA DARI SEKIAN HARI YANG TERLEWAT HAHAHAA perjalanan membuat CRM untuk target startup dan UMKM, yang akan hadir dalam bentuk responsive web (desktop & mobile). Setelah kemarin fokus inisiasi dan moodboard, hari ini aku masuk ke tahap UI Kit — pondasi visual yang akan dipakai di seluruh desain.

Kenapa UI Kit penting?
Karena UI Kit itu semacam “peralatan dapur” kita. Sebelum masak, kita siapin bumbu dasar dulu. Kalau sudah siap, nanti semua masakan (baca: halaman web) akan punya rasa yang konsisten.


🎯 Fokus Belajar Hari Ini

  • Typography — memilih font utama dan pendukung
  • Color Styles — menentukan palet warna utama
  • Buttons — membuat gaya tombol yang konsisten
  • Form Inputs — menyiapkan gaya input form
  • Auto Layout & Component di Figma — supaya desain fleksibel dan mudah diatur

1️⃣ Typography — Maksimal Tiga Font Saja

Aku memutuskan untuk memakai dua font utama:

  • Noto Sans Javaneseprimary font, tegas tapi ramah, cocok untuk heading
  • Work Sanssecondary font, simpel dan nyaman dibaca untuk body text

Kenapa cuma dua?
Menurut prinsip desain, terlalu banyak font akan membuat pengguna bingung dan menciptakan kesan desain tidak konsisten. Banyak panduan profesional menyarankan maksimal tiga font dalam satu desain—termasuk font di logo—untuk menjaga keterbacaan dan keselarasan visual (UX Planet, UX StackExchange).

🎓 Tips: Kalau ingin variasi, gunakan berat font (font-weight) yang berbeda, bukan ganti font-nya.


2️⃣ Color Styles — Satu Rasa, Bukan Satu Warna

Untuk palet warna, aku ingin harmonis dan “satu rasa”, supaya antarmuka nyaman dilihat dan tidak melelahkan mata.

  • Primary: Biru (#1B4CD3) → warna utama, untuk aksi penting
  • Secondary: Hijau (#7ECB93) → penunjang, memberi aksen segar
  • Danger: Merah (#EA3838) → khusus peringatan atau aksi destruktif
  • Neutral: Putih (#F4F6FA) & Hitam (#22262B) → dasar dan teks

Menurut teori Color Harmony, warna yang selaras membuat desain tampak seimbang dan profesional (Interaction Design Foundation, CareerFoundry).
Desainer juga sering membatasi palet menjadi ±5 warna utama agar mudah dikelola dan tetap rapi (GraphicDesign.SE).


3️⃣ Buttons & Form Inputs — Komponen Seragam

Di UI Kit ini, aku membuat:

  • Tombol Primary (aksi utama), Secondary, dan Danger
  • Variasi tombol dengan warna netral (putih, hitam)
  • Form Inputs untuk normal state, focus state, dan error state

Kenapa dibuat dari awal?
Supaya nanti setiap tombol & input di seluruh halaman terlihat seragam, tanpa harus mendesain ulang dari nol.


4️⃣ Auto Layout & Component di Figma

Hari ini aku juga belajar (dan langsung praktik) fitur Auto Layout di Figma.
Manfaatnya:

  • Elemen otomatis menyesuaikan ukuran ketika teks berubah
  • Spacing antar elemen konsisten tanpa hitung manual
  • Perubahan di satu component akan otomatis update di semua instance

🎓 Tips: Biasakan membuat semua tombol, card, dan form sebagai component sejak awal. Ini akan menghemat waktu luar biasa saat revisi.


📸 Screenshot UI Kit Hari Ini


📝 Insight Hari Ini

  1. Font maksimal tiga jenis → lebih dari itu, visual jadi tidak fokus
  2. Palet warna terbatas → lebih terkontrol, harmonis, dan nyaman dilihat
  3. Komponen seragam → membuat pengalaman pengguna lebih konsisten
  4. Auto Layout & Component → kunci desain yang scalable di Figma

Top comments (0)