Description

Langkah 1: Wireframe Aplikasi Anda
Untuk memulai, kami akan membuat versi minimalis dari ide aplikasi kami. Ini dikenal sebagai wireframing atau desain dengan ketelitian rendah. Namun sebelum Anda melakukannya, saya sarankan untuk mendapatkan inspirasi desainnya, yang bisa Anda dapatkan dari situs web desain UI seperti Uplab, Mobbin, atau Ui8. Anda juga dapat membuat papan suasana hati di Figma.

Untuk mendesain wireframe Anda, masuk ke akun Figma Anda atau buat akun jika Anda belum memilikinya. Jika Anda baru mengenal Figma, lihat posting ini untuk ikhtisar singkat.

Setelah Anda masuk, buat file Figma dan ganti namanya.

Membuat wireframe iPhone
Di sini Anda akan membuat gambar rangka aplikasi. Ini akan berisi bentuk seperti persegi panjang, gerhana, dan segitiga untuk mewakili konten aplikasi yang sebenarnya. Pertama, tambahkan bingkai ponsel iPhone 13 Pro ke kanvas desain kosong Anda dengan menavigasi ke alat wilayah dan memilih Bingkai.

Selanjutnya, buka shape tools dan pilih rectangle dan eclipse lalu tambahkan ke bingkai iPhone seperti yang saya tambahkan pada gambar di bawah ini.

Gambar di atas menunjukkan gambar rangka layar beranda aplikasi, yang akan kita buat dalam tutorial ini. Kotak mewakili gambar dan teks, yang nantinya akan kita ganti dengan elemen yang tepat.

Langkah 2: Unduh Plugin
Di Figma, ada integrasi plugin yang dibuat oleh komunitas. Memiliki akses ke integrasi pihak ketiga secara langsung di Figma membantu mempercepat desain Anda. Untuk tutorial ini, Anda harus mengintegrasikan empat plugin:

Unsplash
Profil Pengguna
Lorem Ipsum
Iconify

Langkah 3: Tambahkan Konten ke Wireframe Anda
Dalam desain UI, ada dua jenis desain: wireframe dengan ketelitian rendah, yang kita lihat sebelumnya, dan desain dengan ketelitian tinggi. Desain dengan ketelitian tinggi adalah representasi visual mendetail atau replika dari aplikasi aktual yang akan Anda buat atau kodekan.

Di sini, Anda akan membuat representasi visual gambar rangka Anda dengan ketelitian tinggi. Anda akan mengganti semua kotak dengan konten yang sebenarnya. Buat halaman baru dan ganti namanya menjadi "High fidelity", lalu tambahkan bingkai ponsel iPhone 13 Pro ke kanvas.

Gambar di atas adalah desain high-fidelity dari aplikasi grocery. Ganti gambar avatar dengan mengklik kotak kiri atas dan ketik Ctrl + / untuk membuka input pencarian dan mencari plugin profil pengguna. Pilih, dan gambar avatar acak akan mengisi kotak. Lakukan proses yang sama untuk mengisi kotak dengan gambar dari Unsplash.

Untuk ikon, Anda akan menggunakan plugin Iconify. Buka plugin dan cari ikon" keranjang "dan" cari". Untuk menambahkan teks tiruan ke desain Anda, Anda dapat menggunakan plugin Lorem Ipsum. Secara otomatis menambahkan paragraf atau kalimat teks tiruan.

Anda dapat melihat pratinjau desain Anda di Figma dengan mengklik tombol Putar di sudut kanan atas editor.

Layar pratinjau Anda akan terlihat seperti gambar di atas.

Langkah 4: Berkolaborasi dan Dapatkan Umpan Balik tentang Desain Anda
Sekarang setelah Anda mendesain aplikasi, Anda dapat berkolaborasi dengan desainer, pengguna, dan teknisi lain untuk mendapatkan komentar dan umpan balik. Untuk menambahkan komentar, klik tombol komentar di bilah atas editor. Kemudian, pilih area mana pun dalam desain yang ingin Anda beri komentar untuk tim atau pengguna uji Anda.

Anda juga dapat membagikan desain dengan mengeklik tombol bagikan dan mengatur preferensi berbagi Anda.

Langkah 5: Bagikan Desain Anda Dengan Komunitas Figma
Komunitas Figma menyediakan akses ke templat, widget, dan plugin. Sebagai pengguna Figma, Anda juga dapat memublikasikan desain dan plugin Anda ke komunitas untuk digunakan orang lain. Anda dapat melakukannya menggunakan tombol bagikan dan mengklik Terbitkan.

Dan hanya itu! Anda telah membuat layar beranda aplikasi pengiriman bahan makanan, meskipun masih banyak yang harus dilakukan. Untuk mendapatkan lebih banyak latihan dengan Figma, terus kerjakan desain Anda.