Tutorial Membuat Wireframe di Figma

Apa itu Wireframe?

Wireframe adalah kerangka visual dari sebuah antarmuka (UI) yang menggambarkan bagaimana elemen-elemen akan ditempatkan pada halaman aplikasi/website.
Wireframe tidak berfokus pada warna, font, atau desain estetik, tapi lebih ke:

Struktur layout
Hirarki informasi
Alur interaksi pengguna

Ibaratnya: blueprint pada bangunan → sebelum rumah dicat dan diisi perabot, arsitek bikin denahnya dulu.

Tujuan Wireframe

Membantu perencanaan struktur → menata elemen agar informasi mudah dipahami.
Komunikasi tim → biar semua anggota (desainer, developer, klien) punya gambaran yang sama.
Menghemat waktu & biaya → lebih cepat revisi sketsa dibanding desain penuh.
Dasar untuk prototyping → dari wireframe bisa dilanjutkan ke prototype interaktif.

Jenis Tingkat Fidelity

Low-Fidelity Wireframe
- Tampak seperti coretan tangan/kotak sederhana.
- Fokus pada layout & alur navigasi.
- Contoh: kotak untuk gambar, garis untuk teks.
Mid-Fidelity Wireframe
- Lebih detail, pakai software desain (Figma, Balsamiq, Adobe XD).
- Sudah ada placeholder teks & ikon.
- Bisa menunjukkan proporsi lebih akurat.
High-Fidelity Wireframe
- Hampir menyerupai desain final.
- Sudah ada font mirip final, grid, dan komponen detail.
- Kadang disebut juga mockup kalau sudah mendekati desain akhir.

Elemen yang Biasa Ada di Wireframe

Header / Navigation Bar → logo, menu navigasi, search bar.
Hero Section → area atas, biasanya gambar/banner + teks utama.
Sidebar → menu tambahan, filter, kategori.
Main → Inti website dengan produk apa saja yang ditawarkan, kategori produk, dan flash sale.
Footer → info tambahan (kontak, link, sosial media).

Oke sekarang kita akan membuat tutorial membuat WIREFRAME

Langkah pertama kita masuk kedalam figma boleh melalui web atau aplikasi (jika aplikasi download di app store atau yang lainnya).

Selanjutnya masuk kedalam desain pilih tab Design

Tampilan desain awal akan seperti ini

Lalu tambahkan frame dengan memencet tool frame lalu pilih ukuran frame yang ingin digunakan

pilih frame yang ingin digunakan, karena kita akan membuat berbasis web maka kita pikih dekstop (diesesuaikan)

Tampilan berikutnya akan seperti dibawah ini ukuran dimensions yaitu 1440 x 1024

Membuat Header dan Navigation

Lalu tambahkan pesergi panjang dengan rectangle di shape tool gunakan ukuran 1440x420

Tambhkan rectangle untuk membuat logo disebelah kiri atas ukuran 142x72 dengan corner radius 45

Tambahkan juga yang serupa untuk About us, Find us, dan All Campaigns dengan ukuran 189x31

Dan tambahkan elips pada shape tool dengan ukuran diameter 47 untuk tanda keranjang dan akun yang digunakan, agar lingkaran simetris klik shift saat membuat lingkaran

Tampilan berikutnya akan seperti ini

Membuat Hero Section

Karena Hero Section satu tempat dengan Header dan navigation kita tambahkan rectagle untuk menandakan tempat teks dengan ukuran 771x154

Tambahkan juga kotak dibawah untuk tanda order now dengan ukuran 264x42

Tambahkan juga pesergi panjang untuk tempat banner produk dengan ukuran 424x246

Membuat Sidebar

Dihalaman ini adalah menu yang dijualkan kita tambahkan layout untuk penempatan menu dengan persegi panjang ukuran 1440x139

Tambahkan pola untuk tanda menu diatas layout, biasa saja jangan terlalu besar maupun terlalu kecil dengan ukuran 229x43, corner radius 45

Lalu beri persegi dengan jumlah menu yang dijualkan seperti biasa gunakan shape tool rectangle ukuran 86x86 agar simetris jangan lupa gunakan shift dan diduplikat (Ctrl D) sesuai yang diinginkan