Styles in Figma: Creating Consistent Design Systems for UI/UX

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.