Editor Kanvas
Kanvas pengeditan wireframe adalah tempat Anda mendesain dan menyempurnakan layar Anda. Sidebar kiri berisi semua alat menggambar dan pemilihan, tengah adalah kanvas tempat Anda menempatkan dan mengatur elemen, dan sidebar kanan menampilkan properti elemen yang dipilih.
Alat
Pilih
Klik untuk memilih dan memindahkan elemen di kanvas. Elemen yang dipilih menampilkan propertinya di sidebar kanan.
Persegi
Gambar elemen wadah persegi panjang di kanvas.
Lingkaran
Gambar elemen lingkaran di kanvas.
Teks
Tambahkan label teks dan blok konten.
Gambar
Tempatkan elemen placeholder gambar.
Tombol
Tambahkan elemen tombol interaktif.
Input
Tambahkan bidang input formulir.
+ (Tambah Layar)
Tambahkan layar baru ke proyek wireframe.
Elemen Terkunci
Layar yang dihasilkan AI datang terkunci secara default — elemen tidak dapat dipindahkan atau diubah ukurannya sampai dibuka kuncinya. Tekan Ctrl + D untuk membuka kunci semua elemen di layar saat ini, memberi Anda kontrol penuh untuk mengatur ulang dan mengeditnya.
Mode Storyboard
Mode storyboard memungkinkan Anda melihat semua bingkai dan titik koneksinya dalam tampilan mata burung. Beralih antara kanvas layar tunggal dan mode storyboard menggunakan tombol yang sama di sidebar kiri. Dalam mode storyboard, setiap layar ditampilkan sebagai kartu dengan pratinjau tata letaknya.
Fitur Storyboard
Ikhtisar Bingkai
Lihat semua layar secara sekilas dengan jumlah elemen dan pratinjau visualnya.
Atur Modal
Tandai layar apa pun sebagai overlay modal alih-alih halaman penuh.
Klik untuk Edit
Klik kartu bingkai apa pun untuk masuk ke tampilan kanvasnya untuk pengeditan detail.
Kontrol Zoom
Gunakan kontrol zoom di sebelah kiri untuk memperbesar/memperkecil storyboard.
Koneksi Alur
Visualisasikan bagaimana layar terhubung melalui tindakan alur antar bingkai.
Properti Elemen
Klik dua kali elemen kanvas mana pun untuk memasukinya dan membuka panel propertinya di bilah sisi kanan. Panel ini memiliki tiga tab: Properti, Alur, dan Warna. Dari sini Anda dapat mengedit posisi, ukuran, gaya, dan perilaku setiap elemen.
Tab Properti
Posisi (X, Y)
Atur posisi piksel yang tepat dari elemen di kanvas.
Ukuran (Lebar, Tinggi)
Atur dimensi elemen dalam piksel.
Z-Index (Urutan Lapisan)
Kontrol elemen mana yang muncul di atas yang lain.
Border Radius
Atur pembulatan sudut dengan nilai numerik atau gunakan preset Sharp, Rounded, atau Pill.
Konten Teks
Edit teks yang ditampilkan di dalam elemen.
Tab Warna
Kustomisasi warna latar belakang, border, dan teks untuk elemen yang dipilih.
Alur
Alur mendefinisikan tindakan dan navigasi antar layar. Alur adalah tindakan seperti menavigasi ke halaman lain, membuka modal, atau routing ke area yang berbeda. Ikon tautan kecil di kanvas menunjukkan elemen mana yang memiliki alur terlampir. Bingkai secara otomatis ditautkan satu sama lain selama pembuatan AI, dan koneksi alur juga dibuat.
Menyiapkan Alur
Pilih Elemen
Klik elemen yang ingin Anda tambahkan alur.
Buka Tab Alur
Di sidebar kanan, beralih ke tab Alur untuk melihat koneksi yang ada atau menambahkan yang baru.
Tambah Koneksi
Klik Tambah Koneksi Pertama (atau tombol +) untuk membuat alur baru. Pilih layar target atau bingkai untuk ditautkan.
Lihat di Kanvas
Elemen yang terhubung menampilkan ikon tautan kecil di kanvas untuk menunjukkan bahwa mereka memiliki tindakan alur.
Koneksi Blok
Koneksi Blok memungkinkan Anda melampirkan blok dari Pustaka Blok langsung ke elemen wireframe. Saat Anda mengklik dua kali elemen dan menggulir ke bawah di panel properti, Anda akan menemukan bagian Koneksi Blok. Klik + Tambah Blok untuk menautkan blok (HTML, komponen, atau template) ke elemen. Blok yang terhubung direferensikan saat menghasilkan kode dengan AI, memudahkan untuk melampirkan kode HTML atau komponen tertentu ke elemen wireframe.
Pengeditan AI
Bilah prompt AI di bagian bawah kanvas memungkinkan Anda menggunakan AI untuk mengedit atau membuat layar. Pilih model AI Anda dari dropdown di sebelah kiri, jelaskan perubahan yang Anda inginkan, dan AI akan memodifikasi wireframe untuk Anda. Anda juga dapat menggunakan input suara atau tombol Edit CLI untuk pengeditan lanjutan.
Prompting Sadar Konteks
Layar Tunggal
Saat mengedit layar tunggal, bilah prompt menampilkan "Editing 'Screen Name'" dan perubahan AI hanya berlaku untuk layar tersebut.
Storyboard
Saat dalam mode storyboard, AI dapat mengedit semua bingkai sekaligus atau membangun bingkai baru menggunakan yang ada sebagai referensi.
Input Suara
Gunakan ikon mikrofon di bilah prompt untuk mendiktekan instruksi Anda alih-alih mengetik.
Edit CLI
Klik Edit CLI untuk mode pengeditan tingkat lanjut dengan lebih banyak kontrol atas perubahan bertenaga AI.
Ekspor & Integrasi
Wireframe dapat diekspor, diimpor, atau digunakan langsung saat membuat proyek atau di dalam Hub Proyek. Ini memudahkan transisi dari desain wireframe ke proyek yang berfungsi tanpa membuat ulang desain secara manual.