Before you start
Who can use this feature
Available on any plan
Anyone with can edit access can create and use styles
Styles are reusable collections of properties that you can apply to elements in your designs.
Styles can hold a combination of values, where all values get expressed at once. For example, you can store font family, font size, and font weight properties in one text style simultaneously. When you apply the text style on a text layer, all properties will be used on the text layer at the same time. When you make a change to a style’s properties, such as updating a text style’s fill from red to blue, Figma will automatically apply those changes to any objects using that style.
Tip: Like components and variables, styles can be published to a design library, allowing you to easily establish and maintain consistent styles across your team or organization.
Types of styles
There are five different types of styles available in Figma:
Color styles
Color styles can be created for fills, strokes, images, gradients, patterns, and shader fills. When creating a style for a gradient, both the colors used in the gradient and the gradient’s direction or angle are saved to the style.
Text styles
Text styles can be created for the font family, size, line height, and letter spacing. Text styles can be applied to an entire text layer or to portions of text. This is useful for defining the styles of headers, body text, and inline text, such as linked text.
Effect styles
Effect styles can be created for drop shadows, inner shadows, layer blurs, background blurs, texture, noise, and shader effects. A style can include more than one effect and all applied properties will be saved to the style.
Note: The icon used to represent a shadow style will vary according to the shadow’s type and x, y values.
Layout guide styles
Layout guide styles can be created for rows, columns, and uniform grids. This is useful for replicating a specific format or structure across multiple designs.
Note: The icon used to represent a layout guide style will vary according to type: uniform grid, columns, or rows
Animation styles
Animation styles can be created for position, scale, rotation, size, opacity, and path animations in Figma Motion. You can include multiple animation types in a single animation style to create complex movement. These animations can also use timing and easing variables, letting you create motion that is consistent with your company’s motion design system.
Note: Animation styles can only be applied to objects while in Figma Motion.
Note: Check out our Community playground file to get hands-on experience using custom animation styles.
Related articles
Read these articles to learn more about creating and using styles: