Bina aplikasi yang berfungsi daripada reka bentuk Figma

Jika aplikasi anda sudah direka dalam Figma, MonstarX boleh membinanya terus daripada reka bentuk itu. Anda mendapat aplikasi berfungsi yang kelihatan seperti skrin anda — dengan gambar dan ikon sebenarnya, warna dan tipografinya, serta navigasi prototaip anda — berserta data, borang dan log masuk yang tersirat dalam skrin itu.

Apakah yang saya perlukan?

Fail .fig bagi reka bentuk anda. Dalam Figma, buka reka bentuk itu dan gunakan File → Save local copy… — itulah fail yang dibaca oleh MonstarX. Ia mesti fail Figma Design: papan FigJam dan dek Figma Slides tidak disokong, dan MonstarX memberitahu anda jika anda menyeret salah satunya.

Bagaimanakah saya membina daripada fail Figma?

1. Di halaman Projek, klik Figma di sebelah Import (ia juga ada dalam menu Import). Anda juga boleh menyeret atau menampal fail .fig ke atas kotak prom.

   

2. Seret fail .fig anda masuk, atau pilih fail itu. MonstarX membacanya dalam pelayar anda — “Membaca fail…”, “Membuka setiap halaman…”, “Melukis skrin…” — dan belum ada apa-apa yang dimuat naik.

3. Tandakan skrin yang hendak dibina. Setiap halaman dalam fail disenaraikan dengan bingkainya dilukis dalam saiz kecil. Bingkai yang kelihatan seperti skrin sudah ditanda; halaman yang kelihatan seperti bahagian pengurusan reka bentuk (kulit depan, sistem reka bentuk, arkib) dilipat dan tidak ditanda. Gunakan Tandakan semua atau Nyahtanda semua bagi setiap halaman.

4. Dalam Apa yang patut dilakukan oleh aplikasi ini? (pilihan), nyatakan apa yang tidak dapat ditunjukkan oleh reka bentuk: siapa yang menggunakannya, dari mana datangnya data, apa yang berlaku apabila seseorang mendaftar atau membayar.

   

5. Semak model di penjuru kiri bawah (model daripada kotak prom; tukar di sini jika mahu).

6. Tekan Bina aplikasi ini · 4 skrin — atau Rancang dahulu, supaya MonstarX meneliti skrin dan bertanya tentang perkara yang tidak dapat ditunjukkan oleh reka bentuk sebelum membina.

Skrin dimuat naik (“Memuat naik reka bentuk…”), projek dicipta dan dinamakan mengikut fail, dan binaan pertama bermula.

Apakah yang diambil oleh MonstarX daripada reka bentuk saya?

• Setiap skrin sebagai gambar — supaya pembina MonstarX melihat dengan tepat apa yang anda lukis, dan membandingkan halamannya dengan gambar itu sepanjang kerja.
• Penerangan tepat setiap skrin — susun atur, jarak, setiap teks dengan fon dan saiznya, warna, sempadan, sudut, bayang.
• Gambar dan ikon anda — setiap imej dan ikon dalam reka bentuk menjadi fail dalam aplikasi, jadi tiada apa-apa yang ditukar dengan foto stok.
• Sistem reka bentuk anda — pemboleh ubah warna (terang dan gelap), tipografi, jejari sudut dan bayang.
• Komponen — butang yang digunakan pada sepuluh skrin menjadi satu komponen dalam aplikasi.
• Pautan prototaip — destinasi sesuatu ketikan menjadi navigasi sebenar.

Skrin yang berkongsi nama (aliran bingkai yang semuanya bernama “Desktop”) dibezakan melalui perkataan pertamanya, supaya anda tahu yang mana satu.

Petua

Pelbagai keadaan bagi satu halaman — dialog terbuka, senarai kosong, ralat — boleh dibawa sebagai bingkai tersendiri. MonstarX membinanya sebagai keadaan halaman itu, bukan sebagai halaman berasingan.

Apakah yang ditunjukkan dalam perbualan?

Permintaan pertama anda berbunyi, contohnya, “Bina aplikasi ini daripada reka bentuk Figma saya ‘bloom.fig’ (4 skrin: Selamat Datang, Laman Utama, Butiran Tumbuhan, Tambah Tumbuhan). Pastikan rupanya tepat seperti reka bentuk dan aplikasinya benar-benar berfungsi.”, dengan jalur skrin di bawahnya. Klik sesuatu skrin untuk melihatnya dalam saiz penuh, bersama saiz, halaman dan failnya. Semasa binaan, perbualan menunjukkan langkah seperti “Melihat reka bentuk Laman Utama” dan “Telah membandingkan / dengan reka bentuk Laman Utama”.

Bolehkah saya menambah lebih banyak skrin kemudian?

Boleh. Dalam perbualan projek, seret, tampal atau lampirkan fail .fig dan Tambahkan skrin daripada Figma dibuka. Tandakan skrin baharu, nyatakan apa fungsinya, dan tekan Bina skrin ini. Skrin itu menyertai reka bentuk projek dan dibina supaya sepadan dengan seluruh aplikasi. Sesebuah projek menyimpan sehingga 60 skrin reka bentuk.

Apakah hadnya?

Had	Nilai
Skrin bagi setiap binaan	sehingga 30
Skrin bagi setiap projek	sehingga 60
Gambar dan ikon bagi setiap reka bentuk	sehingga 400 fail dan 150 MB (8 MB setiap satu)

Fail .fig boleh mencapai 250 MB, tetapi fail yang sangat besar (seperti keseluruhan kit sistem reka bentuk) mungkin masih terlalu berat untuk dibuka oleh pelayar. Pindahkan skrin aplikasi anda ke fail tersendiri, tanpa halaman sistem reka bentuk, dan simpan salinan setempat fail itu.

Soalan lazim

Bolehkah saya menampal pautan Figma dan bukannya fail?

Tidak dalam dialog ini — ia membaca fail .fig itu sendiri. Gunakan File → Save local copy… dalam Figma. (Sesetengah alat reka bentuk juga boleh menghantar kerjanya melalui Ejen pengekodan anda.)

Adakah reka bentuk saya dimuat naik apabila saya menyeretnya masuk?

Tidak. Fail itu dibaca dalam pelayar anda; hanya skrin yang anda tandakan dimuat naik, apabila anda menekan butang bina.

Adakah aplikasi itu akan kelihatan sama tepat seperti reka bentuk?

Itulah matlamatnya: pembina MonstarX memadankan setiap skrin berdasarkan nilai tepatnya dan membandingkan halamannya dengan skrin anda sepanjang binaan. Anda boleh menunjukkan perbezaan dalam perbualan atau membetulkannya dengan Mod suntingan.

Reka bentuk saya hanya menunjukkan skrin telefon. Apakah yang berlaku pada komputer?

Reka bentuk telefon dibina sebagai lajur di tengah pada skrin lebar, jadi aplikasi itu tetap berfungsi pada komputer.

MonstarX mengatakan fail saya bukan fail Figma. Mengapa?

Fail itu mungkin papan FigJam, dek Figma Slides, atau fail .fig daripada program lain. Buka reka bentuk itu dalam Figma dan gunakan File → Save local copy… untuk menyimpan fail Figma Design.

Berkaitan

Reka bentuk dahuluBelum ada reka bentuk? Pilih rupa daripada paparan yang dilukis.

Rancang dahuluSoalan tentang perkara yang tidak dapat ditunjukkan oleh reka bentuk.

Mod suntinganPerhalusi rupa dengan mengklik pada halaman.

Import aplikasiAda kod dan bukannya reka bentuk?