Tutorial Figma Design Login Mobile App

Hello, people with the spirit of learning. Sebagai seorang UI Designer saat mendesain sebuah aplikasi ataupaun sekedar eksplorasi, login screen merupakan salah satu screen yang pastinya harus kita desain setiap kita mendesain sebuah aplikasi.

Tutorial Figma Design Login Mobile App

Yuk, kita desain login screen sekarang.

1. Siapkan Frame

1. Tambahkan frame dengan cara tekan F pada keyboard lalu pilih frame iPhone 14 Pro Max (430 ⨉ 932).
2. Ubah nama frame menjadi “Login Screen”.
3. Ubah warna Fill frame menjadi #1B1B1B.
4. Tambahkan component Status Bar dan Home Indicator untuk mengetahui safe zone dari frame.

Kalian dapat mendapatkan component tersebut pada Community di Figma dengan keyword iOS 16 UI Kit for Figma oleh Joey Banks.

2. Siapkan Asset

1. Untuk logo, kalian dapat mendapatkannya dengan menggunakan plugin Logoipsum.
2. Untuk logo Google dan Facebook kalian dapat mendapatkannya dengan menggunakan plugin Iconify atau kalian juga bisa mencari di Community Figma.
3. Untuk icon amplop, gembok, dan mata kalian dapat mendapatkannya di Community Figma dengan keyword iconsax.

3. Atur Logo

1. Taruh logo kedalam frame lalu ubah ukuran logo menjadi 48 ⨉ 48.
2. Ubah tipe Fill warna logo menjadi Linear.
3. Ubah warna dari kiri kanan #417AFA, #F436E0 dengan Opacity 100%.
4. Taruh logo di atas kiri frame dengan jarak dari atas dari Status Bar 16 dan kiri 24.

4. Tambahkan Headline

1. Tambahkan text “Welcome Back!” ke dalam frame, lalu atur font menjadi Rubik, font weight Bold, font size 48, dan letter spacing 1 px.
2. Ubah Fill color text “Welcome Back!” menjadi #FFFFFF.
3. Tambahkan text “Hello, we miss you..” ke dalam frame, lalu atur font menjadi Rubik, font weight Regular, dan font size 16.
4. Ubah Fill color text “Hello, we miss you..” menjadi #D1D1D1.
5. Pilih text “Welcome Back!” dan text “Hello, we miss you..” lalu terapkan Auto Layout dengan cara menekan Shift + A pada keyboard.
6. Ubah nama auto layout menjadi “Headline”.
7. Atur Headline menjadi Vertical layout dan atur space beetwen menjadi 8.
8. Posisikan Headline di bawah logo dengan jarak 40 dan jarak kiri 24.

5. Buat Email Input Field

1. Tambahkan label input dengan cara tekan T, lalu ketikkan “Email”.
2. Atur font menjadi Rubik, font weight Medium dan font size 15.
3. Ubah warna label menjadi #FFFFFF.
4. Tambahkan text dengan cara menekan T pada keyboard, lalu ketikkan “Email” sebagai placeholder untuk input field.
5. Atur font menjadi Rubik, font weight Regular dan font size 15.
6. Terapkan auto layout dengan cara pilih text “Email” lalu tekan Shift + A pada keyboard.
7. Atur menjadi Horizontal layout dan beri space between 12.
8. Atur posisi text pada auto layout menjadi Align Left.
9. Atur horizontal padding dan vertical padding menjadi 16.
10. Ubah width menjadi Fixed 382 dan height Fixed 54.
11. Ubah nama frame auto layout menjadi “Input field”.
12. Ubah warna Fill Input field menjadi #313131.
13. Beri radius 8.
14. Ubah horizontal resizing pada placeholder text “Email” menjadi Fill container.
15. Masukkan icon email, lalu taruh pada bagian kiri.
16. Ubah warna icon dan text menjadi #838383.
17. Terapkan auto layout pada label “Email” dengan Input field.
18. Ubah nama auto layout menjadi “Email input”.
19. Ubah menjadi Vertical layout lalu beri vertical spacing 8.
20. Posisikan Email input dibawah Headline dengan jarak 40 dan jarak dari kiri 24.

6. Buat Password Input Field

1. Lakukan hal yang sama seperti membuat Email Input Field.
2. Ubah nama auto layout menjadi “Password input”
3. Pada Input field component Password input, tambahkan icon mata, lalu letakkan pada sebelah kanan dan ubah warna icon menjadi #FFFFFF.
4. Posisikan Password input dibawah Email input dengan jarak 16.

7. Buat Login Button

1. Tambahkan text dengan cara menekan T pada keyboard, lalu ketikkan “LOGIN”.
2. Atur font menjadi Rubik, font weight SemiBold dan font size 15.
3. Terapkan auto layout dengan cara pilih text lalu tekan Shift + A pada keyboard.
4. Atur posisi text pada auto layout menjadi Align Center.
5. Atur horizontal padding dan vertical padding menjadi 16.
6. Ubah width menjadi Fixed 382 dan height Fixed 54.
7. Ubah nama auto layout menjadi “Login button”.

8. Ubah tipe warna Fill Login button menjadi Linear.
9. Ubah warna dari kiri ke kanan #3B7CFB, #9F56EC, #FF31DE dengan opacity 100%.
10. Ubah warna Fill text “LOGIN” menjadi #FFFFFF.
11. Ubah radius Button menjadi 8.
12. Posisikan Login button dibawah Password input dengan jarak 24 dan dari kiri 24.

8. Buat Divider

1. Tambahkan text “or” ke dalam frame, lalu atur font menjadi Rubik, font weight Regular, dan font size 15.
2. Buat dua garis dengan menggunakan Pen atau dengan menekan P pada keyboard dengan masing-masing panjang 150.
3. Pilih text “or” dan dua garis, lalu terapkan auto layout dengan cara tekan Shift + A pada keyboard lalu ubah nama auto layout menjadi “Divider”.
4. Atur posisi layout menjadi Align center.
5. Atur menjadi Horizontal layout, lalu beri horizontal spacing 24.
6. Ubah width Divider menjadi 382.
7. Pilih dua garis yang sudah dibuat, atur width nya menjadi Fill container.
8. Posisikan text “or” di tengah, antara dua garis.
9. Ubah Fill warna garis dan text “or” menjadi #838383.
10. Posisikan Divider dibawah Login button dengan jarak 24 dan dari kiri 24.

9. Buat Social Buttons

1. Tambahkan text dengan cara menekan T pada keyboard, lalu ketikkan “Google”.
2. Atur font menjadi Rubik, font weight Regular dan font size 15.
3. Terapkan auto layout dengan cara pilih text lalu tekan Shift + A pada keyboard.
4. Ubah nama auto layout menjadi “Google button”.
5. Atur posisi text pada auto layout menjadi Align Center.
6. Atur menjadi Horizontal layout dan beri space between 12.
7. Atur horizontal padding dan vertical padding menjadi 16.
8. Ubah width menjadi Fill container dan height Fixed 54.
9. Ubah warna text menjadi #FFFFFF.
10. Ubah Fill warna auto layout menjadi #313131.
11. Ubah radius menjadi 8.
12. Tambahkan icon Google, lalu taruh disebelah kiri.
13. Lakukan hal yang sama untuk membuat Facebook button.

14. Pilih Google button dan Facebook button lalu terapkan auto layout dengan cara tekan Shift + A pada keyboard.
15. Ubah nama auto layout menjadi “Social buttons”
16. Atur menjadi Horizontal layout, lalu beri space between 16.
17. Atur width Social buttons menjadi Fixed 382.
18. Posisikan Social buttons dibawah Divider dengan jarak 24 dan jarak dari kiri 24.

10. Buat Register Link

1. Tambahkan text “Don’t have an account?” ke dalam frame, lalu atur font menjadi Rubik, font weight Regular, dan font size 15 lalu beri warna #FFFFFF.
2. Tambahkan text “Register” ke dalam frame, lalu atur font menjadi Rubik, font weight SemiBold, dan font size 15lalu beri warna #F237E0.
3. Terapkan auto layout pada text “Don’t have an account?” dan “Register”, lalu ubah nama auto layout menjadi “Register link”.
4. Atur menjadi Horizontal layout dan beri space between 8.
5. Posisikan Register link di tengah dan beri jarak di atas Home Indicator 24.

Closing

Wah, terima kasih sudah mengikuti langkah-langkah untuk mendesain login screen nya dengan baik. Semoga bermanfaat ya. See you on the next tutorial 👋.