Create a new Figma Color style
Tags: figma, figmatips, figmatutorial, uidesign
Published: 2022-01-21 00:35:50

---
title: Create a new Figma Color style
published: true
date: 2022-01-06 19:55:00 UTC
tags: figma,figmatips,figmatutorial,uidesign
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/0*NMmA24mYcD4QoaVS.jpg)

In this quick post, we’ll see how to create, apply, Edit, and delete a color style in Figma.

### Watch Video Tutorial

{% youtube hFL02GVK4U8 %}

### Create a Color Style

To create a new color style, let’s start by creating a new shape and go to **Fill** section and change the shape color to a light blue.

![](https://cdn-images-1.medium.com/max/1024/0*G6YvxRMQlh_pek0j.png)

- Next, hit the **four dots** icons in the **Fill** section to trigger the color styles modal.

![](https://cdn-images-1.medium.com/max/480/0*Az6PdWkFoHuuGVQr.png)

- Hit the **+** icon in the right corner of the **Color styles**  modal.

![](https://cdn-images-1.medium.com/max/486/0*RE4iU_RbmasE7Gw4.png)

- Let’s give our style the name of **Color Style 1 then** hit **Create style**  button.

![](https://cdn-images-1.medium.com/max/874/0*25S_1wCOoytU278_.png)

You can create as much styles as your want.

### Apply a Color Style to a layer

To apply a color style to a frame or a shape layer, select your layer and head to the **Fill** section in the right-hand sidebar.

- Hit the **four dots** icon in the right corner of the Fill section to trigger the styles modal, then select **Color styles 1** to apply the style to your frame.

![](https://cdn-images-1.medium.com/max/492/0*mR2nKXGwfeNe1kse.png)

![](https://cdn-images-1.medium.com/max/1024/0*Lt8f2KdqHlK_lKqp.png)

### Access your File’s Color Styles

To display and access all your file’s styles, all you have to do is to click on the file’s gray. All your styles will be displayed in the right-hand sidebar.

![](https://cdn-images-1.medium.com/max/508/0*scwTKUsn9NzuI22O.png)

### Edit a Color Style

To edit a color style, click on the file’s gray backdrop to display your styles. **Right-click** on the color style and select **Edit style** in the context menu.

![](https://cdn-images-1.medium.com/max/490/0*e1nGvHVQmswH24iF.png)

Once you edit a certain style, the change of the color will be applied automatically to every layer using that same style.

![](https://cdn-images-1.medium.com/max/1024/0*A6gi-Vu3aS7m6jK_.png)

![](https://cdn-images-1.medium.com/max/1024/0*UW5YtdEJaB2WVUjA.png)

### Delete a Color Style

To delete a color style from your Figma file, click on the file’s gray backdrop to display your styles. **Right-click** on the color style and select **Delete style** in the context menu.

![](https://cdn-images-1.medium.com/max/484/0*M9ntE3lBlEJCq34S.png)

That’s everything about creating a color style in Figma. in the next posts we’ll cover more concerning Figma styles.

### Before you go

Feel free to visit our website [**captain-design.com**](https://www.captain-design.com/) where we are sharing generously, ready for commercial use [**Figma and HTML templates**](https://www.captain-design.com/).

You’ll find three things to help you kickstart your next project’s design :

- [**200+ free Figma templates**](https://www.captain-design.com/templates/) **.**
- [**Free Html + Bootstrap 5 templates**](https://www.captain-design.com/templates/tag/html) **.**
- [**Amazing Figma Plugins and UI kits**](https://www.captain-design.com/uikit/) **.**

_Originally published at_ [_https://www.captain-design.com_](https://www.captain-design.com/blog/create-a-new-figma-color-style/) _on January 6, 2022._