How to design a simple login page on Figma

Login or sign in page is a page that you will see before you enter and using an app. A page where you type your email address and password and then the app let you enter. Now, I wanna share how I design a login page. A simple, clean, straight-forward, and user friendly login page with Figma. On this case, I’ll design a login page for dashboard website.

Defining the elements

Before start to making shape, or choosing colors, we must to define what will we include on the login page before designing it. A traditional login page at least contains two input field and one button. One email address field, one password field, and one sign in button. This method is commonly known and use for login.

1. Email address field

2. Password field

3. Sign in button

4. Forgot password link

5. Register link

6. Sign in with Google

7. Sign in with Apple

Choosing layout, styles, and colors

I want to make a simple one. So, I decide to use 12-column grid layout and divide a page into 5-column on the left side is for the brand, for the logo of the app, and 7-column on the right side is for the form or where user will interact with.

using grid layout to divide the page

At the top is the title alongside the description below it. And then the Sign In with Google and Sign In with Apple buttons with their own logo next to the text. Below it you will find the form with email address, password, forgot password link, and sign in button with the same blue color.

the form

Outside the card, there is a register link to invite visitors to register if they haven’t yet. Why I place it outside the card? Because it is a sign in page where user’s main intention is to sign in, not to sign up or register. So the sign in form must draw the attention more than the register link.

Here you go, a simple login page design that are ready to implement. I hope it will inspire you how to design on figma. I designed not only this login page, but a whole dashboard pages, if you want to see it you can see it on behance or you can download it here.