Apa itu Alat Wireframe?

Sketsa tata letak halaman dan mockup UI dalam hitungan detik. Seret elemen UI umum — tombol, blok teks, gambar, input — ke kanvas, lalu ekspor sebagai PNG atau simpan sebagai JSON untuk melanjutkan pengeditan nanti.

Kanvasnya dibangun di atas fabric.js dan membawa set elemen lengkap: persegi panjang, blok teks, tombol, placeholder gambar, kolom input, navbar, kartu, checkbox, dropdown, grup radio, bilah progres, slider, dan catatan tempel untuk anotasi. Zoom dan sesuaikan ke layar menjaga tata letak padat tetap terbaca, dan kamu bisa membingkai kanvas pada lebar ponsel, tablet, atau desktop. Undo, redo, group, ungroup, dan pengaturan z-order semuanya bisa diakses lewat keyboard. Ekspor PNG atau SVG untuk dibagikan, atau JSON yang membuka kembali file dalam kondisi yang sama.

Cara menggunakan

1. Pilih elemen UI dari toolbar — seperti persegi panjang, blok teks, tombol, placeholder gambar, atau kolom input — lalu klik kanvas untuk menempatkannya.
2. Seret elemen untuk memposisikan ulang, ubah ukuran dengan menarik pegangan, dan edit teks dengan klik ganda. Kelompokkan elemen bersama untuk kemudahan pemindahan.
3. Ekspor wireframe Anda sebagai gambar PNG untuk dibagikan, atau simpan sebagai JSON agar bisa dimuat ulang dan dilanjutkan pengeditannya nanti.

Kapan menggunakan

• Sketsa tiga varian layar dalam 15 menit sebelum review dengan stakeholder.
• Menempelkan coretan ide di Slack alih-alih menjelaskan layout dengan kata-kata.
• Mengajari desainer junior bedanya kerja low-fidelity dan high-fidelity.

Hasil

Seorang manajer produk membuat sketsa layar login aplikasi mobile dengan placeholder logo, kolom input email dan kata sandi, tombol masuk, dan tautan "lupa kata sandi" — lalu mengekspor PNG untuk dibagikan di saluran Slack.

FAQ

Apa bedanya tool ini dengan Figma?

Figma untuk high-fidelity dengan komponen, prototipe, dan kolaborasi tim lengkap. Tool ini sengaja low-fidelity: hanya satu set kecil bentuk primitif dan tidak menyeret kamu ke detail styling. Ide layar selesai dalam hitungan menit, bukan sore penuh. Outputnya untuk menjernihkan pikiran, bukan handoff ke developer.

Cara menggeser elemen per-piksel?

Pilih elemen lalu tekan tombol panah untuk menggeser 1 piksel. Tahan Shift bersama panah untuk lompatan 10 piksel. Untuk mengubah ukuran, tarik gagang di sudut; tahan Shift saat menarik supaya rasio terjaga.

Bisa menyalin elemen dari satu wireframe ke wireframe lain?

Ekspor keduanya ke JSON, buka di editor teks, lalu salin entri array elements yang kamu butuhkan dari file pertama ke file kedua. Impor ulang dan bentuk barunya muncul. Kebanyakan orang malah cukup pakai Ctrl+D di file yang sama tanpa repot edit JSON.

Kenapa JSON kadang lebih besar dari PNG?

JSON menyimpan semua properti tiap bentuk (posisi, isian, garis, font, teks) sebagai teks yang bisa dibaca. PNG cuma satu gambar raster datar. Pada wireframe yang penuh teks, JSON bisa mengalahkan PNG, tapi hanya JSON yang membiarkan kamu lanjut mengedit nanti.

Apa bisa menambahkan bentuk kustom milik sendiri?

Tidak ada opsi langsung di dalam tool, tapi kamu bisa mengelompokkan primitif yang ada (Ctrl+G) menjadi unit pakai-ulang seperti search bar atau strip tab. Simpan JSON, salin bagian grup itu, lalu tempel di file baru, jadi semacam mini library pribadi.

Alat terkait