Kotak Pembatas
Ikhtisar
Kotak pembatas adalah model interaksi inti dari Rekayasa Balik. Setelah mengunggah gambar, Anda menggambar kotak persegi panjang di sekitar elemen UI individual untuk mengisolasinya. Setiap kotak pembatas menjadi wilayah yang dapat dipilih yang dapat ditetapkan perilaku, dikonversi ke kode, atau diekspor sebagai komponen wireframe.
Alur Layar & Grup
Kanvas Alur Layar memungkinkan Anda mengatur pekerjaan rekayasa balik ke dalam grup. Setiap grup dapat berisi beberapa gambar layar dan dapat ditipkan sebagai Layar (halaman utama, bagian, atau tampilan) atau Modal (overlay, dialog, popup, drawer). Klik dua kali grup untuk membukanya dan bekerja dengan gambar-gambarnya.
Pengotakan Manual
Pilih Alat Kotak
Pilih alat menggambar kotak pembatas dari toolbar di atas kanvas gambar.
Gambar Kotak
Klik dan seret pada gambar untuk menggambar kotak persegi panjang di sekitar elemen UI — tombol, kartu, bilah navigasi, bagian hero, atau komponen apa pun.
Ubah Ukuran & Sesuaikan
Seret tepi atau sudut kotak apa pun untuk menyempurnakan posisi dan ukurannya. Pastikan kotak membungkus elemen target dengan ketat.
Tetapkan Perilaku
Pilih kotak dan tentukan apa yang harus dilakukan elemen — misalnya, "membuka modal," "menavigasi ke /about," atau "toggle menu dropdown."
Auto-Boxing AI
Alih-alih menggambar setiap kotak secara manual, gunakan auto-boxing AI agar Kaiju Hub AI secara otomatis mendeteksi dan menguraikan elemen UI dalam gambar Anda. AI menganalisis tata letak visual dan membuat kotak pembatas di sekitar komponen yang terdeteksi seperti header, tombol, kartu, input, gambar, dan item navigasi.
Deteksi Satu-Klik
Klik tombol auto-box dan AI memindai seluruh gambar, membuat kotak pembatas di sekitar setiap elemen UI yang terdeteksi.
Edit Setelah Deteksi
Kotak yang terdeteksi otomatis dapat diedit sepenuhnya. Pindahkan, ubah ukuran, hapus, atau tambahkan kotak baru untuk menyempurnakan hasil.
Deteksi Ulang Selektif
Jalankan deteksi otomatis pada wilayah tertentu dari gambar jika Anda hanya membutuhkan kotak untuk sebagian tata letak.
Mengarahkan Perilaku
Kekuatan kotak pembatas adalah dalam mengarahkan apa yang dilakukan setiap elemen. Setelah mengotak elemen, Anda dapat menetapkan perilaku interaktif yang akan tercermin dalam kode atau wireframe yang dihasilkan:
Membuka Modal
Mengklik elemen membuka modal/dialog. Tentukan konten apa yang harus ditampilkan modal.
Navigasi ke Bagian
Elemen berfungsi sebagai tautan atau tombol yang menavigasi ke halaman atau bagian lain dari aplikasi.
Toggle Konten
Elemen menampilkan atau menyembunyikan konten terkait — dropdown, akordeon, panel yang dapat diperluas.
Pengiriman Formulir
Elemen memicu validasi formulir dan logika pengiriman.
Tindakan Kustom
Tentukan deskripsi perilaku kustom apa pun dan AI akan menghasilkan event handler dan logika yang sesuai.