How I make a clean UI design for login section with Figma from scratch
By: Arya Rajasa
Tags: Figma, UI, Mobile, Design, UX

UI Design

Color

Okay, so this is the interesting part and my favorite part of designing an interface. Putting color on all the components! 🎉 If you want to achieve a clean design, you have to choose a soft or pastel color. You can find a lot of color palettes on the internet, or you can make it by yourself

Color palette I found on Pinterest

But this is why I love using Figma, Figma really make our work a lot easier. We can install a lot of cool plugins on it. Such as color palette. Yes, they have color palettes plugin that makes our workflow so much easier and faster obviously. If you go back to your dashboard or drafts when all your files are stored, on the left panel you can see plugins. So if you want to install a plugin you can just click it and find a plugin that you want then press the install button.

This is the color palettes plugin that I installed on my Figma

So how you used this plugin? Simple. Just go to your file where you make the wireframe earlier. And in the top corner left there’s a menu that you can click. When you click it there’s an option for plugins, and there’s where your plugins stored.

There are several plugins that I’ve installed

Using the color palettes plugin is just by clicking the plugin and a new window will open up. There’s a lot of color plugin you can use, just click the color and you’ve automatically copied the hex code of the color.

So let’s say you’ve chosen the color. Now click the component where you want to put a color on it. And look at the right side of the panel, there’s an option called “fill”. Now click the fill and paste the hex code that you’ve copied earlier.

In this design I want my greeting text to have two colors, the app name should have a different color to make a variation and to bold the app name. So how to do it? Just block the text that you want to change the color and same as before, click the fill and paste the hex code of the new color.

And I only put two color tones on this design just to make it more simple. It’s dark green and light green. If you’re curious the hex code is #59B791 for the dark green and #ABE4CD for the light green. For the form text and the button text, I also used different colors. I used light grey as my form text, the hex code is #8C8B98. And the button text is just white color.

Little tips Use a darker color for the link than the other text, so the user will know that there’s a link that can be click/pressed. Now it should look like this.

Icon

It almost there! 🎉 So, what do you think needs to be added? Right! there’s two rectangle shapes besides the form text that we still don’t know what to do with it. And now what do you think should we put there? Yup, some icons!

Photo by Harpal Singh on Unsplash

There’s a lot of ways to make an icon, you can make it by yourself and save it as svg format then put it to your frame or download it on the internet then put it to your frame again. We all agree it’s kind of complicated right? But don’t worry, as I said before Figma really makes our work a lot easier. We can use plugin again for the icon. There are a lot of icon plugins on Figma, but I installed the one called Iconify.

Now I’ll show you how to use this plugin. Basically it’s the same as the previous plugin. Just go to the place where your color palettes plugin stored. If you already installed iconify plugin, there will be shown on the option. And just click it.

This is how the plugin looks like

Now you can find any icon that you want. And if you want to make your design clean and simple, make sure you use the same icon style. Just take a look at the icons that I’ve picked.

I’m using line style for all icon

Finishing

After all the layout is done, we need some improvements. As you can see the design is a little bit boring. So we have to add something. In this part you can use your imagination to make the design “less quiet”. So I’ll try to make something with the shape tool.

I’m trying to make geometric shapes by using the circle tool. So all you have to do is making a small circle around 5px. Then copy-pasted it until you think it’s enough, and I’m making it 9x9. And then use the same color as the form text, and group all the circle by pressing ctrl+g or command+g if you’re using macOS.

Now I want to make a curved line with the pen tool then copy-pasted it to make an abstract shape. You can find the pen tool the same as the other tool, it is right beside the shape tool. And to use it all you have to do is just click and hold until it bent.

Then change the stroke color the same as the form text color. You can change the stroke color in the right-side panel, it’s in the same place as the fill option. And group all the line then put it wherever you think it fits. I put mine on the top left of the frame.