Before you Start
Who can use this feature
Users on Any Plan
Users with Edit access to a File can create and edit Styles.
Users with View access to a File that was published can use Styles from that library in Files where they can Edit.
Styles allow you to define a set of properties of an object, that can be reused across your designs.
Figma supports Styles for the following features:
- Paints/Colors: Fill, Stroke, Background Color
- Text: Font Family, Size, Line Height, Spacing.
- Effects: Drop Shadow, Inner Shadow, Layer Blur, Background Blur.
- Layout Grids: Row, Column, Grid.
We recommend naming Styles based on how you will use them in your designs, vs simply using the color as the name.
To make finding and selecting styles easier, you can also organize your styles into groups by naming them with a slash naming convention.
In the Styles menu, you will see your Local Styles and any Styles shared via the Team Library. Styles will be ordered alphabetically by Team name, then File name.
For example: to group all of your Text Color Styles together, you would name them Text/Purple, Text/Green, Text/Blue etc. Figma will then display those Color Styles together, under a "Text" heading.
Paint / Color Styles
Color styles can be applied to Fills, Strokes, Background and Text. You can even create Color Styles for Images or Gradients.
- Select the object you'd like to create a style for.
- In the Properties Panel, click the Styles icon next to the property you would like to save/
- Click the "+" icon in the Color Styles menu to create a new Style.
- Give the Style a name and click Create Style.
Note: When creating a Style for a Gradient, both the colors used and the Gradient direction, or angle, will be saved to the Style.
Styles can also be applied to Text. This is great when you want to set different properties for different blocks of text.
You can apply a Text Style to an entire block of text, or apply it to just some of the text within a block.
This is perfect for defining the style of your headers (e.g. h1, h2, h3) and body text; as well as determining how to style text within a paragraph (e.g. links).
Note: Text alignment can't be set via a Text Style. You will need to set the alignment of each text block individually.
The process for creating Text Styles is the same as a Color Style:
- Select the text you’d like to create a Style for.
- In the Text section of the Properties Panel, click the Style icon.
- Click the "+" icon in the Text Styles menu.
- Give the Text Style a name and click Create Style.
You can also create Styles for any Effect. This allows you to save those settings for future use.
- Select the object(s) you’d like to create a Style for.
- If you haven’t already, add any Effects you’d like to save, to the object(s).
- In the Effects section of the Properties Panel, click the Style icon.
- Click the "+" icon in the Effect Styles menu.
- Give the Effects Style a name and click Create Style.
Tip! You can create Styles for objects with multiple Effects applied and all Effects will be included in the final Style.
For example: If you have multiple properties applied to an object (e.g. two Drop Shadow Effects and an Inner Shadow), then all of those properties will be saved to the Effect Style.
Layout Grid Styles
You can also create Styles for Layout Grids. This is useful if you’re wanting to replicate a specific format or structure across multiple designs.
- Create (or select) a Frame in the canvas.
- In the Properties Panel, add a Layout Grid to the Frame.
- Update the Layout Grid to match the properties you’re wanting to save to a Style. Learn more about Layout Grids.
- In the Layout Grid section of the Properties Panel, click the Style icon.
- Click the "+" icon to create a new Style.
- Give the Layout Grid Style a name and click Create Style.