The style feature allows you to define a set of properties of an object, making it reusable in team design.

You can use styles to define colors, text, and layer effects applied to objects, or to layout the structure and appearance of the grid.

Whenever you change the properties of a style, such as updating the text color from red to blue, any objects using that style will be immediately updated.

Like components, styles can be shared by publishing them to team libraries, making it easy to establish and maintain consistent styles in team projects.

In this article, we will introduce:

Color styles (including gradient styles), text styles, layer effect styles, layout grid styles, and share styles with your team.

Create Style

You can create styles from existing objects, which will allow you to save certain properties applied to objects as styles so that they can be reused on other objects.

1. Color style

Color styles can be applied to fill, stroke, and text in design, and you can also create color styles for gradients.

Select the object you want to create a style for.

In the Properties panel, click the style icon (four points) next to the attribute you want to save. (For color styles, this can be a fill or stroke attribute.)

Click the "+" icon in the Color Styles menu to create a style:

The system will prompt you to specify a name for the style

Click the Create Style button to save the style.

prompt

We suggest naming styles based on the way you use them in your design, rather than just using colors as names.

To make it easier to find and select styles, you can also organize them into groups by naming them using slash naming conventions. In the style menu, you will see local styles and any styles shared through the team library. The styles will be sorted alphabetically by team name and then by file name.

For example, to combine all text color styles together, you can name them Text/Purple, Text/Green, Text/Blue, etc. Then, Figma will display these color styles together under the "Text" title.

Gradient Style

Gradient fill and image fill can be added as styles.

When creating a style for gradients, the color and gradient direction or angle used will be saved to the style:

2. Text Style

Styles can also be applied to text, which is very useful when you want to set different properties for different text blocks.

You can apply text styles to the entire text object, or apply them to some of the text within it.

This is very suitable for defining the style of the title (such as h1, h2, h3) and the main text, as well as determining how to set different text styles in paragraphs (such as links).

The process of creating text styles follows a similar process to color styles:

Select the text you want to create a style for.

Click the style icon (four points) next to the text label in the property panel.

Click the "+" icon in the Text Styles menu.

Set the name of the text style.

Click Create Style to complete the process.

prompt

Text alignment cannot be set using text styles. You need to set the alignment for each text block separately.

3. Layer effects

You can also create layer effects such as inner shadows or shadows.

Select the object you want to create a style for.

If not already added, add the desired layer effects to the object.

Click the style icon (four points) next to the effect label in the property panel.

Click the "+" icon in the Effect Styles menu.

Set the name of the layer effect.

Click Create Style to complete the process.

prompt

You can create styles for objects with multiple styles, and all effects will be included in the final style.

For example, if you have multiple attributes applied to an object (such as two projections and one inner shadow), all of these attributes will be saved to a layer style.

4. Layout Grid Style

Finally, we can create styles for layout grids, which can be particularly useful if you want to replicate specific formats or structures across multiple designs.

Create or select a frame on the canvas.

In the property panel, add "Layout Grid" to "Frame".

Update the layout grid to match the properties you want to save to the style. Gain a detailed understanding of layout grids.

Click on the style icon (four dots) next to the Layout Grid in the Property Panel.

Click on the "+" icon.

Set the name of the layout grid style.

Click Create Style to complete the process.

Share styles with your team

You can share styles with the team or access them from other files and projects by publishing them to the team library.

Learn more about shared styles in managing and sharing styles.