Impor dari Figma

Impor bekerja berlawanan arah dengan ekspor: frame Figma yang sudah ada menjadi layar UXMagic yang bisa diedit, lalu Anda kembangkan dengan AI.

Langkah#

1. Hubungkan Figma dari Integrasi (koneksi OAuth — Anda memberi izin UXMagic sekali).
2. Tempel URL frame Figma, atau pilih berkas dan frame lewat pemilih.
3. Pilih apakah gaya milik frame itu diimpor sebagai tema proyek Anda, atau dipetakan ke tema yang sudah ada.
4. Impor.

Apa yang ikut#

• Tata letak dan hierarki, termasuk struktur auto layout.
• Teks, beserta gaya tipografinya.
• Warna dan efek, termasuk gradien dan bayangan.
• Gambar, disalin ke aset proyek Anda.
• Vektor dan ikon, dibangun ulang sebagai markup.

Apa yang bisa diharapkan#

Figma adalah kanvas vektor dan web adalah model kotak, jadi impor merupakan terjemahan yang setia, bukan salinan identik bit demi bit. Harapkan struktur dan spasi yang sangat dekat, dengan sedikit perbedaan pada perenderan teks dan pada efek yang tidak punya padanan langsung di web.

Impor paling akurat kalau frame Figma memakai auto layout. Tata letak bebas dengan posisi absolut tetap terimpor, tetapi dengan kesetiaan struktur yang lebih rendah.

Menyalin URL dengan benar#

Pilih frame di Figma, lalu klik kanan → Salin tautan ke pilihan. Tautan ke berkas tanpa simpul terpilih akan mengimpor hal yang salah, atau tidak sama sekali.

Setelah mengimpor#

Layar hasil impor berperilaku seperti layar lain: pengeditan lewat obrolan, mode edit, tema, versi, ekspor. Ini jalur tercepat untuk “kami sudah punya desain, tapi sekarang ingin bergerak lebih cepat”.

Sistem desain dan pustaka komponen#

Anda juga bisa mengimpor pustaka komponen atau sistem desain agar layar yang dibuat memakai komponen Anda. Lihat Pustaka komponen.