Membuat Desain Figma

  Membuat Desain Tampilan Aplikasi 

sc : https://www.figma.com

Assalamualaikum wr.wb

Haloo semuanya disini saya akan membuat tutorial bagaimana cara membuat desain tampilan aplikasi dengan meggunakan aplikasi figma.  

Apa itu Figma ?

Dilansir dari enkrut media, Figma adalah tool desain berupa website yang terhubung dengan cloud sehingga bisa digunakan kapanpun dan dimanapun melalui internet. Tool ini berbasis vector, sehingga akan lebih cocok untuk mendesain UI website atau mobile dan aset ilustrasi. Tetapi, Figma juga bisa digunakan untuk mengedit foto namun hanya dengan pengaturan dasar saja.

Jadi pada kesempatan kali ini saya akan menjelaskan tahap-tahap bagaimana cara membuat desain tampilan aplikasi menggunakan aplikasi figma .

Langsung saja kita ke langkah-langkah nya :

Buka Aplikasi Figma

Langkah pertama pastikan kalian sudah mempunyai aplikasi figma jika kalian belum memiliki aplikasinya bisa kalian kunjungi websitenya

Jika sudah menginstall aplikasi figma selanjutnya anda bisa buka aplikasinya dan pastikan sudah login terlebih dahulu. begini tampilan awal pada aplikasi figma

Membuat File Baru

Selanjutnya kalian langsung buat project baru dengan mengklik bagian New Design File selanjutnya tampilan akan berubah seperti ini

Membuat Frame

Langkah selanjutnya kalian buatlah frame terlebih dahulu, caranya kalian bisa klik tombol frame seperti di gambar dibawah ini

Lalu terserah kalian ingin menggunakan frame yang mana, disini saya menggunakan frame iphone 11 pro.

Setelah itu kalian juga bisa mengganti nama nya terlebih dahulu dengan cara yang ada digambar dibawah ini

Disini kalian bebas ingin membuat tampilannya seperti apa, disini saya akan membuat tampilan desain aplikasi saya sendiri

Masukkan Teks

Kalian bisa masukkan teks terlebih dahulu dengan cara klik bagian logo tekas yang ada seperti digambar 

Kalian bebas ingin masukkan teks apa disini saya akan masukkan teks AlfanShop.

Masukkan Gambar

Disini kalian juga bisa memasukkan gambar yang ingin kalian inginkan dengan cara dibawah ini

Setelah memasukkan gambar tampilan akan seperti ini

Membuat Kolom Mulai

Langkah selanjutnya yaitu membuat kolom menggunakan Rectangle seperti contoh dibawah ini

Disini terserah kalian ingin memasukkan kolom berapa banyak karena disini saya hanya butuh 1 kolom untuk tombol mulai seperti dibawah ini 

Kalian juga bisa mengatur sudut dan warna sesuai selera kalian seperti gambar yang ada diatas ini.

selanjutnya kalian bisa tambah kan text lagi untuk bagian kolom yang dibuat tadi seperti langkah pertama tadi.

setelah itu kalian bisa rapihkan kembali hasil yang kalian buat agar lebih menarik lagi seperti gambar diatas. jika dikira semua sudah selesai kita bisa lanju membuat frame yang kedua.

Menambahkan Frame 2

Setelah kalian selesai diframe satu maka lanjut untuk membuat frame yang kedua, caranya sama seperti contoh yang sudah dijelaskan diatas menggunakan frame yang sama seperti frame yang pertama dibuat yaitu Iphone 11 pro. Dan silahkan masukkan apa saja yang kalian butuhkan seperti dibawah ini.

disini saya sudah membuat beberapa element seperti gambar dan text, kalian juga bisa melakukannya caranya seperti frame awal tadi. jika kalian ingin mengubah warna baground pada frame kedua kalian bisa melakukannya dengan cara kllik bagian frame lalu klik design,fill lalu pilih warna yang kalian ingin kan seperti gambar dibawah

selanjutnya kalia buat kembali kolom seperti yang dilakukan seperti frame awal. Pada kali ini saya akan membuat kolom login jadi saya akan membuat dua kolom input. Setelah membuat kolom input buat kembali text untuk kolom yang sudah dibuat dan di bagian text kalian juga bisa menurunkan opaciy warna text seperti contoh dibawah ini.

Jika sudah disini saya ingin menambahkan gambar hide untuk password seperti aplikasi biasanya, dan disini juga saya akan menambahkan kolom untuk tombol login dan juga menambahkan icon logo google dan facebook untuk metode login yang kedua. Jika sudah semua maka tampilan akan seperti gambar dibawah ini

Untuk selanjutnya kalian bebas melanjutkan untuk membuat frame selanjutnya seperti apa dengan cara yang sudah saya berikan disebelumnya, jika sudah selesai dibawah ini.

Ketika semuanya selesai kita lanjut ke langkah membuat interaksinya.

Membuat Interaksi

Lalu buat lah interaksi di Prototype seperti gambar dibawah

Setelah itu kalian tarik tombol bulat + ke frame 2

Kalian juga lakukan itu ke frame 2 dengan cara yang sama, kalian juga bisa menambahkan animasi slide in seperti dibawah

Lakukan cara itu sampai frame akhir.

Present

Kita bisa test ddengan mengklik tombol present dipojok kanan atas 

Jika sudah maka akan mengarah ke tab selanjutnya seperti tampilan dibawah

Selanjutnya kita bisa jalankan dengan klik tombol Mulai dan tampilan akan lanjut pada frame kedua

Ketika sudah beralih ke frame kedua kita bisa mengklik tombol Login maka akan lanjut ke frame 3

Jika itu semua dilakukan dan berhasil maka semuanya selesai.

Hasil Desain Figma

Seperti inilah desain yang sudah saya buat menggunakan aplikasi Figma.

Kalian bisa lakukan semuanya sesuai selera kalian masing-masing

mungkin itu saja dari saya sekian terima kasih.

Wassalamualaikum Wr.wb.