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 a list of your Local Styles.
- Reorder your Styles.
- View, Edit and Delete individual Styles.
- Group and Name Styles.
- Share Styles | Publish Styles to your Team Library.
1 | View your 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.
This will only show up when you have nothing selected:
2 | Reordering Styles
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.
If you are working with multiple Style Libraries, you will see your Local Styles and any Shared Styles in the Styles menu. Styles will be ordered alphabetically by team name, then by file name.
3 | 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.
1.Right-Click on the Style in the list.
2. Select Delete Style from the options:
3. 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.
4 | Grouping and Naming 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!
5 | 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.
Tip! Publishing Styles is included in our Starter Teams plan for free. However, you will need to be on one of paid Professional Team Plans to be able to publish Components to a Team Library.
Learn more in our Team Library article.
1.Click the Team Library icon in the top-right corner of the screen:
2. In the Current File section, click Publish next to the file you'd like to publish:
3. Add a Description of the changes you've made to the file:
4. 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.
Using Team Libraries
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.