"wireframe"

 

📌 Materi: Cara Membuat Wireframe di Figma (Sederhana untuk Pemula)

1. Apa Itu Wireframe?

Wireframe adalah kerangka rancangan awal dari tampilan aplikasi atau website yang menunjukkan struktur dasar dan elemen penting tanpa desain visual yang lengkap.

---

2. Persiapan Sebelum Membuat Wireframe

Sebelum mulai di Figma, siapkan hal-hal berikut:

• Tujuan halaman (misalnya: halaman login, homepage, dll)

• Daftar elemen (navbar, tombol, form input, dsb)

• Akun Figma (gratis di https://figma.com)

---

3. Langkah-Langkah Membuat Wireframe di Figma

✅ Langkah 1: Buat File Baru

• Buka https://figma.com

• Klik “New Design File” untuk memulai proyek baru

✅ Langkah 2: Buat Frame (Artboard)

• Pilih alat Frame (F) di toolbar kiri

• Pilih ukuran perangkat (misalnya: Desktop, iPhone 13, dsb)

✅ Langkah 3: Tambahkan Elemen Dasar

Gunakan tools di Figma untuk menggambar elemen wireframe:

Elemen	Alat Figma	Keterangan
Kotak (Box)	Rectangle (R)	Untuk kontainer, gambar, tombol
Teks	Text (T)	Untuk judul, label, placeholder
Garis pemisah	Line (L)	Untuk membagi bagian layout
Lingkaran/Icon	Ellipse (O)	Untuk avatar, tombol ikon

Gunakan warna abu-abu atau outline saja, agar terlihat seperti wireframe, bukan desain final.

✅ Langkah 4: Susun Layout

• Atur elemen sesuai layout umum (misal: header, body, footer)

• Gunakan fitur Align dan Spacing untuk merapikan

✅ Langkah 5: Gunakan Komponen & Placeholder

• Gunakan komponen tombol jika perlu (untuk konsistensi)

• Gunakan placeholder teks seperti: “Judul”, “Isi konten”, “Button”

✅ Langkah 6: Kelompokkan & Duplikat

• Group (Ctrl/Cmd + G) untuk merapikan elemen

• Duplicate (Ctrl/Cmd + D) untuk membuat halaman lain dengan layout serupa

---

4. Tips Wireframe yang Efektif

• Jangan terlalu fokus pada warna/desain – fokus pada struktur

• Gunakan label/teks yang menjelaskan fungsi

• Buat wireframe untuk beberapa skenario (misal: versi mobile & desktop)

---

5. Contoh Sederhana (Wireframe Homepage)

---

6. Simpan & Bagikan

• Klik “Share” untuk membagikan link

• Gunakan fitur Comment untuk mendapat masukan

---

7. Tambahan: Gunakan Template Jika Perlu

Figma juga menyediakan template wireframe gratis:

• Klik “Explore Community” → cari "Wireframe template"

• Duplicate ke akun Anda dan modifikasi