Advan – Jika kamu sedang mencari cara membuat wireframe dengan Figma, kamu datang ke tempat yang tepat. Mari kita mulai dari dasar dan pelajari semua yang perlu kamu ketahui.
Seperti yang kamu tahu, Figma adalah alat desain yang sangat populer, terutama di kalangan desainer UI/UX.
Ini merupakan aplikasi berbasis web yang memungkinkan kamu membuat desain secara kolaboratif dengan tim-mu.
Figma juga tersedia sebagai aplikasi desktop untuk Windows dan macOS.
Cara Mengunduh Figma
Sebelum kita mulai membuat wireframe dengan Figma, kita perlu mengunduh dan menginstal Figma. Berikut langkah-langkahnya:
1. Kunjungi Situs Figma:
- Buka browser dan pergi ke [figma.com](https://figma.com).
2. Daftar atau Login:
Jika kamu belum punya akun, kamu perlu mendaftar terlebih dahulu.
- Klik “Sign up” dan ikuti instruksi yang diberikan.
- Jika sudah punya akun, klik “Login” dan masukkan detail akunmu.
3. Unduh Aplikasi Desktop:
Setelah masuk di halaman utama, kamu lihat opsi untuk mengunduh aplikasi desktop.
- Klik “Download Figma Desktop App” dan pilih versi yang sesuai dengan sistem operasimu (Windows atau macOS).
4. Instal Aplikasi:
Setelah selesai mengunduh, buka file instalasi dan ikuti petunjuk untuk menginstal aplikasi di komputermu.
Mudah bukan?
Membuat Wireframe dengan Figma
Sekarang setelah kamu memiliki Figma, yuk kita mulai membuat wireframe.
Wireframe adalah kerangka sederhana dari desain yang menunjukkan struktur dasar dari halaman atau aplikasi yang sedang kamu desain.
1. Membuat Proyek Baru
- Buka Figma:
Buka aplikasi Figma yang telah kamu instal atau buka [figma.com] (https://figma.com) di browser.
- Buat File Baru:
Klik tombol “New File” untuk membuat file desain baru.
2. Menyiapkan Canvas
- Atur Ukuran Canvas:
Tentukan ukuran canvas sesuai kebutuhanmu. Biasanya, ukuran standar untuk wireframe web adalah 1440px x 1024px.
- Tambahkan Frame:
Klik ikon “Frame” di toolbar atau tekan `F` pada keyboard.
Pilih ukuran frame yang sesuai dengan perangkat yang akan kamu desain, misalnya “Desktop” untuk desain web atau “iPhone” untuk desain aplikasi mobile.
3. Membuat Komponen Dasar
- Tambahkan Kotak dan Teks:
Gunakan alat “Rectangle” (R) untuk membuat kotak yang akan mewakili elemen-elemen seperti header, footer, sidebar, dll.
Lalu klik “Text” (T) untuk menambahkan teks yang menjelaskan setiap elemen.
- Gunakan Placeholder:
Untuk gambar, pakai kotak berwarna abu-abu sebagai placeholder.
Ini membantu kamu fokus pada struktur tanpa terlalu memperhatikan detail visual.
4. Menggunakan Komponen dan Layout
- Komponen:
Figma memiliki fitur “Components” yang memungkinkan kamu membuat elemen reusable.
Misalnya nih, kamu bisa membuat tombol sekali dan menggunakannya di berbagai tempat dalam desainmu.
Untuk membuat komponen, pilih elemen yang ingin kamu jadikan komponen, klik kanan, lalu pilih “Create Component”.
- Auto Layout:
Fitur ini sangat berguna untuk menjaga konsistensi dan membuat perubahan lebih mudah.
Kalau kamu menambahkan lebih banyak konten, auto layout akan menyesuaikan elemen secara otomatis.
Pilih elemen atau grup elemen, klik kanan, dan pilih “Add Auto Layout“.
Baca juga: Cara Mendesain Website dengan AI, Mudah Anti Ribet dan Gratis
5. Menyusun Wireframe
- Susun Elemen:
Susun semua elemen yang telah kamu buat di frame sesuai dengan alur yang kamu pengin.
Pastikan untuk menjaga struktur yang logis dan mudah dipahami.
- Tambahkan Navigasi:
Jangan lupa untuk menambahkan elemen navigasi seperti menu dan link antar halaman.
6. Kolaborasi dan Feedback
- Bagikan Desain:
Figma memudahkan kamu untuk berbagi desain dengan tim atau klien.
Klik tombol “Share” di sudut kanan atas dan salin link yang diberikan.
- Berikan dan Terima Feedback:
Fitur komentar di Figma memungkinkan anggota tim memberikan feedback langsung pada desain.
Klik ikon “Comment” dan tambahkan komentar pada bagian yang ingin kamu beri masukan.
Membuat wireframe dengan Figma menjadi proses yang menyenangkan dan efisien.
Dengan fitur-fitur canggih seperti real-time collaboration, components, dan auto layout, Figma membuat pekerjaan desain menjadi lebih mudah dan cepat.
Buat karya pertama kamu di Figma bersama Laptop Advan Workplus. Perangkat yang membuatmu nyaman saat membuat konten dengan dual cooling system.
Laptop ini gak akan panas dan ngambek kalau sekedar dipake desain UI/UX di Figma.
Ditambah dengan sensor fingerprint, perangkat ini lebih bernilai plus. Tentu saja, data yang kamu simpan akan menjadi lebih aman.
Tidak perlu diragukan lagi, prosesor Advan Worplus mengusung AMD Ryzen 5 6600H / AMD Ryzen 7 7735HS dan GPU : AMD Integrated graphics.
Jadi, tunggu apalagi? Mudahkan pekerjaan desainmu dengan perangkat yang mendukung ini.***
Editor: Sabila J. Firda