What are Styles in Figma ?

Styles provide a systematic way for you to create a design system.

Styles can be created and applied to typography (text), colors, images, videos, effects and grids.

Written by Oscar de la Hera Gomez

First published on 08/13/2023 at 15:00

Last Updated on 08/13/2023 at 15:45

<p>A flower that represents Figma with the text "What are Styles" beneath it.</p>

Styles provide a systematic way for you to create a design system.

Styles can be created and applied to typography (text), colors, images, videos, effects and grids.

Subscribe Read Figma's guide on Styles

How do I create Styles ?

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

An example of how you can create a color style.

To learn how to create color, typographic (text), image, effects or grid styles please follow the relevant tutorial below.

How to create and use color styles How to create and use text styles How to create and use image styles How to create and use effect styles How to create and use grid styles

Can I group them in categories ?

A screenshot of Figma with our styles under the greyscale folder, with a highlight on Black which was dragged into the Greyscale folder.

Yes, follow the tutorial below to learn how.

How to group styles in folders

How can I edit, remove, detach or delete a style ?

<p>A screenshot of Figma with nothing selected. We have highlighted that if you right click on a style under local styles on the right menu sidebar, a menu will appear that allows you to edit the style by clicking "edit style."</p>

Right click on a style to open up a menu that allows you to edit the style.

To learn how to change or update, remove, delete or keep a styles properties whilst unlinking it (detach), please consult the relevant tutorial below.

How to edit a style How to delete a style How to remove a style How to detach a style

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

We recommend that you learn about Variables using our Figma Variables Guide or search our blog to find educational content on learning how to use Figma.

Check out our Figma Variables Guide 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.

Subscribe Contact Us Visit our Blog View our Services View our Work