Tutorial Lengkap Figma AI: Dari Make Membuat Draf sampai Pengiriman lewat MCP, Apa yang Sebenarnya Berubah pada Alur Desain

Pukul sepuluh pagi, seorang desainer di sebuah startup SaaS di Jakarta membuka Figma, hendak membuat halaman paket langganan versi berikutnya. Dulu ia akan lebih dulu membuka kanvas kosong dan melamun dua puluh menit; sekarang ia mengetik satu prompt, memilih design system perusahaannya, dan empat puluh detik kemudian muncul tiga arah tata letak di layar.

Ia menatapnya tiga detik, lalu berkata: "Semuanya salah, tapi saya jadi tahu harus mengubahnya ke arah mana."

Kalimat itu kurang lebih adalah nilai sebenarnya Figma AI pada 2026 — ia takkan membantu Anda menghasilkan desain yang benar, tetapi ia bisa sangat cepat menunjukkan seperti apa "yang salah". Dan bagi pekerjaan desain, nilai hal ini sangat diremehkan.

Apa Saja yang Sebenarnya Ada di Figma AI Sekarang

Bentangkan dulu petanya. Fitur AI Figma pada 2026 sudah membentang dari pembuatan konten, penyuntingan gambar, pencarian cerdas, draf UI, pengiriman kode, hingga pembuatan situs utuh, terutama mencakup beberapa bagian ini:

Agen desain di kanvas: menghasilkan UI langsung di kanvas Anda, bukan melemparkan sebuah gambar.

Make: prompt menjadi kode, menghasilkan arah yang bisa berjalan dari satu deskripsi.

First Draft: cepat menghasilkan draf tata letak UI.

Pembuatan gambar dan penggantian konten: menghasilkan gambar, serta mengganti teks palsu di file desain menjadi konten yang layak.

Saran Auto layout: otomatis menilai struktur tata letak.

MCP Server: dipakai agen coding, agar alat AI penulis kode bisa memahami file desain Anda.

Skills: instruksi kustom untuk agen, setara mengajarinya cara kerja tim Anda.

Sites: menerbitkan situs web.

Draw: menggambar ilustrasi berbantuan AI.

Buzz: produksi konten merek.

Daftarnya panjang, tetapi dalam praktik yang benar-benar dipakai tiap hari hanya tiga sampai empat. Berikut alur nyata yang saya sarankan.

Langkah Satu: Pada Tahap Gagasan, Pakai Make atau First Draft untuk Membuat Tiga sampai Empat Arah

Jangan sejak awal berpikir menghasilkan "yang benar". Ini kesalahan pertama kebanyakan orang saat memakai alat desain AI — mereka menulis satu prompt yang sangat panjang, berharap sekali jadi, lalu kecewa dengan hasilnya.

Cara yang benar adalah memproduksi arah secara massal. Praktiknya:

Buka Figma Make, hasilkan beberapa opsi tata letak untuk fitur baru. Dalam prompt tuliskan dengan jelas dua hal: apa kebutuhan pengguna, dan pilih design system Anda. Hal kedua sering terlewat banyak orang, padahal itu menentukan apakah hasilnya bisa dipakai — tanpa menentukan design system, AI akan memberi satu set warna dan komponen yang benar-benar asing, terlihat cantik tetapi tak ada hubungannya dengan produk Anda.

Setelah selesai jangan buru-buru memilih yang paling cantik. Pilih "yang strukturnya paling dekat dengan yang Anda inginkan", visual bisa diubah belakangan, tetapi struktur yang salah berarti ulang dari awal.

Kebiasaan saya sendiri adalah membuat empat, lalu bertanya pada diri: kalau hanya boleh menyisakan satu, saya akan menyisakan yang mana? Setelah menyisakan, tanya lagi: kenapa saya menyisakannya? Jawaban pertanyaan kedua itu biasanya baru kebutuhan sejati dari desain ini.

Langkah Dua: Pindahkan Kerangka Hasil ke File Kerja, Rapikan Dulu Layer

Langkah ini paling membosankan, dan paling banyak dilewati orang, lalu membayar harganya saat pengiriman.

Setelah menarik frame hasil ke file kerja Anda, jalankan alat Rename layers agar developer bisa membaca file Anda. Nama layer hasil AI biasanya seperti Frame 427, Group 88 — engineer yang membukanya cuma bisa ingin menangis.

Hal ini pada 2026 lebih penting dari sebelumnya, alasannya adalah MCP. Ketika agen coding langsung membaca file desain Anda, penamaan layer bukan lagi sekadar soal sopan santun — itu soal kualitas input. Kalau penamaannya berantakan, struktur kode yang dihasilkan AI pun ikut berantakan.

Langkah Tiga: Pakai Replace content untuk Mengganti Naskah Palsu

Klik Replace content, ganti teks penampung yang tersisa menjadi data nyata yang layak.

Nilai langkah ini bukan menghemat waktu, melainkan menyingkap masalah. Teks palsu (Lorem ipsum atau "teks judul") membuat semua desain terlihat sempurna, karena panjang setiap kolom pas sekali. Setelah diganti data nyata, barulah Anda menemukan "judul ini dua baris saja sudah meluber", "kolom harga ini tak muat empat digit ditambah mata uang".

Desainer Indonesia terutama harus memperhatikan ini: lebar huruf antar-bahasa sangat berbeda, dan tata letak yang disusun dengan teks palsu berbahasa Inggris sering runtuh total begitu diganti bahasa Indonesia yang lebih panjang. Makin cepat ditemukan makin baik.

Langkah Empat: Saat Pengiriman, Sambungkan MCP

Kalau tim Anda memakai alat AI penulis kode, MCP Server dari Figma layak disiapkan. Ia membuat agen coding bisa memperoleh informasi terstruktur dari file desain — jarak, warna, hierarki komponen — bukan sekadar menebak dari satu tangkapan layar.

Ini sangat bermakna bagi tim kecil yang umum di Indonesia. Kebanyakan startup Indonesia tak punya front-end khusus, dan setelah desain diserahkan sering kali dikerjakan engineer full-stack sambil mencari-cari cara, dan di situlah selisihnya muncul. Dengan menyambungkan MCP, setidaknya yang diterima AI adalah struktur, bukan piksel.

Saat dipakai bersama Cursor atau alat AI coding lain, alur kerjanya menjadi: desain difinalkan di Figma → MCP menyediakan struktur → agen coding menghasilkan kode versi pertama → engineer memperbaiki. Waktu pada bagian tengah "membuat perlahan sesuai gambar" akan jelas berkurang.

Teknik Lanjutan: Pakai Skills untuk Mengajari Aturan Tim Anda

Skills memungkinkan Anda mengustom instruksi agen. Fitur ini jarang dibahas, tetapi ini kunci yang mengubah AI dari "alat umum" menjadi "alat tim Anda".

Contoh hal yang bisa dituliskan: tombol kami selalu memakai sudut membulat 8, kami tidak memakai hitam murni sebagai warna teks, pesan galat formulir selalu diletakkan di bawah kolom, jarak hanya memakai kelipatan 4.

Menuliskan panduan desain tim menjadi Skills setara membuat setiap hasil otomatis mematuhinya. Ini jauh lebih cepat daripada memperbaiki satu per satu belakangan, dan juga membuat kualitas hasil desainer junior lebih stabil.

Hal yang Perlu Diperhatikan: Tiga Hal yang Belum Bisa Dilakukan Figma AI Sekarang

Pertama, ia tak memahami pengguna Anda. Antarmuka hasil AI adalah "antarmuka yang terlihat masuk akal", bukan "antarmuka yang dibutuhkan pengguna Anda". Ia tak pernah melihat tiket layanan pelanggan Anda, tak pernah membaca wawancara pengguna Anda. Bagian ini tak ada jalan pintas.

Kedua, desain aksesibilitas tetap perlu diawasi manusia. Kontras warna, urutan operasi keyboard, label untuk pembaca layar — hasil AI biasanya tak lolos pemeriksaan. Proyek sektor publik di Indonesia punya tuntutan aksesibilitas, dan untuk bagian ini jangan sekali-kali percaya nilai bawaan AI.

Ketiga, desain untuk kondisi nyata. Kondisi kosong, sedang memuat, galat, teks super panjang, hak akses tak cukup — kondisi "tak cantik tapi perlu" ini hampir tak pernah dibuat AI secara proaktif. Padahal itu sering menghabiskan separuh jam kerja pengembangan nyata.

Ada satu hal lagi: sebelum penggunaan komersial, pastikan kepemilikan hak atas konten hasil dan sumber materinya. Cara yang lebih aman adalah memperlakukan hasil AI sebagai draf struktur, sedangkan elemen visual tetap memakai materi milik sendiri atau yang lisensinya jelas.

Saran Praktis untuk Desainer Indonesia

Saya berbincang dengan beberapa desainer di Indonesia, baik yang freelance maupun in-house, dan menyimpulkan dua perbedaan pemakaian nyata.

Desainer freelance paling merasakannya pada tahap proposal. Dulu menunjukkan tiga arah ke klien butuh dua hari, sekarang setengah hari bisa menghasilkan enam, lalu waktu yang dihemat dipakai untuk mengerjakan versi yang benar-benar akan diingat. Tapi hati-hati pada satu jebakan: klien jadi berharap Anda "toh cepat", jadi harga dan jadwal harus dinegosiasi ulang, kalau tidak Anda cuma menyerahkan margin Anda sendiri.

Desainer in-house paling merasakannya pada bagian kolaborasi dengan engineering. Perusahaan di Indonesia sering tak punya lapisan tengah antara desain dan engineering, dan MCP ditambah perapian layer bisa menekan gesekan pengiriman.

Soal "apakah AI akan menggantikan desainer" — pandangan saya sederhana: yang digantikan adalah aksi "menggambar hal yang sudah dipikirkan matang di kepala", dan itu memang bagian paling tak berharga dari pekerjaan desain. Desainer yang tak jelas mau membuat apa, dengan AI hanya akan lebih cepat menghasilkan lebih banyak hal yang tak berguna.

Kalau Anda ingin memulai dari yang lebih dasar, Anda bisa membaca dulu rangkuman alat pembuat gambar AI, atau ke templat prompt untuk mencari prompt desain yang bisa langsung dipakai. Kalau ingin menerapkan AI ke alur kerja lengkap, Panduan tugas berisi cara yang disusun menurut skenario.

Komentar TheAI Academy

Arah pembaruan Figma putaran ini sebenarnya konsisten: ia tak berniat menggantikan penilaian desainer, melainkan menghilangkan gesekan pada tahap "dari nol menjadi ada", sekaligus menambal celah antara desain dan kode. Bagian MCP yang menurut saya paling diremehkan — ketika AI mulai langsung membaca file desain, kualitas file desain menjadi hulu bagi kualitas engineering.

Komentar: Figma AI menjadikan "menggambar cepat" sebagai standar, sehingga "berpikir benar" menjadi satu-satunya pembeda. Yang harus dikhawatirkan desainer Indonesia bukan digantikan AI, melainkan terus memosisikan diri sebagai "pelaksana" — posisi itu memang sedang lenyap.

Saran konkret untuk pembaca Indonesia: minggu ini pilih satu proyek nyata, paksa diri memakai Make untuk membuat empat arah, lalu luangkan waktu menuliskan "kenapa semuanya salah". Anda akan menemukan daftar ini jauh lebih berharga daripada keempat desain itu, karena itulah penilaian desain Anda — dan itulah yang sepenuhnya belum bisa ditiru AI saat ini. Selain itu, sempatkan dua puluh menit menuliskan panduan desain tim menjadi Skills, ini investasi sekali kerja dengan imbal-hasil tertinggi.

Sumber

• Use AI tools in Figma Design – Figma Learn Help Center
• Figma AI Design Generator (halaman produk resmi)
• Figma AI in 2026: Everything it can do — and what it still can't (LogRocket)

Dirangkum dari informasi publik, mengacu pada penjelasan resmi. Fitur dan isi paket dapat berubah seiring pembaruan versi, dan yang berlaku adalah pengumuman resmi Figma.