Hello everyone! Today I decided to share a simple login page that I made with my Figma and some procedures that probably one or two people can learn from. I said in my last post that I was going to share some designs before I shared some codes of what I do when I am able to learn. 

![](https://images.ecency.com/DQmTAZGuGNo4X1rXZFbbahFWqnDXSi8e4DtFwbocAUyfUbg/screenshot_13_.png)

To start with, I created a frame, which is where I will be doing all the login pages. 

For the header, user login, I used:
Font: Inria Serif
Font Style: Bold
Font Size: 20

For the containers:
Font: Inria Serif
Font Style: Regular
Font Size: 15
Container width: 251
Height: 20
Corner radius: 2

Login button:
Font: Inria Serif
Font Style: Bold
Font Size: 20

![](https://images.ecency.com/DQmXyjAk5iLc2wiwBqHfCoKkUTxr5kENHefh4Uzmbf4Hzsb/screenshot_14_.png)

I filled it with a color to separate it from the main work page, but the color is a family of white. I added a text, which is the login text, and also added a frame for the full name segment.

![](https://images.ecency.com/DQmVGRq8GvQxEgctTK79P4Z9jHHV5wrKXwEd7rpaEis6pcN/screenshot_15_.png)

After that, I added the color black to the container that I created for the full name and then created another container. Initially, it was supposed to be username and password, but I got carried away, and there will be corrections to that.

![](https://images.ecency.com/DQmej5h1zFipMfH9mHoJ8X5UKCZL1UDh91P9YJt96dXT7R6/screenshot_17_.png)

After creating the container for the username, I created the login button, still using a frame, but I will align everything later because this is still a work in progress. After I had done all that, I added a full color to the layer frame and used a linear color design to make it look so different. More so, I was actually looking for a color to make it look unique, and I decided to use the green and white mixture.

![](https://images.ecency.com/DQmYSqTrdb7h4gTYeVyStVo5czdZCjNm6dGzRB9itQ6XFbS/screenshot_18_.png)

Now, it is making sense after I have made some design corrections to the design. Now I have made a decision on what to do, and you can see how different it looks. Then I had to add some icons and fake text to each container to make the user understand when he or she wanted to use the login page.


![](https://images.ecency.com/DQme1ZiL68Y3pwXRHxue6n1GnLvRDhfyihkhxSF5CMaBxvK/screenshot_19_.png)

I got these icons from iconify where you can get a series of icons to use for your designs to make them look so attractive and appealing to everyone. After I added the icons from iconify, I had to reduce the sizes of the icons so that they could fit the container, and then I aligned them to the left side of the container.  The login button was aligned in the center to give it a different look.

![](https://images.ecency.com/DQmeRS1u1CwdJmujMo5RjAukUUqy4fBm7WmRQpAUuprSddn/screenshot_20_.png)


And after all the design work, I arrived at the final stage of the design, where I was able to make a login page with a username and password container and also a login button.

![](https://images.ecency.com/DQmQVZ7JbUcYLF9zrVXErdq5dYLjcL1T3X81679ZgA2hmhn/screenshot_21_.png)
**FINAL DESIGN**

This is just a free design I made in my head without getting inspiration from anywhere. I actually decided to try it out and see if I could come up with something meaningful without getting inspiration from anywhere. Lo and behold, I was able to come up with that.

To anyone who might have a correction to this, you are very welcome, and I will appreciate that in the comment section of this post. We are all here to learn, and I will be looking forward to learning from you all. Corrections are allowed and welcome.