How to create and use color styles in Figma

A step by step tutorial on setting up color styles in Figma.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 07/05/2022 at 12:07
Last Updated on 08/13/2023 at 15:21
A flower representing the Figma with the text 'Color Styles' below it.

A step by step tutorial on setting up color styles in Figma.

SubscribeWhat are Styles in Figma?

Step One: Create your colors

In Figma, create your colors. A sample of how we approach it is shown in this visual.

In Figma, create your colors.

How to change the background color of a frame or shape

Step Two: Select a color & click on Style

In Figma, select your color and press select style from the fill menu on the right hand side.

Select a color that you wish to turn into a style and press select style from the fill menu on the right hand side.

Step Three: Create a new style

In the menu that pops up, press the + button to create a new style.

Press the + button in the modal that appears to create a new style.

Step Four: Name & select Create Style

In the modal that appears, type in the name of the color style that you wish to create and subsequently press Create Style.

In the modal that appears, type in the name of the color style that you wish to create and subsequently press Create Style.

Step Five: Use the Style

Your color should now appear under the Color Styles.

Your color should now appear under the Color Styles.

If you select that color it will change the color to the saved color style.

If you select that color it will change the color to the saved color style.

If at any moment you want to edit the style, remove, delete or detach it, follow one of the tutorials linked below.

How to edit a Style in FigmaHow to remove a Style in FigmaHow to delete a Style in FigmaHow to detach a Style in Figma

Looking to learn more about things you can do with Figma ?

Search our blog to find educational content on learning how to use Figma.

Search our Blog

Any Questions

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.

SubscribeInquireView All PostsView All ServicesView All Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe