Styles allow you to define a set of properties of an object, that can be reused across your team's designs.
Apply a Style to an object
Apply any Styles from your Local Styles, or apply shared Styles that you've published to your Team Library.
- Select the object(s) you'd like to apply the Style to.
- In the Properties panel, click the Style icon (four dots) 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. You can adjust the order of these styles in the file they live in. Learn more.
- Select the Style you want to use to apply it to the select object(s).
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
When you're using the Color Picker, you will be able to switch between Document Colors and any Color Styles shared via your added Team Libraries, using the drop down field provided.
Note: When you pick a color from this section, you are only setting the color, not applying a style.
You may wish to use this to:
- Create a custom color that matches only some of a Style's properties. For example, to create an object with the same color as a built-in style, but at 50% opacity.
- Apply a Color Style to an object or layer that doesn't in a place that doesn’t allow styles. For example, setting the background color of a frame.
Learn more in our Using the Color Picker article.
Switch between Styles
If you want to change the Style that is applied to an object, you can do this from the Style section in Properties panel.
- Select the object(s) you'd like to update.
- In the properties panel, click on the relevant Style.
- The Color Style menu will appear, which shows you both Local Styles and Styles shared via the Team Library.
- Select the new Style from the options to apply the Style to any selected object(s).
Detach an object from a Style
If you no longer want an object to use a specific Style, you can detach the object from the Style. This will allow you to edit the object’s properties again.
- 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.
Share Styles with Team Library
When a Library is enabled, you’ll see the Styles from that Team Library included in the Style picker. You can use any Styles that are shared with you, but you may not be able to edit them.