TUTORIAL MEMBUAT WIREFRAME

 1. Buka Figma

- Masuk ke Figma lewat browser atau aplikasi desktop.
- Klik New Design File untuk membuat canvas baru.

2. Buat Frame untuk Desktop

- Pilih Frame Tool (F).
- Di panel kanan, pilih ukuran layar Desktop (misalnya 1440x1024 px).
- Frame ini akan menjadi halaman utama wireframe.

3. Tentukan Struktur Dasar (Layout Grid)

- Aktifkan grid:
- Klik frame → panel kanan → Layout Grid → tambahkan Columns (12 kolom).
- Gunakan grid untuk menata elemen agar rapi.

4. Tambahkan Bagian Utama

- Gunakan Rectangle (R), Line (L), dan Text (T) untuk blok dasar:
- Header / Navbar (di bagian atas): buat persegi panjang lebar. Tambahkan placeholder logo, menu, dan tombol.
- Hero Section: area besar di bawah navbar untuk judul utama, teks, dan gambar ilustrasi.
- Content Section: buat blok untuk card produk, artikel, atau informasi utama.
- Sidebar (opsional): jika ingin desain seperti dashboard.
- Footer: buat persegi panjang di bawah halaman.

5. Gunakan Placeholder

- Karena wireframe fokus ke struktur, bukan visual detail:
- Gambar → gunakan kotak dengan ikon X.
- Teks → tulis Lorem ipsum atau gunakan garis pendek untuk menandai teks.
- Tombol → persegi panjang dengan label “Button”.

6. Duplikasi Halaman

- Kalau ingin lebih dari satu halaman (misalnya Home, About, Product, Contact):
- Klik kanan frame → Duplicate.
- Ubah isi sesuai kebutuhan.

7. Tambahkan Interaksi (Opsional)

- Klik elemen (misalnya tombol) → tab Prototype → sambungkan ke halaman lain.
- Ini membantu saat presentasi flow website.

8. Rapikan & Simpan

- Gunakan nama jelas: “Home Wireframe”, “Product Page Wireframe”, dll.
- Simpan file → otomatis tersimpan di Figma Cloud.