Gubuku –

Kalau lo seorang UI/UX designer, pasti pernah ngerasa momen-momen horor ini: desain udah dibikin super estetik di Figma, eh pas jadi aplikasi atau website, tampilannya beda jauh! Font-nya ngaco, margin-nya kejauhan, dan warnanya gak match.

Ujung-ujungnya? Terjadilah perang dingin antara tim desainer dan tim developer/engineer.

Nah, “jembatan” utama buat ngehindarin drama ini adalah Design System. Tapi ingat, design system yang bagus itu bukan cuma rapi di mata desainer, tapi juga harus ramah dan gampang dipakai sama tim developer.

Biar kolaborasi lo sama tim engineering makin mulus dan gak saling pusing, yuk intip cara menyusun design system yang developer-friendly di bawah ini!

1. Libatkan Developer Sejak Hari Pertama (Jangan Asal Oper!)

Kesalahan paling fatal yang sering dilakukan desainer adalah bikin design system sendirian sampai selesai, baru dikasih ke developer. Big no, bestie!

Ajak lead engineer atau developer lo buat diskusi dari awal. Tanyain ke mereka:

• Komponen apa aja yang sering dipake berulang-ulang?

• Framework apa yang mereka pake di front-end (React, Vue, Tailwind, atau Flutter)?

• Batas teknis apa yang perlu diperhatikan?

Dengan ngobrol dari awal, lo gak bakal bikin komponen ajaib yang makan waktu berbulan-bulan cuma buat dicoding.

2. Gunakan Design Tokens (Bahasanya Desainer & Developer)

Design tokens itu ibarat kamus penerjemah antara variabel desain dan variabel kodingan. Daripada ngasih kode warna acak kayak #FF5733, lebih baik lo kasih nama variabel yang jelas.

• Nama Warna Desain: #FF5733

• Design Token: color-primary-main atau button-bg-danger

Saat lo panggil nama variabel yang sama di Figma dan di repositori kodingan (CSS/JSON), developer tinggal panggil token tersebut. Kalau ada perubahan warna di masa depan, lo tinggal ubah satu token dan semuanya bakal auto-update!

3. Tata Komponen Sesuai Konsep “Atomic Design”

Biar design system lo gak berantakan kayak kamar belum diberesin, susun komponen pakai struktur Atomic Design:

• Atoms: Elemen paling kecil (tombol, input field, ikon, warna, font).

• Molecules: Gabungan beberapa atom (misal: search bar yang terdiri dari input field + tombol + ikon).

• Organisms: Gabungan molekul yang membentuk bagian UI utuh (misal: Header atau Navbar).

Struktur ini bikin developer gampang memahami logika pembuatan komponen secara modular di kodingan mereka.

4. Tentukan Auto Layout dan Responsive Constraint yang Jelas

Developer paling benci kalau dikasih desain yang pas ditarik layarnya langsung berantakan.

Di Figma, pastikan lo udah paham dan pake fitur Auto Layout, Padding, dan Resizing Constraint (Hug, Fill, Fixed) dengan benar. Jadi pas developer buka file Figma lo, mereka bisa langsung tahu gimana perilaku komponen itu pas dibuka di HP, tablet, atau monitor laptop.

5. Tulis Dokumentasi yang Singkat, Padat, dan Jelas

Gak perlu bikin dokumen setebal skripsi. Bikin dokumentasi komponen yang to the point langsung di Figma atau pake platform kayak Zeroheight atau Storybook.

Sertakan poin-poin penting ini di tiap komponen:

• Anatomy: Bagian-bagian dari komponen tersebut.

• States: Tampilan komponen saat kondisi Default, Hover, Active, Disabled, atau Error.

• Usage Guidelines: Kapan komponen ini harus dipakai dan kapan gak boleh dipakai (Do’s & Don’ts).

6. Sediakan Sandbox / Playground (Storybook Integration)

Biar tim engineer makin cinta sama lo, cobalah sync design system lo dengan Storybook.

Storybook itu lingkungan isolasi tempat developer bisa ngeliat, ngetes, dan mainin komponen kodingan secara langsung tanpa perlu jalanin seluruh aplikasi. Kalau komponen di Figma dan di Storybook udah sama persis, workflow tim lo dijamin bakal melaju kencang kayak kereta cepat!

Ringkasan: Checklist Design System yang Ramah Developer

Biar gak ada yang kelewatan, pake checklist ringkas ini sebelum launching design system lo:

Aspek	Ceklis	Manfaat Buat Developer
Naming Convention	Konsisten antara Figma & Kode	Gak bingung nyari nama elemen
States Komponen	Lengkap (hover, pressed, disabled)	Gak perlu nanya-nanya lagi pas koding
Design Tokens	Terintegrasi	Gampang maintenance warna & ukuran
Grid & Spacing	Pake kelipatan tetap (misal: 4pt / 8pt grid)	Layouting kodingan presisi & rapi

penulis : diah smkn 8 bungo