Mendesain Tampilan Login Smartphone di Figma
Figma adalah salah satu design tool yang kini banyak digunakan oleh orang-orang yang bekerja di bagian user interface dan user experience (UI/UX). Tools ini sangat membantu untuk membuat tampilan laman, aplikasi smartphone, dan banyak desain grafis untuk presentasi, media sosial, poster, dan lain-lain. Tak hanya itu, Figma juga memiliki sejumlah keunggulan lain:
- Web-based dan gratis
- Memiliki fitur kolaborasi
- Simpel namun dilengkapi dengan banyak fitur desain
Mulai Menggunakan Figma
Untuk mulai menggunakan Figma, kita perlu membuka laman www.figma.com terlebih dahulu. Setelah itu kita bisa melakukan registrasi untuk membuat akun di sana. Jika sudah memiliki akun, kita bisa masuk ke akun pribadi kita untuk mulai membuat desain yang diinginkan.
Mengenal Fitur Figma
Ada 9 tools dasar yang disediakan oleh Figma, yaitu:
- Main menu
- Move tools
- Region tools
- Shape tools
- Drawing tools
- Text tool
- Resources
- Hand tool
- Add comment
Mulai Mendesain
Untuk mulai membuat desain di Figma, kita bisa menggunakan fitur region tools untuk membuat frame terlebih dahulu. Caranya, klik ikon “region test” kemudian pilih “frame.” Kita juga bisa menggunakan shortcut dengan menekan huruf F.
Setelah menekan huruf F, akan tampil sejumlah menu di bagian kanan layar. Kita bisa memilih jenis dan ukuran frame yang kita inginkan, misalnya frame untuk tampilan telepon, tablet, desktop, presentasi, jam, kertas, media sosial, dan sebagainya. Kita juga bisa langsung membuat frame di kanvas dengan click and drag di layar, kemudian menyesuaikan ukuran yang kita inginkan. Untuk latihan, kita akan membuat halaman login aplikasi smartphone. Kita gunakan frame iPhone 13 Pro Max yang berukuran 428x926 pixel.
Setelah klik menu di atas, akan muncul kotak putih seperti pada gambar di bawah ini.
Masukkan tulisan dengan klik ikon “Teks” atau menekan huruf T pada keyboard. Klik sembarang tempat pada frame, dan ketikkan teks yang kita inginkan, misalnya “Let’s get you in” sebagai title.
Seperti tampilan di atas, informasi tentang nama, ukuran dan warna font akan muncul di sebelah kanan. Kita bisa menempatkan tulisan tadi di tengah dengan klik ikon “Align horizontal centers” yang ada di bagian atas sisi tersebut atau klik Alt+H.
Setelah tulisan “Let’s get you in” berada di posisi tengah, kita ubah tampilan tulisan tersebut menjadi font Lato, warna hitam dan ukuran 36 pixel.
Selanjutnya, kita akan membuat text field untuk username dan password dengan klik ikon “Rectangle” pada shape tools atau tekan huruf R.
Klik di bagian frame yang akan kita buat text field, drag sesuai ukuran text box. Kita juga bisa menyesuikan lagi ukurannya dengan mengatur tinggi (height/h) dan lebar (width/w) di sebelah kanan. Geser kotak sesuai posisi yang diinginkan. Hasilnya menjadi seperti tampilan di bawah ini.
Kita juga bisa memodifikasi bentuk text field agar melengkung di bagian sudut dengan mengubah nilai/angka pada titik lengkung ke angka 20.
Agar tampak lebih menarik, beri warna pada text field tersebut dengan menggunakan pengaturan di sebelah kanan.
Ulangi ketiga langkah di atas untuk membuat satu text field lagi atau klik text field yang sudah ada, kemudian copy–paste dan geser ke bawah. Hasilnya seperti terlihat di bawah ini.
Tambahkan keterangan, misalnya “Email” dan “Password,” di dalam kedua text field dengan menggunakan text tool, sama seperti ketika membuat text “Let’s get you in.”
Tambahkan plugin agar text field yang kita buat lebih mudah dipahami oleh calon pengguna aplikasi yang kita desain. Caranya, gunakan ikon “Plugins” pada bagian “References”.
Pilih ikon yang sesuai dengan text field tersebut.
Setelah berhasil memasukkan ikon, kita buat check box “Remember me”. Untuk membuatnya, kita bisa menggunakan langkah yang sama ketika membuat text field. Hanya saja, tulisannya kita letakkan di luar kotak.
Langkah selanjutnya adalah membuat button “Sign in” dengan melakukan langkah yang sama seperti membuat text field. Kemudian beri warna biru seperti ketika kita memberi warna outline pada text box. Setelah membuat button dan memberi warna kemudian kita memberikan teks “Sign in” pada button tersebut dengan mengaturnya posisinya menjadi di tengah.
Selanjutnya, kita akan membuat opsi sign in dengan akun Facebook, Google, dan Apple. Pertama, kita buat lingkaran terlebih dahulu. Untuk membuat lingkaran yang simetris, kita dapat menekan tombol “Shift” pada keyboard saat membuat eclipse. Jika eclipse pertama sudah jadi kemudian kita duplikat menjadi tiga eclipse dengan cara menekan CTRL + D pada Windows atau CMD + D pada MacOS. Masing-masing eclipse akan kita isi dengan logo Facebook, Google, dan Apple.
Jika semua logo sudah siap kita masking dengan eclipse yang sudah dibuat sebelumnya dengan cara meletakkan logo di atas eclipse yang sudah dibuat. Kemudian, pilih kedua objek dengan selection tools. Kemudian klik ikon masking.
Jika sudah di-masking, klik dua kali pada logo tersebut dan kita dapat menyesuaikan gambar dengan area masking-nya. Sesuaikan supaya terlihat rapi dan proporsional. Lakukan langkah tersebut untuk kedua logo lainnya.
Pada tahapan terakhir, kita tambahkan keterangan agar user yang belum memiliki akun di aplikasi yang kita desain dapat membuat akun terlebih dahulu. Kita dapat menuliskan “Don’t have an account? Sign Up.” dengan text tool.
Nah, proses desain sudah selesai. Sekarang kita dapat melihat hasil akhir dari desain yang kita buat seperti gambar di bawah ini.
Semoga bermanfaat!
*Ditulis oleh Bona Utama, seorang desainer UI/UX berdomisili di Yogyakarta.
