Hi, I’m Viputh
Figma is an amazing tool to use and create a UI Designs, though for starter it can be confusing as there are many technical skills such as creating a Component & Variable.
Here is a quick guide on to use them, to learn more you can check on Youtube and Figma website.
How to create Components?
What is Components?
A component is a reusable design element that can be used multiple times across a project. When you create a component, you establish a "master" version that can be duplicated as instances. Changes made to the master component automatically update all its instances, ensuring consistency throughout the design. Components are commonly used for repeating elements like buttons, icons, or UI elements, allowing for efficient design updates and maintaining a cohesive style across different pages or screens.
1. For this example, we gonna make a button. So design any button however you like.
*Best create the button using the Frame (Key F)
2. On your top right you will see a "Create component" icon, click on it to turn your button into a component.
Once create your button will have a purple outline to indicate that it become a component.
3. Before you can use the button, you need to create a variant of it by clicking it on the icon at the same area of "Create component".
This will result with creating another button component, the reason for this, if you want to show if the button as hover, you can edit the color of it.
4. Since there is 2 type of button, you need to make the first component as the default, easily go to the right side click on "Property 1" and change it to any name, but I call it "State"
Do the same for the one below, name it however you like, but best name according to what role it do, I will name it as "Pressed" since if the button is pressed, it turn darker.
5. Now that you created the button, whenever you need to use the button again, you can just get it from your local components in the assets tab. Simply just press and hold to drag it out.
How to create Variables?
What is variables?
Variables allow you to store and reuse values like colors, text, or numbers across your designs. Instead of manually changing these values in every place, you can create a variable, assign it to elements (like buttons or text), and easily update it in one spot to see the changes everywhere. Variables help keep your design consistent and make updates faster and easier.
1. For this example, we gonna make a colour variables. Just choose any color you like. First click on the setting button on the right
2. After you select that button, this window will pop up. All you have to do is press Create variable button.
Since we make color variable, just select color
3. Once you click color, this will pop up, you can set the value to any color of your liking and most importantly set the name
For example: I set the name as "bg-brown" meaning the background is brown with a specific color code
4. Now that you created, the variable will be saved and can be reused everytime, without the need of remembering the color code, simply just pick it. By going to Libraries, then pick the color you made.
In conclusion, variables are helpful for when you have a lot of task, you can just pick it up from the list in libraries, saving time the need to adjust every single frame.
It is useful in determining the colors of an object such as a background and a button but as well as string, number and boolean.
