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 or attributes of an object. You can create Styles for Colors, Text, Effects, and Layout Grids and reuse them across your designs.
Apply a Style to an object
Apply any Styles from your Local Styles, or apply shared Styles published to your Team Library.
- Select the object(s) you'd like to apply a Style to.
- In the Properties panel, click the Style icon next to the property you want to update.
- In the Styles menu, you will see your Local Styles and any Styles shared via the Team Library. Figma orders Styles in the Style panel accordingly:
- Alphabetically by team name
- Alphabetically by file name
- Individual Styles appear in the order they were created. Learn about grouping and reordering Styles.
- Search and select the Style you want to use to apply it to the select object(s). The Style picker can be viewed as a list or grid.
Tip! If you aren't able to access Styles from the properties panel, they may not be shared to your Team Library yet. Learn more about sharing Styles in our Managing and Sharing Styles article.
Use the color picker
You can also use the color picker to apply colors from Styles to objects. This is handy for situations when you want to:
- Create a custom color that matches some of a Style's properties. For example: use a color from a style at only 50% opacity.
- Apply a Color Style to an object or layer in a place that doesn’t support styles.
The color picker allows you to switch between colors in the file (Document Colors) and from your Libraries. Click the to select a palette from an enabled library:
Caution: When you select a style from the color picker, you are only setting the color, not applying a style.
Switch between Styles
You can change the Style that is applied to an object from the Properties panel in right sidebar.
- Select the object(s) you'd like to update.
- In the Properties panel, click on the Style next to the relevant property.
- Use the Style picker to search for and select the new Style.
Detach a Style
When you detach a style from an object, that object will keep its existing properties. You can then make changes to those properties, as desired.
This is useful when using existing Styles as the basis for future Styles or iterations.
To detach a Style from an object:
- Select the object(s) you'd like to remove the Style from.
- In the Properties panel, hover over the relevant style.
- Click the Detach Style icon when it appears.
- You can now make any changes you want to the object, independent of the Style.
Tip! You can also edit any Style that's applied to an object by selecting the Style and clicking the Edit icon in the Color Styles menu.