Membuat User Interface di Figma

Hallo Hallo Semuanyaa!! Ketemu lagi nih di blog Ayaa. Di kesempatan kali ini ayaa bakal ajak kalian belajar membuat user interface di Figma.

Okay, sebelumnya kalian udah pada tau belum sih apa itu Figma? Jadi, Figma adalah editor grafis vektor dan alat prototyping dengan berbasis web serta fitur offline tambahan yang diaktifkan oleh aplikasi desktop untuk Mac OS dan Windows. Aplikasi pendamping Figma Mirror untuk Android dan iOS memungkinkan untuk melihat prototype Figma pada perangkat seluler. Rangkaian fitur Figma berfokus pada penggunaan dalam antarmuka pengguna dan desain pengalaman pengguna dengan penekanan pada kolaborasi waktu nyata (real- time).

Sederhana nya, Figma adalah desain digital dan alat prototyping. Ini adalah aplikasi desain UI dan UX yang dapat Anda gunakan untuk membuat situs web, aplikasi, atau komponen antarmuka pengguna yang lebih kecil yang dapat diintegrasikan ke dalam proyek lain. Dengan alat berbasis vektor yang hidup di cloud, Figma memungkinkan para penggunanya untuk bekerja di mana saja dari browser.

Nah, jadi udah pada tau kan nih apa itu figma, karena kita udah kenalan sama Figma. Sekarang kita bisa mulai untuk membuat user Interfacenya. Pertama - tama kita harus menentukan apa yang akan kita buat. Kalau sekarang kita akan membuat Food Ordering App. Udah pada penasaran kan gimana sih cara buatnya? Yuk simak penjelasan dibawah ini yaa

Membuka Figma

Kita bisa membuka Figma melalui laptop kalian dengan cara search "Figma" pada Google Chrome. Kemudian kita pilih yang paling atas. Atau bisa juga dengan mengetikkan alamat https://www.figma.com/ pada address bar. Dan kita masuk ke dalam Figma

Menentukan Frame

Setelah berhasil masuk ke dalam Figma, pilih New design file (Design and prototype). Kemudian pilih Region Tools - Frame. Pada bar design pilih Android Large.

Membuat Tampilan Cover Food Ordering App

1. Menyisipkan Gambar. Agar cover lebih menarik kita bisa menyisipkan gambar melalui Shape Tools - Place Image. Atau juga bisa menyalin di Website (CTRL+C) kemudian paste (CTRL+V) maka gambar akan otomatis tersalin.

2. Tombol Tap Here. Tombol ini diperlukan agar pengguna bisa masuk ke halaman Log In untuk masuk ke dalam aplikasi. Kita bisa membuat tombol Tap Here dengan melalui Shape Tools - Rectangle. Kemudian kita bisa membuat kotaknya lebih tumpul pada Corner Radius di bar Design. Setelah kotaknya siap, tambahkan teks Tap Here melalui Text.

3. Design Cover Selesai

Membuat Tampilan Halaman Log In

Komponen yang dibutuhkan pada halaman Log In adalah :

1. Teks Log In : Text

2. Teks Enter email or username : Text

3. Teks Password : Text

4. Gambar : Shape Tools - Place Image

5. Enter email or Username dan Password akun. Kita bisa membuatnya melalui Shape tools - Line. Kemudian masukkan logo melalui Shape tools - Place image dan teks melalui Text. Setelah itu, susun semuanya seperti gambar berikut.

6. Tombol Log In. Kita bisa membuat tombol Log In melalui Shape Tools - Rectangle. Kemudian kita bisa membuat kotaknya lebih tumpul pada Corner Radius di bar Design dan menambahkan teks Log In melalui Text.

7. Warna background. Untuk memberi warna pada background frame caranya mudah. Pada bar Design pilih Fill kemudian pilih warna yang diinginkan dan style warna yang ingin digunakan karena disini tersedia pilihan seperti solid untuk warna tetap dan linear untuk warna gradasi. Selain memilih warna secara langsung, kita juga bisa menggunakan color pallette yang ada di website dengan cara mengunduh dan menyalinnya menjadi gambar atau salin teks jenis warna pada kotak yang telah disediakan.

Membuat Tampilan Halaman Sign Up

Tampilan Sign Up dan Log In sebenarnya sama, bisa langsung klik (CTRL+C) untuk mengcopy dan (CTRL+V) untuk paste. Mulai dari komponen dan tata letaknya. Tapi ada satu yang membedakan nya yaitu konfirmasi password. Untuk garis dan teksnya masih dengan cara yang sama yaitu untuk garis : Shape tools - Line dan untuk teks : Text.