Latihan Menggambar Wireframe Secara Digital
Sekarang adalah saat yang ditunggu-tunggu, yakni latihan membuat Wireframe digital menggunakan tool bernama Figma. Namun, jika Anda ingin menggunakan tool lain, itu tidak masalah. Hal yang paling penting adalah Anda paham konsep dasarnya. Mari kita mulai dengan membuat akun di Figma pada halaman berikut: Figma. Silakan klik Create one untuk mendaftar. Anda bisa menggunakan akun Google ataupun email dan password lain. Apabila Anda seorang siswa/mahasiswa, lakukan pendaftaran sebagai Figma Education pada halaman berikut: Figma Education. Dengan mendaftar akun Figma Education, Anda akan mendapatkan akses secara penuh ke semua fitur sebagaimana akun Professional tanpa dipungut biaya apa pun. Setelah akun Anda siap, mari kita berlatih untuk mengubah Wireframe kertas menjadi Wireframe digital. Sebelum mulai, kita perlu menyiapkan proyek yang ingin dibuat dengan langkah-langkah di bawah ini:Menyiapkan Project
-
Buka Figma dan buat project baru dengan klik Design file pada kanan atas halaman.
Jika Anda sudah masuk ke project lain, klik Logo Figma di kiri atas → File → New. Berikut tampilan halaman awal ketika membuat project baru:
-
Hal pertama yang bisa Anda lakukan adalah mengubah nama project. Caranya, klik tanda panah pada samping nama project dan pilih Rename.
Anda juga dapat melakukannya dengan klik dua kali pada nama project untuk mengubah nama project dengan cepat. Kemudian tuliskan nama project baru, misalnya “Latihan UX Designer” dan klik Enter. -
Selanjutnya kita mulai dengan membuat Frame yang akan menjadi kanvas tempat meletakkan elemen terlebih dahulu. Anda bisa membayangkan Frame sebagai setiap halaman yang akan dibuat dalam aplikasi. Klik menu Frame tool yang berbentuk seperti tanda hashtag (#) atau menekan shortcut F.
Selanjutnya pilih jenis Frame yang akan digunakan. Karena kita akan membuat desain untuk mobile, pilih Android pada pilihan di sebelah kanan.
Hasilnya akan terlihat kanvas dengan ukuran handphone seperti ini:
Anda bisa melihat setiap frame yang dibuat pada bagian Layers sebelah kiri. Kelebihan dari menggunakan Frame yaitu Anda dapat memindahkan satu Frame dengan lebih mudah tanpa harus memilih objek yang ada di dalamnya satu per satu. Klik dua kali pada nama Frame di bagian Layers untuk mengubah nama Frame. Sebagai contoh frame Android-1 ini kita ubah menjadi Home.
-
Supaya Anda mendapatkan gambaran, masukkan foto dari Wireframe yang sebelumnya sudah digambar di kertas sebagai referensi. Anda dapat menggunakan gambar berikut untuk mengikuti latihan ini:
Untuk memasukkan gambar, klik Logo Figma di kiri atas → File → Place Image… dan klik di luar frame. Anda juga dapat menggunakan drag and drop untuk memasukkan gambar dengan lebih mudah. -
Kemudian hasilnya terlihat seperti berikut:
Apabila gambar terlalu besar, Anda dapat melakukan Zoom dengan cara pinch 2 jari atau menggunakan shortcut + (Zoom in) atau - (Zoom out). Cara lainnya yaitu dengan mengubah konfigurasi Zoom/view options yang ada pada pojok kanan menjadi Zoom to fit (Shift + 1) supaya semua gambar terlihat.
Sehingga hasilnya seperti ini:
-
Untuk mengubah ukuran suatu elemen, Anda dapat mengubahnya dengan drag bagian pojok elemen. Pastikan bentuk panahnya berubah menjadi seperti ini dulu ya!
Anda juga dapat mengatur ukuran dengan lebih presisi melalui property W untuk lebar dan H untuk tinggi yang ada di panel sebelah kanan seperti ini:
-
Pada latihan ini, akan ada lima bagian utama yang akan kita buat, yaitu:
- Banner
- Menu pencarian
- Filter kategori
- Daftar menu
- Menu bottom navigation.