Skip to content
UI/UX Design

Creating Color Styles

Creating color styles in Figma allows you to maintain consistent color usage across your designs. This is part of the design system and helps ensure that your color elements are uniform and easy to manage.

  1. Select the Rectangle tool
    Press RR to activate the Rectangle tool, then click on the canvas and draw a shape.

    Using the Rectangle tool to draw a new shape on the Figma canvas

  2. Style Your Shape
    With the shape layer selected, use the right panel to adjust the fill color achieve your desired look.

    Styling the shape layer using the right panel in Figma

  3. Create Color Style
    Once you have styled your shape, click on the four dots icon in the right panel under the Fill section to open the Styles menu. Click the + button to create a new color style. Name your style appropriately (e.g., “Primary Button”, “Secondary Background”) and click “Create Style”.

    Creating a new color style from the styled shape layer