Design System untuk AI: 10 Strategi Efektif Membuat Figma Lebih Rapi

Design system untuk AI bukan lagi topik yang terlalu jauh. Sekarang, AI mulai bisa membaca component, token, props, state, bahkan struktur file Figma. Jadi pertanyaannya bukan lagi “AI bisa bikin UI atau tidak?”, tapi “apakah design system kita cukup jelas untuk dibaca AI?”

Dulu, design system sering kita anggap sebagai dokumentasi untuk designer dan developer. Isinya component, guideline, warna, typography, spacing, dan aturan penggunaan. Namun sekarang, design system mulai punya peran baru: menjadi bahasa yang bisa dibaca oleh AI agent.

Kalau struktur design system kamu rapi, AI bisa membantu lebih akurat. Tapi kalau Figma kamu masih penuh dengan Frame 123, Button final v2, atau warna yang langsung ditempel manual, AI akan menebak-nebak.

Dan kalau AI menebak, hasilnya sering kelihatan: cepat jadi, tapi generic.

Artikel ini bersumber dari webinar antara chromatic tim dan juga Brad frorst, Webinar tersebut bisa dibilang cukup intens dan saya melihat nya 1jam lebih untuk tahu apa yang mereka bicarakan dan cukup menarik apa yang di bahas disana. Jika kamu ingin melihat bisa di lihat di video ini :

Kenapa Topik Ini Penting untuk Designer?

AI agent sekarang mulai bergerak dari sekadar “generate desain dari prompt” menjadi “mengerjakan task berdasarkan context”.

Contohnya, AI bisa diminta:

“Make a customer testimonials component”

Kalau design system-nya sudah jelas, AI bisa mencari component yang sudah ada, misalnya Star Rating, Avatar, Typography, Button, lalu menyusunnya menjadi component baru.

Jadi AI tidak benar-benar membuat dari nol. AI merakit dari sistem yang sudah tersedia.

Ini penting banget untuk UI/UX designer, karena artinya kualitas output AI sangat tergantung dari kualitas sistem yang kita buat.

Kalau component kita jelas, token jelas, state lengkap, dan naming konsisten, AI punya bahan yang bagus. Namun kalau sistemnya berantakan, AI hanya punya potongan informasi yang tidak jelas.

Takeaway-nya sederhana:

AI hanya bisa bekerja sebaik context yang kita berikan.

1. Figma Tidak Mati, Tapi Cara Kerja Designer Akan Berubah

Ada banyak opini bahwa AI akan menggantikan Figma atau bahkan designer. Menurut saya, ini terlalu simplifikasi.

Figma tidak mati. Designer juga tidak otomatis hilang, Justru Figma baru saja menambahkan fitur baru di Figma Config 2026.

Yang berubah adalah cara kerja kita di dalam Figma.

Dulu, banyak designer fokus membuat full-page mockup. Kita bikin homepage, dashboard, settings page, checkout page, dan lain-lain. Itu masih penting, karena mockup membantu kita berpikir secara visual.

Namun di era AI, hasil akhir dari proses desain tidak cukup hanya “halaman yang terlihat bagus”.

Kita perlu memecah halaman itu menjadi sistem:

• component
• variant
• state
• design token
• auto layout
• naming convention
• documentation
• usage guideline

Dengan kata lain, designer perlu berpikir bukan hanya sebagai pembuat tampilan, tapi juga sebagai pembuat sistem.

Halaman tetap penting sebagai tempat eksplorasi. Tapi component dan token adalah bagian yang akan sering dipakai ulang oleh manusia, developer, dan AI.

2. Design System Untuk AI Sekarang Menjadi Bahasa AI

Dulu, design system biasanya dibuat agar designer dan developer punya acuan yang sama.

Misalnya:

• warna primary
• typography scale
• spacing
• button style
• form input
• card layout
• modal behavior

Sekarang, design system juga mulai dibaca oleh AI agent.

Artinya, hal-hal yang dulu terasa kecil mulai menjadi sangat penting. Contohnya:

• nama component
• nama layer
• nama variant
• nama property
• deskripsi component
• struktur page di Figma
• token yang digunakan

AI tidak melihat desain seperti manusia. AI membaca struktur, nama, relasi, dan metadata.

Kalau component kamu bernama Button Primary, itu masih oke. Tapi kalau namanya Button new final, Button 2, atau CTA fix latest, AI akan kesulitan memahami maksudnya.

Contoh naming yang kurang jelas:

Frame 247
Rectangle 3
Button Final New
Card Copy 4

Contoh naming yang lebih baik:

ProductCard
CTAButton
CardContainer
ProductImage
ReviewText

Nama yang jelas membantu AI memahami fungsi elemen tersebut.

Ini bukan berarti semua layer harus terlalu formal. Tapi untuk elemen yang penting secara struktur, nama harus punya arti.

Sederhananya:

Kalau manusia saja bingung membaca file Figma kamu, AI kemungkinan besar juga akan bingung.

3. Design Tokens Tidak Cukup Kalau Hanya Berisi Warna

Banyak designer sudah mulai menggunakan Figma Variables atau design tokens. Ini bagus. Tapi sering kali token hanya berhenti di warna mentah.

Contoh:

blue/500 = #3B82F6
gray/100 = #F5F5F5
orange/500 = #f97316

Ini disebut primitive token. Primitive token adalah nilai dasar seperti warna, spacing, radius, font size, dan shadow.

Primitive token penting, tapi belum cukup.

Yang lebih penting untuk design system untuk AI adalah semantic token.

Contoh semantic token:

color/interactive/default
color/interactive/hover
color/interactive/disabled
color/background/surface
color/text/primary
color/text/secondary

Bedanya apa?

Primitive token menjelaskan “warna apa”.
Semantic token menjelaskan “warna ini dipakai untuk apa”.

AI akan lebih mudah memahami color/interactive/default dibanding hanya orange/500.

Karena orange/500 hanya menjelaskan warna. Tapi color/interactive/default menjelaskan fungsi.

Ini juga membantu ketika brand berubah. Misalnya suatu hari warna primary berubah dari orange ke biru. Kalau semua component memakai semantic token, kita tidak perlu mengganti semua component satu per satu.

Dengan adanya design tokens, hal itu jauh lebih mudah dan sederhana jika di lakukan dengan benar dalam mementakan design tokens khususnya di warna dan juga typography. karena itu ada element terkecil yang sering sekali designer abaikan pada saat memulai pengerjaan sebuah design.

4. Component Property Harus Selaras dengan Props di Code

Ini bagian yang sering terlihat kecil, tapi sebenarnya sangat penting.

Di Figma, kita sering membuat component property seperti:

Style: Filled / Outlined
Size: Small / Medium / Large
State: Default / Disabled

Sementara di code, developer mungkin memakai props seperti:

variant: primary / secondary
size: sm / md / lg
disabled: true / false

Masalahnya muncul ketika Figma dan code memakai bahasa yang berbeda.

Kalau Figma menyebutnya Style, tapi code menyebutnya variant, mapping jadi tidak rapi. AI juga bisa bingung, karena tidak tahu apakah keduanya punya maksud yang sama.

Idealnya, designer dan developer sepakat dari awal.

Contoh yang lebih konsisten:

Button
variant: primary / secondary / ghost / danger
size: small / medium / large
state: default / hover / focus / disabled / loading

Dengan struktur seperti ini, component lebih mudah dibaca oleh:

• designer
• developer
• dokumentasi
• Storybook
• Code Connect
• AI agent

Ini juga mengurangi miskomunikasi saat handoff.

Karena itu, menurut saya designer tidak harus menjadi developer. Tapi designer perlu paham sedikit cara developer memberi nama props dan component.

Bukan untuk menulis code. Tapi agar design system kita bisa nyambung ke codebase.

Takeaway-nya:

Nama component bukan cuma urusan rapi-rapian. Itu bagian dari komunikasi antara design, code, dan AI.

5. Semua State Component Harus Didesain

Salah satu kesalahan umum dalam design system adalah hanya membuat state default.

Misalnya button hanya punya satu tampilan:

Primary Button - Default

Padahal dalam produk nyata, button punya banyak kondisi:

• default
• hover
• focus
• active
• disabled
• loading

Form input juga punya banyak kondisi:

• default
• filled
• focus
• error
• disabled
• success
• helper text
• empty state

Kalau state ini tidak dibuat di Figma, AI akan menganggap state itu tidak ada.

AI tidak otomatis tahu bahwa button butuh loading state. AI juga tidak otomatis tahu seperti apa error state di brand kamu.

Jadi, kalau kita ingin AI membantu membuat UI yang konsisten, kita harus memberikan state yang lengkap.

Namun, ini tidak berarti kamu harus langsung membuat ratusan variant.

Mulai dari component yang paling sering dipakai:

• Button
• Input
• Select
• Checkbox
• Card
• Modal
• Toast
• Table row

Rapikan satu per satu.

Lebih baik punya 10 component yang rapi dan dipakai tim, daripada punya 100 component tapi berantakan dan tidak dipercaya.

6. Auto Layout Bukan Cuma Biar Figma Terlihat Rapi, tapi Design System untuk AI

Auto layout sering dianggap sebagai fitur untuk membuat desain lebih rapi dan responsive. Itu benar. Tapi sekarang, auto layout punya peran yang lebih besar.

Auto layout membantu AI memahami struktur layout.

Frame dengan auto layout dan spacing token bisa dibaca sebagai sistem. Sedangkan frame manual dengan posisi acak lebih mirip gambar statis.

Contoh sederhana:

CardContainer
- Auto layout vertical
- Padding: space/4
- Gap: space/3
- Radius: radius/md

Struktur seperti ini memberi informasi yang jelas. AI bisa memahami bahwa card punya susunan vertikal, padding tertentu, dan jarak antar elemen.

Bandingkan dengan frame manual yang semua elemennya digeser pakai mouse. Secara visual mungkin terlihat sama. Tapi secara struktur, itu kurang jelas.

Jadi kalau kamu masih sering membuat UI dengan posisi manual, mungkin sekarang saatnya mulai lebih disiplin.

Bukan karena harus terlihat “pro”. Tapi karena struktur itu akan menjadi context untuk AI, developer, dan sistem design kamu sendiri.

Takeaway-nya:

UI yang rapi secara visual belum tentu rapi secara struktur.

7. Slots Membuat Component Lebih Fleksibel Tanpa Harus Detach

Salah satu masalah besar di Figma adalah detach component.

Kadang component tidak cukup fleksibel, jadi designer memilih detach. Dalam jangka pendek, ini terasa cepat. Tapi dalam jangka panjang, ini bikin design system susah dirawat.

Ketika component di-detach, hubungan dengan master component hilang. Update dari design system tidak lagi masuk. AI juga lebih sulit memahami struktur component tersebut.

Fitur seperti slots membantu mengurangi masalah ini.

Slots bisa dianggap sebagai area kosong di dalam component yang bisa diganti isinya. Misalnya dalam card:

ReviewCard
- Avatar slot
- Rating slot
- Body content slot
- Footer action slot

Dengan slots, designer bisa tetap fleksibel tanpa merusak struktur component.

Untuk AI, ini juga lebih jelas. AI bisa tahu bagian mana yang berisi avatar, rating, text, atau action.

Jadi component tidak hanya reusable, tapi juga readable.

8. DESIGN.md Bisa Menjadi Jembatan antara Design System dan AI

Di bagian ini, saya ingin menarik konteksnya ke workflow yang lebih dekat dengan AI.

Kalau design system di Figma adalah sumber visual, maka DESIGN.md bisa menjadi dokumen context yang menjelaskan aturan desain dalam bentuk teks.

DESIGN.md bisa berisi:

• prinsip visual
• tone UI
• aturan warna
• typography
• spacing
• component usage
• pattern
• do and don’t
• accessibility rules
• contoh prompt untuk AI

Kenapa ini penting?

Karena banyak AI coding tool bekerja lebih baik ketika diberi instruksi yang jelas dalam bentuk markdown.

Figma memberi struktur visual.
Design tokens memberi nilai dan aturan.
DESIGN.md memberi penjelasan dan intent.

Jika digabung, AI tidak hanya tahu “component apa yang tersedia”, tapi juga “bagaimana component itu seharusnya digunakan”.

Contoh sederhana:

## Button Usage

Use Primary Button only for the main action on a screen.
Use Secondary Button for supporting actions.
Never use more than one Primary Button in the same section unless the layout needs comparison.
Disabled state must keep readable text contrast.

Instruksi seperti ini membantu AI mengambil keputusan yang lebih aman. Bukan berarti AI akan selalu benar. Tapi setidaknya, AI punya pagar yang lebih jelas. Untuk lebih jelaskan saya sudah pernah membahas berkaitan tentang DESIGN.md disini

9. AI Cepat, Tapi Belum Tentu Punya Taste

Ini bagian yang menurut saya paling penting.

AI bisa sangat cepat. AI bisa membuat component, layout, bahkan code dalam waktu singkat. Tapi AI belum tentu tahu apakah desainnya terasa pas.

AI belum tentu bisa menilai:

• apakah spacing terasa nyaman
• apakah shadow terlalu berat
• apakah warna terasa sesuai brand
• apakah hierarchy cukup jelas
• apakah UI terasa premium atau terlalu template
• apakah desain punya karakter

AI bisa mengikuti aturan. Tapi AI belum tentu punya taste.

Di sinilah peran designer tetap penting.

Designer bukan hanya orang yang membuat frame di Figma. Designer adalah orang yang memutuskan arah, rasa, prioritas, dan kualitas visual.

Kalau kita hanya mengejar sistem yang mudah dirakit, hasilnya bisa jadi terlalu generic. Rapi, tapi tidak punya karakter.

Dan menurut saya, ini salah satu risiko terbesar dari AI dalam desain.

Bukan AI menggantikan designer secara langsung. Tapi designer terlalu sibuk membuat sistem yang efisien, sampai lupa membuat desain yang punya jiwa.

Jadi, design system untuk AI harus tetap dimulai dari proses desain yang matang.

Kita tetap perlu eksplorasi.
Kita tetap perlu melihat halaman secara utuh.
Kita tetap perlu mencoba beberapa arah visual.
Kita tetap perlu bertanya: “Apakah ini terasa benar?”

AI bisa membantu merakit. Tapi designer tetap harus mengarahkan.

10. Mulai dari Mana, Design System untuk AI?

Kalau design system kamu sekarang belum rapi, tidak perlu panik.

Jangan langsung berpikir harus rebuild semua dari awal.

Mulai dari component yang paling sering dipakai.

Misalnya Button.

Rapikan:

• nama component
• variant
• state
• token warna
• token spacing
• auto layout
• description
• usage guideline

Setelah itu lanjut ke Input. Lalu Card. Lalu Modal.

Pelan-pelan tidak masalah.

Yang penting sistemnya makin jelas dan makin bisa dipakai.

Checklist sederhana:

✅ Component punya nama yang jelas
✅ Variant memakai nama yang konsisten
✅ State penting sudah tersedia
✅ Warna memakai semantic token
✅ Spacing memakai token
✅ Auto layout digunakan dengan benar
✅ Layer penting punya nama yang jelas
✅ Component punya deskripsi singkat
✅ Usage guideline ditulis
✅ Developer dan designer sepakat soal naming

Kalau checklist ini mulai kamu terapkan, design system kamu akan lebih siap untuk workflow AI.

Bukan hanya untuk hari ini, tapi juga untuk cara kerja product design ke depan.

Kesimpulan

So, kesimpulanya adalah Design system untuk AI bukan berarti designer harus berubah menjadi developer. Bukan juga berarti semua designer harus langsung belajar code secara dalam.

Namun kita perlu lebih sadar bahwa struktur design system sekarang punya dampak yang lebih besar.

Component yang kita buat, token yang kita susun, state yang kita siapkan, dan nama yang kita pilih bisa menjadi context untuk AI.

Kalau context-nya jelas, AI bisa membantu lebih baik.
Kalau context-nya berantakan, AI akan ikut berantakan.

Jadi, menurut saya, masa depan designer bukan hanya soal siapa yang paling cepat membuat UI.

Tapi siapa yang bisa membuat sistem desain yang jelas, reusable, readable, dan tetap punya karakter.

AI bisa merakit.
Tapi designer tetap harus menentukan arah.

Mulai dari satu component dulu. Rapikan. Dokumentasikan. Pakai token. Lengkapi state. Setelah itu lanjut ke component berikutnya.

Tidak harus sempurna dari awal.

Yang penting, design system kamu mulai lebih siap dibaca oleh manusia, developer, dan AI.