The Styles feature allows you to define a set of properties or attributes of an object, that can be reused across your team's designs.
In this article, we're going to cover how to:
- View Local Styles
- Reorder Styles
- View, Edit and Delete Styles
- Group and Name Styles
- Publish Styles to your Team Library
View Local Styles
Once you have created at least one Style within a file, you will be able to see a list of Local Styles in the Properties Panel on the right, if you have nothing selected.
Styles will be grouped by the Style type (Color, Typography, Effects, and Layout Grids) and will appear in the order they were added.
You can change the order they appear in, so that they are easier to navigate. Click and drag the Styles in the Properties Panel to change the order they appear:
If you are working with multiple Team Libraries, you will see all of your Local Styles and Shared Styles in the Styles menu. Styles will be ordered alphabetically by team name, then file name.
View, Edit, and Delete Styles
You can also view or make any changes to Styles, directly from the Styles panel.
View and Edit
Hover over the Style in the list and click the Edit icon when it appears:
Or, Right-Click on the Style in the list and choose Edit Style from the options:
At the top of the Edit Style panel, you can view or update the Style's Name, as well as Add or update the Style's Description.
Underneath the name and description, you can see a preview of the Style, followed by the Properties included:
You can then:
- Make any changes to the properties listed.
- Click on the eye icon to hide or show the property on any objects the Style is applied to.
- Click the "-" to remove the property from the Style.
Tip Any changes you make to the Style here will update any objects in the file that have this Style applied.
Delete a Style
If you would like to remove a Style, you can do this directly from the panel.
- Right-Click on the Style in the list.
- Select Delete Style from the options:
- The Style will be removed from the Local Styles menu and can no longer be used. Any objects that had this Style applied will be detached from the Style, but will retain their existing properties
Group and Name Styles
To make finding and selecting styles easier, you can organize your styles into groups by naming them with a slash naming convention.
For example: to group all of your text Color Styles together, you would name them Text/Purple, Text/Green, Text/Blue etc. Figma will then display those Color Styles together, under a "Text" heading.
Tip Your Styles will appear in the Styles Panel in the order they appear in the Local Styles list. To change the order your Styles appear, you can update them there!
Share Styles via Team Library
To share Styles with your team or make them accessible from other files and projects, you can publish them to your Team Library.
Publish to Team Library
Styles are published along with any Components when you publish a file to the Team Library.
- Click the Team Library icon within the Assets menu above the Layers Panel on the left to open the Team Library, or use
- macOS: Option-3
- Windows: Alt + 3
- In the Current File section, click Publish next to the file you'd like to publish:
- Add Description of the changes you've made to the file:
- Click to expand the Styles & Components section and view a list of all Styles and Components that will be included:
- Click Publish Changes to publish them to your Team Library.
Use Styles from 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.
When you enable a Library for a file, all editors in that file (that have permission) will have access to those Styles and Components.
When you Publish any changes to the Team Library, you will be prompted to update the Team Library in any other files that use these Styles. This ensures any objects that use these Styles remain up to date.