Before you start
Who can use this feature
Creating styles is available on all plans can create styles. Publishing styles is available on Education, Professional, Organization, and Enterprise plans.
Anyone with can edit access to a file can create and edit styles.
Anyone with can view access to a published file 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.
Create styles for:
-
Text: font family, size, line height, spacing
- Text styles can be applied to an entire layer or portions of text. This is perfect for defining the styles of headers, body text, and text within paragraphs—such as linked text.
- Because text styles can’t be created for text alignment, you must set alignment for each block individually.
-
Colors: fill, stroke, image, gradient, pattern
- When creating a style for a gradient, both the colors used and the gradient direction, or angle, will be saved to the style.
- Effects: drop shadow, inner shadow, layer blur, background blur, texture, noise
-
- A style can include more than one effect and all applied properties will be saved to the style.
- Shadow styles are represented as icons in the Effects section of the right sidebar and vary according to their direction. These icons can also vary between drop or inner shadows and their x, y values.
-
Layout guides for frames: row, column, uniform grid
- This is useful for replicating a specific format or structure across multiple designs.
- Guide styles are represented as icons in the Layout guides section of the right sidebar and vary according to type: Uniform grid, Columns, or Rows. Learn more about layout guides.
From local styles
Local styles are style definitions that exist in the current file. You can access local styles in the right sidebar when nothing is selected, or from the style picker. Styles are grouped by type:
- Text
- Color
- Effect
- Layout guide
To create a new local style:
- In the right sidebar, click next to Local styles.
- Select the property you’d like to create a new style for.
- Give the style a name and description and click Create style. Descriptions display when hovering over the style in the style picker.
From an existing object
- Select the object or frame you’d like to create a style for.
- In the right sidebar, click next to the section corresponding to the style you want to create.
- Click in the style picker. In the Create new style modal, you can click Show more options to view and edit style properties.
- Give your style a name and description and click Create style. Descriptions display when hovering over the style in the style picker.
Tip! You can give Styles both a name and a description. We recommend using the name and description to communicate how Styles should be used in your designs, versus simply using a description of the color.
To make finding and selecting styles easier, you can also organize your styles into folders. Learn more about naming, managing, and sharing styles.
Tip: If you are using Figma’s new design, UI3, then you can create a new style using the eyedropper tool.