Cara Menggunakan Figma Make: Panduan untuk Desainer Web!

Kalau kamu seorang desainer web atau sedang membangun website, kamu mungkin sudah familiar dengan Figma. Tapi, tahukah kamu kalau sekarang Figma punya fitur baru bernama Figma Make? Figma Make adalah tool berbasis AI yang memudahkan kamu membuat prototype interaktif, web app, hingga UI hanya lewat obrolan. Yuk, kita bahas cara menggunakan Figma Make secara praktis!

Apa Itu Figma Make?

Figma Make adalah fitur terbaru dari Figma yang resmi diperkenalkan di acara Config 2025, bersama dengan beberapa fitur baru lain seperti Buzz, Sites, Slides, dan Draw. 

Dirancang dengan teknologi AI mutakhir, Figma Make memungkinkan kamu—sebagai desainer web—mengubah ide atau desain visual menjadi prototype fungsional, antarmuka interaktif, bahkan aplikasi web yang bisa langsung di-preview dan diuji.

Berbeda dari tool prototyping konvensional, Figma Make menawarkan pendekatan “prompt-to-code“, di mana kamu cukup berdialog dengan AI untuk mengembangkan dan menyempurnakan desainmu. Menarik, bukan?

Apa fungsi utama dari Figma Make?

Dengan fitur-fitur yang dimilikinya, Figma Make memiliki beberapa fungsi yang memudahkan desainer web dalam:

• Menghasilkan preview interaktif dari desain visual.
• Mengubah ide abstrak menjadi prototype siap diuji.
• Menyajikan berbagai alternatif solusi dari satu masalah desain.

Dengan kemudahan ini, tak heran jika Figma Make langsung mencuri perhatian para desainer web, terutama yang ingin mempercepat proses website building dari desain ke tahap fungsional.

Baca Juga: Kenalan Figma Make, Buzz, Draw: Fitur Terbaru di Config 2025

Fitur Unggulan Figma Make

Sebelum kamu tahu cara menggunakan Figma Make, alangkah baiknya kita kenalan dulu dengan fitur inti Figma Make. Yuk, kita bahas!

Berikut ini fitur-fitur unggulan Figma Make yang akan memudahkan kamu dalam mendesain website dan membuat prototype aplikasi web:

Chat with AI

Kamu bisa langsung ngobrol dengan AI di dalam Figma Make. Dari memberi instruksi, melampirkan desain, hingga meminta perbaikan, semua dilakukan lewat chat yang terasa natural. Fitur ini sangat praktis sebagai langkah awal website building. 

Attach Design & Images

Sudah punya desain di Figma? Cukup klik Attach Design. Fitur Figma Make ini mendukung berbagai input seperti:

• Desain dari file Figma (frame atau komponen)
• Gambar ide (sketsa, tangkapan layar, mockup)
• Instruksi teks langsung dalam kolom chat

Kombinasi ini membantu AI memahami konteks proyekmu lebih akurat.

Edit dan Iterasi Proyek

Setelah prototype dibuat, kamu bisa melanjutkan percakapan di chat atau pakai fitur Edit Tool untuk:

• Mengubah padding, warna, margin, dan elemen lain lewat tool edit
• Melanjutkan percakapan untuk menyempurnakan tampilan dan fungsi
• Melihat riwayat versi dan kembali ke versi sebelumnya

Preview & Share

Hasil akhir bisa kamu preview secara fullscreen dan dibagikan ke tim atau klien. Bahkan bisa kamu publish ke web publik dengan URL khusus dari Figma atau domain milikmu sendiri.

Kontrol Akses

Figma Make menyediakan pengaturan permission granular, memungkinkan kamu mengatur siapa yang bisa melihat, mengedit, atau mempublikasikan file proyek.

Cara Praktis Menggunakan Figma Make

Nah, sampailah kita ke panduan praktis cara menggunakan Figma Make, mulai dari membuat dan mengedit prototype hingga mempublikasikannya. Simak penjelasannya berikut ini. 

Buat & Edit Prototype atau Web App Langsung dari Chat

Proses awal dalam cara menggunakan Figma Make cukup sederhana:

• Buka file browser di Figma, klik “+ Create”, lalu pilih “Make”.
• Di dalam chat AI, tulis saja ide kamu—misalnya “buat landing page toko bunga dengan CTA dan form pemesanan.”
• Kamu juga bisa:
  • Melampirkan desain dari Figma.
  • Menyalin dan menempel frame atau gambar ke kolom chat.
  • Menulis instruksi secara langsung.

AI Figma Make akan memproses perintah kamu, membuat kode, lalu menyajikan hasilnya dalam preview interaktif. Proses ini cocok buat kamu yang ingin mempercepat tahap awal website building tanpa repot teknis.

Untuk edit? Kamu tinggal lanjutkan percakapan di thread yang sama. Kamu bisa:

• Arahkan ke bagian tertentu yang mau diubah dengan fitur Edit.
• Lanjutkan dengan melampirkan desain baru.
• Gunakan version history untuk revisi ke versi sebelumnya.

Gunakan Desain & Gambar sebagai Panduan AI

Agar AI lebih akurat mengeksekusi ide kamu, Figma Make memungkinkan kamu menambahkan desain dan gambar sebagai referensi visual.

• Kamu bisa melampirkan hingga 3 desain atau gambar per prompt.
• Desain bisa dipilih dari file internal atau dari Figma Community.
• Untuk pencarian lebih spesifik, gunakan fitur visual search.

Kamu juga bisa menyalin komponen atau frame dari Figma dan menempelkannya langsung ke chat. Tapi perlu dicatat: elemen seperti section atau layer non-frame tidak bisa diproses.

Gambar juga bisa digunakan sebagai acuan. Meskipun hasil akhirnya mungkin tidak 100% sama, AI akan mencoba meniru warna, layout, dan posisi elemen secara logis.

Cek Preview Langsung & Uji Interaksi

Setiap kali kamu kirim prompt, AI akan menghasilkan preview yang bisa kamu uji secara langsung. Mau lihat dalam tampilan layar penuh?

• Klik Open preview in a new tab di kanan atas file Figma Make.
• Uji fungsionalitas UI dan catat perubahan yang perlu kamu buat.

Kamu juga bisa membagikan preview ke tim atau klien, lengkap dengan pengaturan akses seperti biasa di Figma.

Publikasikan, Update, dan Kelola Web App Kamu

Sudah yakin dengan hasil akhir? Klik Publish. Figma Make akan memberikan URL acak agar hasil prototype kamu bisa diakses publik.

Fitur penting lainnya:

• Update: Setiap revisi harus dipublish ulang agar terlihat di versi live.
• Custom domain: Gunakan domain sendiri untuk tampilan lebih profesional (termasuk untuk user IDwebhost!).
• Unpublish: Kamu bisa menarik kembali publikasi sewaktu-waktu, tanpa kehilangan datanya.

Kamu juga bisa atur judul, meta description, favicon, hingga ID Google Analytics dari menu Make Settings.

Jadi, baik kamu sedang eksplorasi UI sebagai desainer web pemula, atau sedang menghemat waktu dalam project website building, Figma Make adalah alat yang bisa bantu kerja kamu jadi lebih gesit, visual, dan minim hambatan teknis.

Sudah siap coba sendiri? Yuk, mulai bangun ide kamu langsung di Figma Make!

Keunggulan Figma Make Dibanding Tool Lain

Apa yang membuat Figma Make berbeda dari tool desain lainnya? Jawabannya ada pada fitur-fiturnya. Inilah alasan kenapa kamu perlu tahu cara menggunakan Figma Make secara efektif.

• Tanpa Koding Rumit: Cocok buat kamu yang bukan developer
• Fleksibel: Bisa mulai dari desain, gambar, atau ide mentah
• Kolaboratif: Mudah berbagi dan berkolaborasi antar tim
• Cepat Iterasi: Revisi bisa dilakukan langsung via AI chat
• Integrasi Figma: Tak perlu keluar dari ekosistem Figma
  

Tips Maksimalkan Figma Make

Nah, agar produktivitas dalam menggunakan Figma Make bisa efektif dan optimal, cobalah beberapa tips berikut ini:

• Pastikan desain yang kamu lampirkan bersih dan jelas (gunakan frame, bukan section).
• Gunakan bahasa yang lugas saat memberi instruksi di chat.
• Manfaatkan edit tool untuk perubahan spesifik.
• Simpan riwayat versi untuk backup jika hasil AI tidak sesuai harapan.
• Rutin update proyek untuk hasil terbaik di tampilan publik.

Baca Juga: 3 Alat Terbaik UI/UX Designer: From Zero to Hero Desain Web

Kesimpulan

Bagi kamu yang bekerja sebagai desainer web, menggunakan Figma Make tidak hanya membuka cara baru dalam membuat prototype, tapi juga menghemat waktu dan energi dalam proses website building.

Tanpa perlu menulis ribuan baris kode, kamu bisa menghidupkan ide desainmu menjadi aplikasi web yang fungsional dan bisa langsung diuji, dibagikan, atau dipublikasikan ke dunia.

Dan kalau kamu sedang membangun website pribadi atau belajar membangun web app dengan Figma, jangan lupa, proyek hebat butuh pondasi hosting yang andal. IDwebhost hadir dengan layanan Hosting Unlimited berkualitas, siap mendukung performa websitemu secepat dan seaman mungkin.

Yuk, wujudkan desain jadi kenyataan—mulai dari Figma Make, lanjutkan ke live site dengan hosting terbaik dari IDwebhost!