Bangun aplikasi yang berfungsi dari desain Figma

Jika aplikasi Anda sudah didesain di Figma, MonstarX dapat membangunnya langsung dari desain itu. Anda mendapatkan aplikasi yang berfungsi dan tampak seperti layar-layar Anda — dengan gambar dan ikon aslinya, warna dan tipografinya, serta navigasi prototipe Anda — ditambah data, formulir, dan fitur masuk yang tersirat dari layar-layar tersebut.

Apa yang saya perlukan?

File .fig dari desain Anda. Di Figma, buka desainnya dan pilih File → Save local copy… — perintah ini menyimpan file yang dibaca MonstarX. File tersebut harus berupa file Figma Design: papan FigJam dan presentasi Figma Slides tidak didukung, dan MonstarX akan memberi tahu jika Anda meletakkan salah satunya.

Bagaimana cara membangun dari file Figma?

1. Di halaman Proyek, klik Figma di samping Impor (tombol ini juga ada di menu Impor). Anda juga dapat menyeret atau menempelkan file .fig ke kotak prompt.

   

2. Letakkan file .fig Anda, atau pilih file. MonstarX membacanya di browser Anda — “Membaca file…”, “Membuka setiap halaman…”, “Menggambar layar…” — dan belum ada yang diunggah.

3. Centang layar yang akan dibangun. Setiap halaman file ditampilkan beserta frame-nya dalam ukuran kecil. Frame yang tampak seperti layar sudah tercentang sejak awal; halaman yang tampak seperti bagian pengelolaan desain (sampul, sistem desain, arsip) tertutup dan tidak tercentang. Gunakan Centang semua atau Hapus centang semua per halaman.

4. Di Apa yang harus dilakukannya? (opsional), jelaskan hal yang tidak terlihat di desain: siapa penggunanya, dari mana datanya, dan apa yang terjadi saat seseorang mendaftar atau membayar.

   

5. Periksa model di pojok kiri bawah (model dari kotak prompt; ganti di sini jika mau).

6. Tekan Langsung bangun · 4 layar — atau Rencanakan dulu, agar MonstarX mempelajari layar-layarnya dan menanyakan hal yang tidak terlihat di desain sebelum membangun.

Layar-layar diunggah (“Mengunggah desain…”), proyek dibuat dan dinamai sesuai nama file, lalu proses membangun pertama dimulai.

Apa saja yang diambil MonstarX dari desain saya?

• Setiap layar sebagai gambar — sehingga MonstarX melihat persis apa yang Anda gambar, dan membandingkan halaman buatannya dengan gambar itu selama bekerja.
• Deskripsi presisi setiap layar — tata letak, jarak, setiap teks beserta font dan ukurannya, warna, garis tepi, sudut, dan bayangan.
• Gambar dan ikon Anda — setiap gambar dan ikon dalam desain menjadi file di aplikasi, jadi tidak ada yang diganti dengan foto stok.
• Sistem desain Anda — variabel warna (terang dan gelap), tipografi, radius sudut, dan bayangan.
• Komponen — tombol yang dipakai di sepuluh layar menjadi satu komponen di aplikasi.
• Tautan prototipe — tujuan sebuah ketukan menjadi navigasi sungguhan.

Layar dengan nama yang sama (rangkaian frame yang semuanya bernama “Desktop”) dibedakan berdasarkan kata-kata pertamanya, sehingga Anda tahu mana yang mana.

Tips

Keadaan dari satu halaman — dialog yang terbuka, daftar kosong, pesan kesalahan — dapat disertakan sebagai frame tersendiri. MonstarX membangunnya sebagai keadaan dari halaman itu, bukan sebagai halaman terpisah.

Apa yang ditampilkan di percakapan?

Permintaan pertama Anda berbunyi, misalnya, Bangun aplikasi ini dari desain Figma saya “bloom.fig” (4 layar: Selamat datang, Beranda, Detail tanaman, Tambah tanaman). Buat tampilannya sama persis dengan desain dan benar-benar berfungsi., dengan deretan layar di bawahnya. Klik sebuah layar untuk melihatnya dalam ukuran penuh, beserta ukuran, halaman, dan filenya. Selama proses membangun, percakapan menampilkan langkah seperti “Sedang melihat desain Beranda” dan “/ telah dibandingkan dengan desain Beranda”.

Bisakah saya menambahkan layar lain nanti?

Bisa. Di percakapan proyek, seret, tempel, atau lampirkan file .fig, dan jendela Tambahkan layar dari Figma akan terbuka. Centang layar baru, jelaskan fungsinya, lalu tekan Bangun layar ini. Layar-layar itu bergabung dengan desain proyek dan dibangun agar serasi dengan bagian aplikasi lainnya. Satu proyek dapat menyimpan hingga 60 layar desain.

Apa saja batasnya?

Batas	Nilai
Layar per proses membangun	hingga 30
Layar per proyek	hingga 60
Gambar dan ikon per desain	hingga 400 file dan 150 MB (masing-masing 8 MB)

File .fig boleh berukuran hingga 250 MB, tetapi file yang sangat besar (misalnya kit sistem desain lengkap) tetap bisa terlalu berat untuk dibuka browser. Pindahkan layar-layar aplikasi Anda ke file tersendiri, tanpa halaman sistem desain, lalu simpan salinan lokal file tersebut.

Pertanyaan umum

Bisakah saya menempelkan tautan Figma alih-alih file?

Tidak di dialog ini — dialog ini membaca file .fig itu sendiri. Pilih File → Save local copy… di Figma. (Beberapa alat desain juga dapat mengirim hasil kerjanya melalui Agen pemrograman Anda.)

Apakah desain saya diunggah saat saya meletakkannya?

Tidak. File dibaca di browser Anda; hanya layar yang Anda centang yang diunggah, saat Anda menekan tombol bangun.

Apakah aplikasinya akan tampak persis seperti desain?

Itulah tujuannya: MonstarX mencocokkan setiap layar berdasarkan nilai-nilai pastinya dan membandingkan halaman buatannya dengan layar Anda selama membangun. Anda dapat menunjukkan perbedaannya di percakapan atau memperbaikinya dengan Mode edit.

Desain saya hanya berisi layar ponsel. Bagaimana tampilannya di komputer?

Desain ponsel dibangun sebagai kolom di tengah pada layar lebar, sehingga aplikasi tetap berfungsi di komputer.

MonstarX mengatakan file saya bukan file Figma. Mengapa?

File itu mungkin papan FigJam, presentasi Figma Slides, atau file .fig dari program lain. Buka desainnya di Figma dan pilih File → Save local copy… untuk menyimpan file Figma Design.

Terkait

Desain duluBelum punya desain? Pilih tampilan dari layar yang digambar.

Rencanakan duluPertanyaan tentang hal yang tidak terlihat di desain.

Mode editSempurnakan tampilan dengan mengeklik langsung di halaman.

Impor aplikasiPunya kode, bukan desain?