Ngulik Kode - Halo teman-teman balik lagi dengan Admin TokoCoding - Ratih, apa kabar ? Semoga kalian sehat selalu.
Dalam membangun sebuah Aplikasi, peran UI/UX sangat dibutuhkan. Bagaimana tidak, jika User Interface aplikasi yang kita buat tidak baik, maka User akan kurang tertarik untuk menggunakan Aplikasi kita. Begitu juga dengan User Experience, Aplikasi yang kita buat dengan UX yang buruk maka akan mempersulit User menggunakan aplikasi kita.
Maka dari itu kali ini Admin akan membuat tutorial menggunakan Figma untuk Design Mobile Application. Dalam tutorial pertama membuat design UI/UX kali ini, yang akan kita buat adalah Login Page dan Register Page Interface Mobile di Figma.
Figma sendiri adalah Web Based Application yang bisa digunakan di dalam situs nya figma.com tanpa harus mendownload aplikasi desktop nya. Tetapi jika kalian ingin mendowload nya, kalian bisa download disini https://www.figma.com/downloads/
Okay, setelah menyelesaikan proses download dan login di Figma, kalian bisa langsung membuat file baru yang berada di kanan atas, atau kalian bisa dengan mudah menggunakan shortcut Ctrl+N
A. Mengenal Tools di Figma
Nah sebelum kita memulai, kita akan melakukan pengenalan terlebih dahulu dengan tools yang ada di dalam figma yang perlu kalian ketahui.
Nah, untuk memudahkan pengerjaan, kita bisa menggunakan shortcut seperti di bawah ini:
• F - Untuk membuat frame
• T - Untuk Membuat text
• R - Untuk membuat persegi
• O - Untuk membuat lingkaran
• L - Untuk membuat garis
B. Membuat Login Page
Nah setelah itu kita akan membuat frame untuk halaman login terlebih dahulu. Ketik F, lalu sebelah kanan akan muncul design frame yang ingin kalian buat, karena kita ingin membuat tampilan di mobile, kalian pilih frame untuk phone.
Admin akan memilih iPhone 8 Plus, tapi kalian bebas menentukan pilihan yang kalian suka. Jika sudah, akan muncul frame yang kalian pilih di canvas seperti berikut :
Lalu kalian bisa mengikuti Langkah-langkah selanjutnya dibawah ini, telah disajikan gambar properties/style untuk memudahkan kalian dalam mengikuti tutorial di bawah.
Style:
- Text--font-poppins, weight-regular, size-18, color: #000
- Rectangle--border radius-15, color:#ddd
- Text--font-poppins, size-10, weight-light
- Rectangle--border radius-15, color: #454545
- Text--font-poppins, size-12, weight-light
- Text--font-poppins, size-14, weight-light
- Rectangle--border radius-3, color:#454545
- Text--font-poppins, weight-regular, size-18, color: #fff
- Ellipse --olor:#c4c4c4
Jika kalian liat, di bawah Prototype terdapat Icon Google dan Facebook. Nah kali ini kita akan mendownload plugin Brandfetch. Kalian klik menu lalu ke plugins, lallu klik browser plugins in community.
Jika sudah, ketik "Brandfetch" lalu install.
Balik ke design kalian, lalu ketik Ctrl + / kemudian ketik Brandfetch, kalian bisa mencari logo brand yang kalian inginkan. Sebagai contoh disini Admin menggunakan logo Faceboook. Jika sudah select pada bagian ellipse dan klik gambar yang ada di plugins.
Jika menjadi seperti gambar di bawah, tandanya kalian sudah berhasil.
Lakukan juga ke ellipse lainnya, kalian boleh mengisinya dengan contoh brand Google. Seperti gambar di bawah ini.
Lalu kita akan menambahkan icon show/hide di dalam rectangle password. Silahkan kalian download plugins icons8 icons di plugins community seperti sebelumnya. Jika sudah, klik ctrl + / dan cari plugins icons8 icons. Lalu ketikkan show hide seperti gambar berikut :
Kalian juga bisa mengubah warna di kanan atas plugin nya menjadi warna sesuai selera kalian. Jika sudah, klik dan arahkan ke dalam rectangle password seperti gambar.
Okay memasuki langkah terakhir yaitu menambahkan vector. Sekarang kalian klik link ini
https://undraw.co/search dan ketikkan “login” kalian boleh pilih sesuka hati, lalu setelah itu kalian download. Kemuadian, kalian copy ke frame seperti ini :
Fyi, kalian bisa mengganti warna dari gambar yang udah kalian download tadi dengan cara klik dua kali lalu ubah warnanya.
Nah untuk touching terakhirnya, Admin merubah warna gambarnya menjadi lebih gelap dan menambah beberapa shape untuk meramaikan white space dan terakhir menambahan Text Register di ujung kanan atas seperti gambar berikut :
C. Membuat Register Page
Hal pertama yang harus kalian lakukan adalah duplicate hasil login page yang sudah jadi dengan shortcut Alt + Shift lalu geser ke tempat yang kalian inginkan, lalu ikuti seperti gambar dibawah ini :
- Ganti text “ Register” menjadi “Login”
- Download gambar berbeda dari sebelumnya di sini https://undraw.co/search Kalian bisa search dengan menggunakan keyword “Register” dan pilih sesuai selera kalian. Setelah itu copy seperti gambar diatas
- Ganti text “Login” menjadi “Register”
- Ganti text “Login” menjadi “Register”
- Duplicate salah satu label text dan textfieldnya. Lalu ubah menjadi “Email”
- Ubah text menjadi seperti diatas.
Nah desain halaman Login dan Halaman Register kita sudah selesai nih, gampang banget kan ?. Sekian dulu Tutorial Figma dari Admin, kita akan lanjut sama-sama mempelajari Figma untuk mendesain aplikasi kita pada artikel berikutnya. Jika ada pertanyaan silahkan tinggalkan pada kolom komentar, begitu juga dengan kritik dan saran. Maaf bila ada salah kata, dan terima kasih telah membaca tutorial ini. Semoga ilmu nya bermanfaat.
