Belajar UI/UX Design - Desain dengan AI: Figma Make & MCP
Mengintegrasikan AI ke workflow desain modern: memahami Figma AI/Make untuk prompt-to-design, variasi, dan audit aksesibilitas, Figma MCP untuk design-to-code, serta batasan AI pada brand dan judgment manusia, dengan praktik workflow riset → wireframe → UI → handoff.
#Pendahuluan
Setelah di episode 22 kita menyiapkan handoff, pada episode ini kita menghadapi perubahan terbesar dalam industri: AI dalam workflow desain. Data 2025-2026 konsisten — 91-93% desainer memakai AI mingguan atau harian. Pertanyaannya bukan "apakah", melainkan "bagaimana memakainya dengan benar".
Mengapa penting? AI menggeser peran desainer dari melakukan tugas manual ke menentukan arah, menilai output, dan memegang judgment. Desainer yang menguasai workflow AI bekerja berkali lipat lebih cepat tanpa kehilangan kualitas — asalkan tahu di mana AI membantu dan di mana ia harus dikendalikan.
#Figma AI dan Make
Figma AI dan Make adalah kemampuan AI-native di Figma: membuat desain dari prompt, menghasilkan variasi, hingga otomasi.
#Prompt-to-Design
Ubah deskripsi menjadi struktur UI awal:
Buat layar mobile kasir: header dengan nama toko,
daftar produk yang bisa diklik untuk menambah ke
transaksi, dan tombol besar "Bayar" di bawah.
Pakai style yang bersih dan ramah.Outputnya bukan desain final — ia adalah titik awal yang bisa didiskusikan. Alur kerja sehat: prompt → hasil AI → kurasi manusia → disempurnakan dengan design system.
#Variasi dan Eksplorasi
AI unggul di eksplorasi cepat: minta 5 varian layout dari satu brief, lalu pilih yang paling menjanjikan untuk diolah manual. Ini mempercepat fase ideasi (episode 3) tanpa menggantikan keputusan desainer.
#Aksesibilitas Audit
Beberapa kemampuan AI Figma membantu audit awal — seperti menyarankan pasangan kontras yang kurang dari 4.5:1 (episode 13). Tapi ingat: AI membantu menemukan, manusia yang memutuskan perbaikan. Audit otomatis tidak menggantikan pengujian dengan pengguna nyata.
#Figma MCP untuk Design-to-Code
MCP (Model Context Protocol) memungkinkan AI assistant (seperti Claude/Copilot) membaca file Figma secara terstruktur — dan bahkan menyarankan implementasi. Manfaatnya untuk workflow:
- Design-to-code: AI membaca layout & tokens, lalu menghasilkan kode yang setia terhadap desain.
- Konsistensi: kode mengacu token yang sama (episode 12), bukan nilai hardcode.
- Akselerasi handoff: developer memulai dari draft AI, lalu menyempurnakan — bukan dari nol.
# Skenario: developer minta AI membaca layar Konfirmasi
> MCP: get frame /KasirKita/Konfirmasi
> MCP: get variables from "color" collection
# Output: struktur layout + token yang dipakai → draft React/TailwindAlur ini memperpendek jarak desain→kode, tetapi tetap butuh review: AI tidak tahu konteks bisnis, perilaku aneh, atau trade-off performa.
#Workflow AI: Riset → Wireframe → UI → Handoff
Contoh workflow AI end-to-end yang bisa kalian tiru:
Perhatikan: AI hadir di banyak titik, tapi keputusan kurasi & polish tetap manusia di antara tiap langkah.
Tip
Prompt yang baik itu spesifik dan kontekstual: sebutkan perangkat (mobile 390px), persona (pemilik warung 40+ tahun), prioritas (tombol besar, thumb zone), dan style (ramah, bersih). Semakin jelas konteksnya, semakin berguna outputnya — AI yang bagus tidak berarti prompt yang malas.
#Batasan AI: Brand dan Judgment Manusia
AI adalah alat yang sangat cepat — dan sangat percaya diri meski salah. Batas-batas yang wajib dipegang:
| Batasan AI | Alasan | Tanggung jawab manusia |
|---|---|---|
| Brand | AI tidak tahu nilai brand, sejarah, atau konteks budaya | Desainer memegang panduan brand & menjaga konsistensi |
| Accessibility | AI menebak kontras/teks alt; tidak bisa menguji dengan pengguna nyata | Desainer memverifikasi & menguji bersama pengguna disabilitas |
| Ethics | AI bisa menghasilkan dark patterns atau copy manipulatif | Desainer memegang ethical checklist (episode 18) |
| Business context | AI tidak paham strategi bisnis, biaya, atau regulasi | Desainer menghubungkan desain dengan tujuan bisnis |
| Truthfulness | AI bisa menghasilkan yang "terlihat benar" tapi keliru | Desainer memverifikasi fakta & angka |
Aturan emas: AI mengusulkan, manusia yang bertanggung jawab. Jika output AI menembus produksi tanpa review judgment, yang berisiko adalah reputasi produk dan pengguna.
Warning
Jangan pernah menyalin output AI secara mentah untuk elemen berisiko: konten hukum/privacy (episode 18), angka & konfigurasi, atau klaim yang bisa disalahpahami. AI berguna untuk draft, bukan untuk menandatangani kebenaran. Selalu ada tangan manusia yang meneliti sebelum "ship".
#Praktik: Workflow AI Lengkap
Jalankan workflow pada satu fitur KasirKita (misal "Rekap Harian"):
- Riset: mintalah AI merangkum pain & gain Bu Sari dari catatan riset (episode 5), lalu verifikasi dengan sumber asli.
- Wireframe: gunakan AI wireframe tool (episode 7) dari prompt spesifik.
- UI: buat 3 varian dengan Figma Make; pilih & poles yang terbaik manual.
- Audit: minta AI menandai potensi masalah aksesibilitas; verifikasi dengan Stark.
- Handoff: gunakan MCP untuk menghasilkan draft kode dari tokens; review bersama developer.
- Dokumentasikan langkah yang diotomasi vs dikurasi manusia di frame
AI Workflow.
#Penutup
Pada episode 23 ini, kalian telah memahami peran AI dalam workflow desain modern.
Inti yang harus dibawa pulang:
- Figma AI/Make mempercepat prompt-to-design, variasi, dan audit awal — bukan pengganti desainer.
- Figma MCP menghubungkan desain ke kode: draft implementasi yang setia pada tokens.
- Workflow sehat: riset → wireframe → UI → handoff dengan kurasi manusia di setiap titik.
- Batasan AI: brand, aksesibilitas, etika, konteks bisnis, dan kebenaran tetap tanggung jawab manusia.
- AI mengusulkan, manusia yang memutuskan — dan bertanggung jawab.
Di episode 24 selanjutnya kita akan melihat arah berikutnya: generative UI & personalization — antarmuka adaptif berbasis perilaku, personalization, dan input voice/multimodal untuk KasirKita. Sampai jumpa di episode 24!