Cara Desain di Figma ( Halaman Login dan Sign Up)

Assalamualaikum, Hallo teman teman, di blog kali ini saya akan memberikankan tutorial membuat desain di Figma, di Figma kali ini saya akan coba membuat tampilan login dan sign up yang simple. Sebelumnya saya akan menjelaskan apa sih Figma itu ??

Figma adalah adalah aplikasi berbasis web untuk mendesain UI dan UX yang dapat digunakan untuk membuat aplikasi, web, serta berbagai komponen user interface yang dapat digabungkan ke dalam project lainnya. Selain itu, figma adalah aplikasi untuk para desainer berkolaborasi dengan desainer lainnya dan membuat desain secara bersama-sama. Dalam membuat sebuah desain UI/UX di dalam suatu aplikasi atau website, Figma memiliki beberapa tools yang dapat memudahkan desainer untuk mendesain.

Salah satu kelebihan Figma yaitu, dapat menghemat waktu karena desainer bisa berkolaborasi seperti mengubah rancangan desain dalam waktu yang bersamaan, memberi komentar.

Figma di desain menjadi lebih efisien dan konsisten, dengan desain yang menggunakan sistem cloud (online). Figma dapat digunakan di berbagai platform seperti Mac dan Windows, Linux, bagi pengguna sistem operasi lain juga dapat menggunakan Figma dengan menggunakan web browser.

Oke, langsung saja ke tutorialnya

Pertama, klik button + , untuk membuat file baru

Selanjutnya, pilih frame yang ingin anda pakai dengan klik "frame"

Lalu, pilih frame yang anda inginkan, dengan cara memilih salah satu yang ada di sebelah kanan, sebagai contoh saya memakai Iphone 13 Pro Max

Setelah itu, masukkan background yang akan dipakai dengan cara klik button seperti dibawah ini atau Ctrl+Shift+K dan pilih foto yang akan dijadikan backgroundnya

Lalu, drag foto background di frame hingga full

Dan jangan lupa background nya di kunci dengan menekan tombol gembok hingga berubah menjadi gembok terkunci

Setelah itu, masukkan rectangle dengan menekan tombol R di keyboard dan masukkan di frame dengan di drag

Dan untuk ukurannya adalah seperti ini

Dan warna nya diatur seperti ini

Selanjutnya, buat rectangle untuk Username/Email dengan klik tombol R di keyboard dan ikuti ukuran yang ada di sebelah kanan

Dan untuk fill nya menggunakan tipe Solid dan kode FFFFFF dengan transparan 100%

Lalu, buat rectangle untuk Password dan ikuti ukurannya

Kemudian, buat rectangle untuk tombol LOGIN dan ikuti ukurannya dan berikan warnanya

Selanjutnya, buat rectangle untuk Sign Up dengan Google dan ikuti ukurannya dan berikan warna dengan transparan fill 80%

Dan, buat juga rectangle untuk Sign Up dengan Facebook dengan copy paste (Ctrl+C - Ctrl+V) karena untuk ukuran dan warna sama saja hanya pindahkan ke samping tombol Sign Up dengan Google

Lalu, buat teks title LOGIN dengan warna teks hitam diatas rectangle Username/Email, untuk membuat teks klik tombol T di toolbar Figma

Kemudian masukkan icon user dengan cara klik Ctrl+Shift+K, ukurannya 62x60 dan tempatkan di pojok rectangle utama. Untuk semua icon ditutorial ini, saya download di flaticon.com

Lanjut, masukkan tulisan "Username/Email :" di rectangle Username/Email dengan ukuran dan warna seperti ini

Setelah itu, copy paste saja tulisan "Username/Email :" dan ganti dengan tulisan "Password :" dan pindahkan ke rectangle Password

Tambahkan gambar icon hidden yang juga sudah saya download dengan Ctrl+Shift+K dan pilih icon hidden nya dan tempat kan di pojok kanan rectangle Password dengan ukuran icon 30x23

Buatlah tulisan "Forgot Password" dengan warna dan ukuran seperti ini

Buatlah juga tulisan "Sign Up" di bawah rectangle Password sebelah kanan dengan warna dan ukuran seperti ini

Setelah itu, buat juga tulisan "LOGIN" di rectangle LOGIN yang berwarna orange kecoklatan dengan warna dan ukuran seperti ini

Buat lagi tulisan "Or Sign Up with" di bawah rectangle LOGIN dengan warna dan ukuran seperti ini

Tambahkan gambar icon Google dengan ukuran 30x30 di pojok kiri rectangle Google

Tambahkan lagi gambar icon Facebook dengan ukuran 32x32 di pojok kiri rectangle Facebook

Buat tulisan "Google" di samping icon Google dengan ukuran dan warna seperti ini

Buat tulisan "Facebook" di samping icon Facebook dengan ukuran dan warna seperti tulisan "Google" sebelumnya

Selanjutnya copy frame ini dengan cara klik kanan tulisan Iphone 13 Pro Max di bagian layers sebelah kiri layar lalu klik copy atau Ctrl+C dan tempel dengan cara klik kanan di bagian kosong samping frame yang sudah dibuat lalu klik Paste here

dan hasilnya

lalu ubah tulisan "LOGIN" menjadi "SIGN UP"

Kemudian hapus beberapa layers dengan cara klik layers di bagian Layers sebelah kiri layar yang akan dihapus sambil klik Ctrl di keyboard dan klik delete di keyboard untuk menghapusnya

Setelah itu, ganti tulisan "LOGIN" dengan tulisan "Register Now" serta ukuran rectangle nya diperlebar menjadi ukuran 213x48

Selanjutnya, tambahkan rectangle untuk Confirm Password untuk ukuran sama saja dengan rectangle Password dan letakkan dibawah rectangle Password

Beri tulisan dan letakkan di rectangle Cofirm Password dengan tulisan "Confirm Password :", untuk ukuran dan warna sama dengan tulisan "Password :"

Tambahkan kembali icon hidden dengan ukuran yang sama dengan icon hidden yang di rectangle Password dan letakkan di pojok kanan rectangle Confirm Password

Lalu, buat lagi frame kosong untuk membuat halaman utama dengan cara seperti memasukkan frame yang pertama, dan masukkan background lagi, disini saya memasukkan background yang berbeda dan klik tombol gembok yang berada di layers bagian Iphone 13 Pro Max-3 hingga gembok terkunci yang berfungsi agar background ini tidak bisa diubah

Lalu isilah Frame 3 dengan kreasi anda sendiri dan silahkan jika ingin membuat apapun, sebagai contoh saya hanya membuat ini

Setelah itu buat prototype agar frame tersebut dapat menyambung dengan frame lainnya dengan cara klik Prototype di sebelah kiri layar samping tulisan Design

Kemudian, klik rectangle atau tulisan apa yang jika di klik rectangle atau tulisan tersebut akan masuk ke frame yang ditentukan. Jika sudah di klik akan muncul di tengah pojok kiri di rectangle atau tulisan tersebut tombol dengan icon + dan drag ke arah frame yang akan dituju