Course Content
UI/UX with Figma
UI/UX with Figma
Styles
Styles help organize colors and text in a project, eliminating the need to remember their properties. It is a fast way to organize your project.
- To create a color style, select an object, go to the Design Panel, click the Fill icon, then click the (+) icon to create a new style;
- Name the style and optionally add a description;
- You can apply styles by selecting the object, navigating to Fill, and clicking the four dots to access saved styles;
- Create text, go to Typography in the Design Panel, and click the four dots;
- Click + to create a new text style, name it, and set properties;
- Using the slash naming technique (e.g., Red/Brick and Red/Pastel) is very helpful if you want to organize the styles in groups. These grouped styles can be collapsed or expanded in the Local Styles panel;
- To modify a style, detach it (similar to detaching an instance) and apply desired changes;
- To delete a style, right-click the style in the Local Styles panel and select Delete.
Thanks for your feedback!