Tutorial Lengkap Figma AI: Daripada Make Menjana Draf hingga Penyerahan MCP, Apa Sebenarnya yang Telah Berubah dalam Aliran Reka Bentuk

Pukul sepuluh pagi, seorang pereka di sebuah syarikat baharu SaaS di Kuala Lumpur membuka Figma, bersedia membuat versi seterusnya halaman pelan langganan. Dahulu dia akan membuka kanvas kosong dan termenung dua puluh minit; kini dia menaip satu prompt, memilih sistem reka bentuk syarikat, dan empat puluh saat kemudian tiga arah susun atur muncul di skrin.

Dia merenungnya selama tiga saat, lalu berkata: "Semuanya tidak betul, tetapi saya sudah tahu ke mana hendak diubah."

Ayat ini kira-kira menggambarkan nilai sebenar Figma AI pada 2026 — ia tidak akan membantu anda menghasilkan reka bentuk yang betul, tetapi ia boleh membolehkan anda melihat rupa 'yang tidak betul' dengan amat pantas. Dan bagi kerja reka bentuk, nilai perkara ini amat dipandang rendah.

Apa Sebenarnya yang Ada dalam AI Figma Sekarang

Kita bentangkan petanya dahulu. Ciri AI Figma pada 2026 sudah merentasi penjanaan kandungan, penyuntingan imej, carian pintar, draf UI, penyerahan kod hingga pembinaan keseluruhan laman, terutamanya merangkumi bahagian-bahagian ini:

Ejen reka bentuk atas kanvas: menjana UI terus atas kanvas anda, bukan sekadar melemparkan sekeping gambar.

Make: menukar prompt kepada kod, menghasilkan arah yang boleh berfungsi daripada satu perenggan huraian.

First Draft: menjana draf susun atur UI dengan pantas.

Penjanaan imej dan penggantian kandungan: menjana gambar, serta menggantikan teks palsu dalam reka bentuk dengan kandungan yang lebih munasabah.

Cadangan Auto layout: menilai struktur susun atur secara automatik.

MCP Server: untuk kegunaan ejen pengekodan, membolehkan alat AI menulis kod memahami fail reka bentuk anda.

Skills: mengubah suai arahan ejen, sama seperti mengajarnya cara kerja pasukan anda.

Sites: menerbitkan laman web.

Draw: melukis ilustrasi berbantukan AI.

Buzz: penghasilan kandungan jenama.

Senarainya panjang, tetapi secara praktikal yang benar-benar digunakan setiap hari hanya tiga hingga empat sahaja. Berikut ialah aliran sebenar yang saya cadangkan.

Langkah Satu: Pada Peringkat Idea, Guna Make atau First Draft untuk Menjana Tiga hingga Empat Arah

Jangan sejak mula cuba menjana 'yang betul itu'. Inilah kesilapan pertama kebanyakan orang menggunakan alat reka bentuk AI — mereka menulis satu prompt yang panjang, mengharapkan sekali jadi, kemudian kecewa dengan hasilnya.

Cara yang betul ialah menghasilkan arah secara pukal. Cara praktikalnya:

Buka Figma Make, jana beberapa pilihan susun atur untuk ciri baharu. Dalam prompt, jelaskan dua perkara: apa keperluan pengguna, dan pilih sistem reka bentuk anda. Perkara kedua ini kerap tertinggal, tetapi ia menentukan sama ada keluaran boleh digunakan — tanpa menetapkan sistem reka bentuk, AI akan memberi anda set warna dan komponen yang benar-benar asing, kelihatan cantik tetapi langsung tiada kaitan dengan produk anda.

Selepas dijana, jangan tergesa-gesa memilih yang paling cantik. Pilih yang 'strukturnya paling hampir dengan yang anda mahu'; visual boleh diubah kemudian, tetapi jika struktur salah keseluruhannya perlu diulang.

Tabiat saya sendiri ialah menjana empat, kemudian bertanya kepada diri: jika hanya boleh simpan satu, yang mana saya akan simpan? Selepas memilih, tanya pula: mengapa saya menyimpannya? Jawapan kepada soalan kedua itu biasanya barulah keperluan sebenar reka bentuk kali ini.

Langkah Dua: Pindahkan Rangka yang Dijana ke Fail Kerja, Kemas Lapisan Dahulu

Langkah ini paling membosankan, dan paling ramai yang melangkaunya, lalu membayar harganya semasa penyerahan.

Selepas menarik frames yang dijana ke dalam fail kerja anda, jalankan alat Rename layers supaya pembangun boleh memahami fail anda. Nama lapisan yang dijana AI biasanya seperti Frame 427, Group 88, dan jurutera yang membukanya hanya mahu menangis.

Perkara ini pada 2026 lebih penting daripada dahulu, sebabnya ialah MCP. Apabila ejen pengekodan membaca fail reka bentuk anda secara langsung, penamaan lapisan bukan lagi sekadar soal kesopanan — ia soal kualiti input. Jika penamaan berselerak, struktur kod yang dijana AI juga akan turut berselerak.

Langkah Tiga: Guna Replace content untuk Menggantikan Teks Palsu

Klik Replace content untuk menggantikan teks pemegang tempat yang tinggal dengan data sebenar yang munasabah.

Nilai langkah ini bukan pada menjimatkan masa, tetapi pada mendedahkan masalah. Teks palsu (Lorem ipsum atau 'Teks Tajuk') menjadikan semua reka bentuk kelihatan sempurna, kerana panjang setiap medan kebetulan pas. Selepas diganti dengan data sebenar, barulah anda akan mendapati 'tajuk ini pecah susun atur pada dua baris', 'medan harga ini tidak muat untuk empat angka dengan simbol mata wang'.

Pereka di Malaysia perlu memberi perhatian khusus pada perkara ini: teks Bahasa Melayu selalunya lebih panjang daripada Bahasa Inggeris (perkataan seperti "pemberitahuan" atau "maklumat" jauh lebih panjang daripada padanan Inggerisnya), jadi susun atur yang direka menggunakan teks palsu Bahasa Inggeris sering runtuh apabila diganti dengan teks sebenar. Lebih awal ditemui, lebih baik.

Langkah Empat: Semasa Penyerahan, Sambungkan MCP

Jika pasukan anda menggunakan alat AI menulis kod, MCP Server Figma berbaloi disediakan. Ia membolehkan ejen pengekodan memperoleh maklumat berstruktur fail reka bentuk — jarak, warna, hierarki komponen — dan bukannya hanya melihat satu tangkapan skrin lalu meneka.

Ini amat bermakna bagi pasukan kecil yang lazim di Malaysia. Kebanyakan syarikat baharu di Malaysia tiada pembangun front-end khusus, jadi selepas reka bentuk diserahkan, selalunya jurutera full-stack yang menokoknya sambil menyemak, dan di sinilah jurang terhasil. Sambungkan MCP, sekurang-kurangnya biarkan AI menerima struktur dan bukan piksel.

Apabila digunakan bersama Cursor atau alat pengekodan AI lain, aliran kerja menjadi: reka bentuk dimuktamadkan dalam Figma → MCP menyediakan struktur → ejen pengekodan menghasilkan kod versi pertama → jurutera membetulkannya. Masa 'menokok mengikut gambar dengan perlahan' di tengah-tengah itu akan menjadi jauh lebih pendek.

Teknik Lanjutan: Guna Skills untuk Mengajar Peraturan Pasukan Anda

Skills membolehkan anda mengubah suai arahan ejen. Ciri ini tidak banyak dibincangkan, tetapi ia kunci yang mengubah AI daripada 'alat umum' kepada 'alat pasukan anda'.

Contoh perkara yang boleh ditulis ke dalamnya: butang kami sentiasa menggunakan bucu bulat 8, kami tidak menggunakan hitam tulen sebagai warna teks, mesej ralat borang sentiasa diletak di bawah medan, jarak hanya menggunakan gandaan 4.

Menulis piawaian reka bentuk pasukan sebagai Skills bermakna setiap penjanaan secara automatik mematuhinya. Ini jauh lebih pantas daripada membetulkannya satu persatu selepas itu, dan menjadikan kualiti keluaran pereka junior lebih stabil.

Perkara Perlu Diberi Perhatian: Tiga Perkara yang Figma AI Masih Tidak Mampu Lakukan Sekarang

Pertama, ia tidak memahami pengguna anda. Antara muka yang dijana AI ialah 'antara muka yang kelihatan munasabah', bukan 'antara muka yang diperlukan pengguna anda'. Ia belum pernah melihat tiket khidmat pelanggan anda, belum pernah membaca temu bual pengguna anda. Bahagian ini tiada jalan pintas.

Kedua, reka bentuk kebolehcapaian masih perlu dikawal oleh manusia. Kontras warna, susunan operasi papan kekunci, label untuk pembaca skrin — perkara yang dijana AI biasanya tidak lulus pemeriksaan. Projek sektor awam di Malaysia mempunyai keperluan kebolehcapaian, jadi bahagian ini jangan sekali-kali percaya nilai lalai AI.

Ketiga, reka bentuk keadaan sebenar. Keadaan kosong, sedang memuatkan, ralat, teks yang terlalu panjang, kebenaran tidak mencukupi — keadaan yang 'tidak cantik tetapi perlu' ini hampir tidak akan dijana AI secara aktif untuk anda. Namun ia sering menyumbang separuh daripada jam kerja pembangunan sebenar.

Ada satu lagi perkara yang perlu disebut: sebelum penggunaan komersial, sahkan hak pemilikan kandungan yang dijana dan sumber bahan. Cara yang lebih selamat ialah menjadikan keluaran AI sebagai draf struktur, manakala elemen visual tetap menggunakan bahan sendiri atau bahan yang mempunyai lesen yang jelas.

Cadangan Praktikal untuk Pereka di Malaysia

Saya pernah berbual dengan beberapa pereka yang bekerja bebas dan yang dalam syarikat di Malaysia, dan merumuskan dua perbezaan penggunaan yang praktikal.

Pereka bebas paling merasainya pada peringkat pembentangan. Dahulu menunjukkan tiga arah kepada pelanggan mengambil masa dua hari, kini setengah hari boleh menjana enam, kemudian masa yang dijimatkan digunakan untuk menghasilkan versi yang benar-benar akan diingati. Tetapi berhati-hati dengan satu perangkap: pelanggan akan mula mengharapkan anda 'pantas saja', jadi sebut harga dan jadual perlu dirundingkan semula, jika tidak anda hanya menyerahkan keuntungan anda sendiri.

Pereka dalam syarikat paling merasainya pada bahagian kerjasama dengan kejuruteraan. Antara reka bentuk dan kejuruteraan di syarikat Malaysia sering tiada lapisan perantara, jadi MCP ditambah kemasan lapisan boleh menekan geseran penyerahan.

Bagi soalan 'adakah AI akan menggantikan pereka' — pandangan saya sangat mudah: yang digantikannya ialah tindakan 'melukis apa yang sudah terfikir dalam kepala', dan itu memang bahagian paling tidak bernilai dalam kerja reka bentuk. Pereka yang tidak jelas apa yang hendak dibuat, apabila menggunakan AI hanya akan menghasilkan lebih banyak benda tidak berguna dengan lebih pantas.

Jika anda mahu bermula dari tempat yang lebih asas, boleh lihat dahulu susunan alat penjanaan imej AI, atau ke templat prompt untuk mencari prompt reka bentuk yang boleh terus digunakan. Jika mahu melaksanakan AI ke dalam aliran kerja yang lengkap, panduan tugas mempunyai kaedah yang disusun mengikut senario.

TheAI Academy — Ulasan

Kemas kini Figma pusingan ini sebenarnya mempunyai arah yang konsisten: ia tidak bercadang menggantikan pertimbangan pereka, tetapi mengalihkan geseran 'daripada sifar kepada ada', serta menampung jurang antara reka bentuk dan kod. Bahagian MCP itu yang saya rasa paling dipandang rendah — apabila AI mula membaca fail reka bentuk secara langsung, kualiti fail reka bentuk menjadi hulu kepada kualiti kejuruteraan.

Ulasan: Figma AI menjadikan 'melukis dengan pantas' sebagai standard, maka 'berfikir dengan betul' menjadi satu-satunya pembeza. Yang patut dibimbangi oleh pereka di Malaysia bukan digantikan AI, tetapi terus meletakkan diri sebagai 'pelaksana' — kedudukan itu memang sedang lenyap.

Cadangan khusus untuk pembaca di Malaysia: minggu ini pilih satu projek sebenar, paksa diri anda menggunakan Make untuk menjana empat arah, kemudian luangkan masa menulis 'mengapa semuanya tidak betul'. Anda akan mendapati senarai ini jauh lebih bernilai daripada empat reka bentuk itu, kerana ia sebenarnya pertimbangan reka bentuk anda — dan itulah yang AI langsung tidak mampu tiru buat masa ini. Selain itu, pastikan anda luangkan dua puluh minit untuk menulis piawaian reka bentuk pasukan sebagai Skills; ini pelaburan sekali sahaja dengan pulangan tertinggi.

Sumber Rujukan

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

Disusun berdasarkan maklumat awam, dengan penerangan rasmi sebagai rujukan muktamad. Ciri dan kandungan pelan mungkin berubah mengikut kemas kini versi, dengan pengumuman rasmi Figma sebagai rujukan sebenar.