Figma 101: Create style and theme for your Figma project
In this article, I’ll show how to create style and themes for your projects. Creating style and theme helps you to set color, font, and effect styles. Besides the easy setting, it also helps you to update all instances when you have any changes in your project.
If you are not familiar with Figma or want to know about basic tools, you can read my previous article.
Let’s start to create your style and theme!
Step 1: Create any shape and change its color.
Step 2: Click on the style icon in the fill section and create your color style.
Then, try to set the component color by using the color style.
If you edit your color style, all components which used that color will be changed automatically.
However, you can detach your color style from each component by clicking on the detach icon. Then, that component won’t be changed, if you make any changes to your color style.
You can also apply this technique to set your font and effect styles as well.
After you create your color or text styles, all created styles will be shown in the design tab.
If you work as a team, I recommend you to create another page that stores all information about the styles of your project such as color palette, typography, or font styles.
Page in Figma
Inside a Figma file, you can have multiple pages. By default, Figma will provide the first page after creating the project.
Each page has its own canvas in which users can adjust the layouts, have many layers, frames, groups. Using a page will help you to organize your design file or easy to collaborate with the team.
Create a page
There are two ways to create the page which are adding a new page or duplicating the page.
- Adding a new page
Click on add icon and a new page will be automatically shown up.
2. Duplicate a page
Right-click the page that you want to duplicate. The new page has all components as the original page has.
Edit or delete pages
To rename the page, you can double-click the page name or right-click and select the rename. To delete the page, you can right-click the page and select delete.
Reorder pages
You can drag the page up and down to order pages.
Furthermore, Figma also provides inspect features for users to copy the CSS, iOS, or Android code. You can inspect the component by clicking on it and selecting the inspect tab.
Hope that this article can help you somehow, thank you for reading ☺
