Creating Styles

The Styles feature allows you to define a set of properties of an object, that can be reused across your team's designs.

You can use Styles to define the  ColorText and any Effects applied to objects; or to define the structure and appearance of Layout Grids.

Whenever you make a change to a Style's properties, like updating the text color from red to blue, any objects using that Style will be instantly updated.

Like Components, Styles can be shared by publishing them to your Team Library. This allows you to easily establish and maintain consistent styles across your team projects.

Learn more about when to use Styles in our blog post: Best practices: components, styles, and shared libraries.

In this article, we're going to cover:

  1. Color Styles (Including Gradient Styles).
  2. Text Styles.
  3. Effect Styles.
  4. Layout Grid Styles.
  5. Share Styles with your Team.

Check out the video below, or read on to learn more!

Create Styles

You can create a Style from an existing object. This will allow you to save some of those properties applied to an object as a Style, so you can reuse it on other objects.

1 | Color Styles

Color styles can be applied to  FillsStrokes and Text in your designs. You can even create Color Styles for Gradients.

  1. Select the object you'd like to create a style for.
  2. In the Properties Panel, click the Show styles icon (the four dots arranged in a square) next to the property you would like to save. 

    Tip! For  Color Styles, this would be either the  Fill or  Stroke property.

  3. Click the "+" icon in the Color Styles menu to Create style

  4. You'll be prompted to give the Style a name: 

  5. Click the Create Style button to save the Style.

Tip! 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.

Gradient Styles

It's also possible to add both  Gradients and Images as Styles: 

When creating a Style for a Gradient, both the colors used and the Gradient direction, or angle, will be saved to the Style:

2 | Text 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).

The process for creating  Text Styles follows a similar process to Color Styles:

  1. Select the Text you’d like to create a Style for.
  2. Click the Style icon (four dots) next to the Text label in the Properties Panel: 

  3. Click the "+" icon in the Text Styles menu.
  4. Set a name for the Text Style.
  5. Click Create Style to complete the process.

Tip! Text alignment can't be set using a Text Style. You will need to set the alignment of each text block individually.

3 | Effect Styles

You can also create Styles for  Effects, like Inner Shadows or Drop Shadows

  1. Select the object(s) you’d like to create a Style for.
  2. If you haven’t already, add any Effects you’d like to save, to the object(s).
  3. Click the Style icon (four dots) next to the Effects label in the Properties Panel: 

  4. Click the "+" icon in the Effect Styles menu.
  5. Set a name for the Effects Style.
  6. Click Create Style to complete the process.

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.

4 | Layout Grid Styles

Lastly, we can create Styles for  Layout Grids. This is particularly useful if you’re wanting to replicate a specific format or structure across multiple designs.

  1. Create (or select) a Frame in the canvas.
  2. In the Properties Panel, add a Layout Grid to the Frame.
  3. Update the Layout Grid to match the properties you’re wanting to save to a Style. Learn more about Layout Grids.
  4. Click the Style icon (four dots) next to the Layout Grid label in the Properties Panel: 

  5. Click the "+" icon.
  6. Set a name for the Layout Grid Style.
  7. Click Create Style to complete the process.

Share Styles with your Team

You can share Styles with your team, or make them accessible from other Files and Projects, by publishing them to your  Team Library. Learn more about sharing Styles in our Managing and Sharing Styles guide (see below).

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.