Membuat UI Design Dengan Menggunakan Figma

(n.) Credit by YouTube channel Insightnesia.

Hai, kali ini saya ingin kasih tau tutorial membuat UI Desain Login dengan Figma. Nah, tampilan nya seperti pada gambar di atas. 

Untuk langkah pertama, dengan membuka chrome lalu search Figma.com, kalian dapat mengkases Figma dengan cara membuka web di chrome atau langsung download aplikasi Figma.  

Langkah selanjutnya, lihat di laman Pages kita klik Component. Di Component tersedia halaman kosong, halaman kosong ini yang nantinya akan kita pakai untuk membuat sebuah komponen seperti gambar di bawah. 

Untuk membuat komponen page 1, terdapat komponen teks di kolom bewarna hitam terdapat icon 'T'. Setelahnya buat komponen button menggunakan icon 'Shape Tools' lalu klik Rectangle dan buat sebuah kotak persegi panjang menyesuaikan. Lalu input field, sama seperti teks dan button kita menggunakan icon teks dan shape tools, tapi bedanya kita menggunakan Line untuk membuat garis. Agar teks dan line dapat menyatu kita klik pad kanan lalu cari 'group selection'.

Selanjutnya buat komponen page 2. Card 1 dan card 2 kita gunakan Shape tools rectangle. Lalu kita lanjut membuat sebuah bayangan, klik pad kanan terdapat 'plugins' lalu kita klik 'find more plugins' disitu kita cari 'smooth shadow'.

Nah langkah selanjutnya, kita klik pages 'UI Design' sama seperti Component, setelah di klik terdapat halaman kosong. Terlebih dahulu kita klik icon Region tools pada kolom hitam, klik Frame disitu terdapat banyak frame nah kita pakai frame Android Large.  Untuk menambah komponen yang sudah kita buat tadi, klik 'Assets' nah disitu terdapat komponen nya. Setelahnya kita drag ke laman kosong. 

 

Jadinya akan seperti itu, jika bingung bagaimana cara mendapat gambar seperti gambar yang di atas button login, kita search Manypixels nah disitu banyak gambar-gambar seperti itu.

Lalu kita buat slide selanjutnya seperti tadi. Untuk tambahan disitu terdapat icon seperti user dan lock, nah untuk mendapatkannya kita klik pad kanan, klik 'plugins' lalu 'Find more plugins' kita cari 'Iconify' dan disitu kalian tinggal search icon user dan lock nya.

Tampilannya akan seperti ini. Ah ya untuk tambahan pada 'Homepage' agar tampilan bisa di scroll, kita block terlebih dahulu semua component yang terdapat pada homepage kecuali frame homepage nya, lalu klik tab kanan cari 'group selection'. Setelahnya kita ke 'Prototype'.

Seperti ini, setelah kita coba pasti akan bisa di scroll.

Langkah terakhir untuk membuat UI Design nya adalah dengan menggunakan Prototype.

Seperti itu jadinya, bagaimana caranya? Seperti ini..

Disitu terdapat tanda '+', dari tanda itulah kita klik lalu kita tarik ke komponen slide selanjutnya, supaya  icon yang sudah kita 'prototype' tadi dapat berpindah ke slide selanjutnya setelah kita klik.

 

Nah seperti itulah tutorial ringkas yang dapat saya jabarkan dalam membuat UI Design dengan menggunakan Figma. Semoga membantu, terimakasih. ^^!!