How to use color styles on Figma

beginner 8 min read Updated 2026-03-18

Quick Answer

Color styles in Figma allow you to create reusable color swatches that can be applied across your designs for consistency. You can create, organize, and apply color styles through the Properties panel, and any changes to a style will automatically update all instances where it's used.

Try Figma Full Figma Review

Prerequisites

Basic Figma account
Familiarity with Figma interface
Understanding of design layers
Knowledge of color properties

Step-by-Step Instructions

Create a new color style

Select an object with the desired color, then go to the Properties panel on the right. Click the four dots icon next to the fill color, then select Create style. Name your color style in the dialog box and click Create style.

Use descriptive names like 'Primary Blue' or 'Text Dark' instead of generic names for better organization.

Access the color styles library

In the Properties panel, click on the fill color field of any selected object. You'll see a Local styles section showing all your created color styles. You can also access styles through the Assets panel in the left sidebar.

Apply color styles to objects

Select the object you want to color, then click the fill color field in the Properties panel. Choose from your Local styles section by clicking on the desired color style. The object will immediately adopt that color and become linked to the style.

You can also drag and drop color styles directly from the Assets panel onto objects.

Edit existing color styles

Right-click on a color style in the Assets panel or Local styles section and select Edit style. Modify the color using the color picker, then click Update style. All objects using this style will automatically update to reflect the changes.

Use the eyedropper tool to match colors from other elements or external sources when editing styles.

Organize color styles into groups

When creating or editing a style, use forward slashes / in the name to create groups. For example, name styles Primary/Blue and Primary/Red to group them under 'Primary'. These will appear as folders in your styles library.

Create a consistent naming convention like 'Brand/Primary', 'Text/Heading', 'Background/Light' for better organization.

Detach and manage style instances

To break the connection between an object and its color style, select the object and click the detach icon (unlink symbol) next to the color style name in the Properties panel. The object will keep its current color but won't update when the style changes.

Use detaching sparingly to maintain design consistency across your project.

Publish and share color styles

In team projects, publish your color styles by opening the Assets panel, clicking the book icon, then Publish styles. Add a description of changes and click Publish. Team members can then access these styles in their Team library section.

Only publish finalized color styles to avoid confusion among team members.

Common Issues & Troubleshooting

Color style not appearing in the styles list

Make sure you're looking in the correct library (Local styles vs Team library). Check if the style was created in a different file or if you have the right permissions to access team styles.

Changes to color style not updating all instances

Refresh the page or restart Figma. Some instances might be detached from the style - select them and reapply the color style from the Local styles section.

Cannot edit or delete a color style

Ensure you have edit permissions for the file. If it's a team library style, you may need to open the original library file where the style was created to make changes.

Color styles appearing duplicated or with similar names

Check your naming convention and use the Rename option to clean up duplicate styles. Merge similar styles by copying the color value and deleting unused duplicates.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Figma website before purchasing.

Visit Figma View Figma Pricing