Figma ke situs web: luncurkan landing page
Ubah bingkai pemasaran dari Figma menjadi HTML, CSS, dan JavaScript, lalu publikasikan situs yang sudah jadi.
Ubah desain Figma menjadi aplikasi web yang berfungsi
Tempel tautan frame Figma, jelaskan apa yang harus dilakukan halaman tersebut, dan biarkan Manus membangun frontend dan backend yang dapat Anda publikasikan.
Dari frame desain menjadi halaman yang berfungsi
Manus membaca tata letak, komponen, font, dan warna dalam frame Figma untuk membangun aplikasi web yang fungsional.
Bingkai desainHalaman yang aktif
Contoh ilustrasi.
Ubah desain ke kode untuk halaman yang Anda butuhkan
Mulai dengan landing page, dashboard, atau beberapa frame yang saling terhubung. Setiap permintaan dapat menjelaskan perilaku di balik desainnya.
Figma ke kode: bangun dasbor yang berfungsi
Bagikan desain dasbor admin dan jelaskan data serta tindakan yang Anda perlukan. Manus membangun aplikasi web dengan komponen frontend dan backend.
Figma ke aplikasi: hubungkan seluruh alur kerja
Bawa beberapa frame ke dalam satu permintaan design-to-code. Jelaskan bagaimana halaman saling terhubung, apa yang terjadi saat diklik, dan status komponen mana yang penting.
Ubah Figma menjadi kode dengan tautan, bukan plugin
Tidak diperlukan plugin Figma ke kode yang terpisah untuk alur kerja yang didokumentasikan. Hubungkan akun Figma Anda, tempel tautan frame, dan sebutkan apa yang harus berfungsi pada halaman tersebut.
Publikasikan situs Anda, lalu terus sempurnakan
Desain AI ke kode tidak berhenti pada pratinjau. Publikasikan situs web, hubungkan domain Anda sendiri, dan jelaskan perubahan yang Anda inginkan dalam percakapan.
Satu tautan, satu permintaan jelas, situs yang siap dipublikasikan
Jelaskan bagaimana frame Anda saling terhubung. Lalu tinjau hasilnya dan lanjutkan membuat perubahan dalam percakapan.
Terus membangun dengan Manus
Pertanyaan yang sering diajukan
Bagaimana cara mengonversi Figma ke kode dengan Manus?
Hubungkan akun Figma Anda ke Manus, lalu bagikan tautan ke frame Figma dan jelaskan aplikasi web yang ingin Anda buat. Manus akan membaca tata letak, komponen, font, dan warnanya, lalu membangun frontend dan komponen backend yang diperlukan.
Bisakah Manus mengubah Figma menjadi HTML dan CSS?
Ya. Impor Figma yang terdokumentasi menghasilkan HTML, CSS, dan JavaScript untuk frontend, ditambah komponen backend yang diperlukan untuk aplikasi web yang diminta. Secara default, Manus membangunnya sebagai proyek React dan Tailwind CSS yang berjalan sebagai HTML, CSS, dan JavaScript di browser. Jelaskan halaman dan perilaku yang Anda butuhkan beserta tautan frame-nya.
Apakah Manus mendukung Figma ke React dan Figma ke Tailwind?
Ya. Manus membangun situs web dengan React dan Tailwind CSS secara default, sehingga desain yang diimpor dari Figma akan menjadi frontend React dengan gaya Tailwind, lengkap dengan kode backend yang dibutuhkan permintaan Anda. Anda dapat mengekspor kode proyek ke repositori GitHub pribadi.
Apakah saya perlu plugin Figma ke kode?
Tidak ada plugin terpisah yang menjadi bagian dari alur yang didokumentasikan. Hubungkan akun Figma Anda, bagikan tautan frame dengan Manus dan jelaskan apa yang ingin dibuat; Anda bisa menambahkan lebih banyak frame jika desain Anda memiliki beberapa halaman atau status.
Apakah saya perlu menginstal server Figma MCP?
Tidak. Manus terhubung langsung ke akun Figma Anda melalui login Figma. Setelah terhubung, impor tautan frame dan jelaskan aplikasinya; tidak ada server Figma MCP terpisah yang perlu diinstal atau dijalankan.
Apakah saya perlu Figma Dev Mode atau kursi Figma berbayar?
Tidak. Manus mengimpor frame melalui akun Figma Anda yang terhubung, bukan melalui Dev Mode, dan akun Figma gratis pun dapat terhubung. Figma membatasi seberapa sering aplikasi dapat membaca file: paket gratis dan seat tanpa Dev Mode mendapat kuota bulanan yang kecil, sementara seat berbayar dengan Dev Mode mendapat batas yang jauh lebih tinggi. Jika Anda mencapai batas tersebut, Manus akan memberi tahu Anda.
Bisakah alur kerja AI Figma ke kode membangun aplikasi yang berfungsi?
Ya. Bagikan tautan frame Figma dan jelaskan aplikasinya. Manus akan menganalisis desain tersebut dan membangun frontend serta komponen backend yang diperlukan untuk aplikasi web yang berfungsi.
Bisakah Manus menangani desain dan interaksi multi-halaman?
Ya. Bagikan beberapa frame Figma dan jelaskan alur halaman, interaksi, atau status komponennya, seperti hover. Ini membantu Manus membangun pengalaman web interaktif multi-halaman.
Bisakah saya mempublikasikan situs setelah mengonversinya?
Ya. Pratinjau aplikasi web, klik Publish, dan aplikasi tersebut akan dapat diakses secara online. Anda dapat menghubungkan domain khusus dan terus membuat perubahan dengan menjelaskannya kepada Manus.
Apa bedanya ini dengan Figma Make?
Figma Make adalah produk dari Figma. Dengan Manus, proses yang didokumentasikan dimulai dengan tautan frame Figma dan permintaan untuk aplikasi web: ini bisa mencakup komponen backend, lalu Anda dapat mempublikasikan situs dan terus mengeditnya melalui percakapan.
Bisakah saya menggunakan output Figma ke Flutter atau Figma ke React Native?
Halaman ini membahas konversi Figma ke aplikasi web. Panduan impor menyebutkan HTML, CSS, dan JavaScript untuk frontend; panduan ini tidak mengonfirmasi output Flutter atau React Native.