In Figma, designers can create a comprehensive and organized color palette for their design system. How can you create a color style in Figma?

• Select a color using the color picker
• Click on the "Fill" section in the right-hand menu
• Create a new color style by pressing “+” or use an existing one
• Add a name and description that specifies what this color will be used for
• Specify other color properties

Designers can easily apply color styles to other elements or text layers. To do so, go to the Fill section in the right-hand sidebar and click the four dots icon in the upper right corner to bring up the Color Styles modal. From there, select your preferred color style. When it comes to naming color styles, it's best to choose a naming convention that is clear, concise, and consistent:

• Semantic naming convention utilizes color names that describe the intent, such as "Primary," "Secondary," "Danger," "Background," and more. This naming approach emphasizes the color's value rather than relying on a name and numeric scale combination. Other examples of semantic names include “Brand,” “Accent,” “Warning,” “Alert,” and “Success.”
• Contextual naming convention defines color names for specific types or categories of components, such as "color-primary-button," "color-default-icon-small," "color-error-modal," and others. This method is more suitable when working with more extensive design systems or collaborating with other designers, as it promotes consistency and clarity across the entire design file.