Desain Login dan Registrasi yang Memukau dengan Figma: Panduan Langkah demi Langkah
Di sini kita akan melihat bagaimana membuat tampilan login dan registrasi yang menarik menggunakan Figma. Tetaplah ingat dengan beberapa alat penting yang telah kita pelajari sebelumnya.
Untuk memudahkan proses desain, gunakanlah beberapa pintasan yang berguna seperti berikut:
- F - Membuat frame
- T - Menambahkan teks
- R - Membuat persegi
- O - Membuat lingkaran
- L - Membuat garis
Membuat Halaman Login
Langkah pertama, mari kita buat frame untuk halaman login. Ketik F, kemudian pilih frame yang sesuai dengan kebutuhan Anda. Untuk desain tampilan di perangkat mobile, Anda dapat memilih frame untuk ponsel.
Saya akan memilih iPhone 8 Plus sebagai contoh, namun Anda dapat memilih sesuai keinginan.
Anda dapat mengikuti langkah-langkah selanjutnya di bawah ini, dengan gambar properti/style untuk memudahkan Anda dalam mengikuti tutorial ini.
Style yang digunakan:
- 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
- Eclipse —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 gambar seperti ini tandanya kamu sudah berhasil,namun sebenernya terserah dari desain kalian masing-masing.
Lakukan juga ke ellipse lainnya,kalian boleh mengisinya contoh brand goggle.seperti gambar dibawah 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 berkut:
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 kallan 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, Saya 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:
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:
1.Ganti text “Register” menjadi “Login”
2.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
3.Ganti text “Login” menjadi “Register”
4.Ganti text “Login” menjadi “Register”
5.Duplicate salah satu label text dan textfieldnya. Lalu ubah menjadi “Email”
6.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