Before you start

Who can use this feature

Anyone on any plan can create styles. Anyone on Education, Professional, Organization, and Enterprise plans can publish styles to libraries.

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 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 so you can reuse them across your designs.

View styles

Local styles are styles that exist in the current file. You can access local styles in the right sidebar when nothing is selected, or from the style picker.

To view styles from other published files, you can view them in the style picker for a selected property. Learn more about enabling libraries in a file →

Right sidebar

Once you have created at least one style within a file, you can view them in the Local styles section of the right sidebar.

You'll need to make sure you have nothing selected in the canvas first:

• Click on an empty spot in the canvas
• Press Esc to deselect your current selection

View any local styles in the Design panel of the right sidebar. Figma groups styles by type:

• Text
• Color
• Effect
• Layout grid

Style picker

View local styles, and styles from other libraries, in the style picker.

Click the styles icon next to the relevant property in the right sidebar. Figma will open the style picker which lets you to view any styles available for that property.

The default order for styles in the style panel is:

• Alphabetically by team name
• Alphabetically by file name
• Individual styles are in the same order as they appear in the right sidebar

You can toggle between list and grid views

Manage styles

To make changes to a style, you will need to edit the style definition in its original file. It's not possible to make changes to the style from another file.

Group styles

To make finding and selecting styles easier, you can organize your styles into groups. This can be done by using the / naming convention and by creating folders.

Group by folder

You can group styles by creating folders from the Design tab of the right sidebar. Folders will be reflected from the Local styles section of the right sidebar and in the style picker when you click for a given property.

To create a folder:

1. Select one or more styles:
   • Press Shift and click to select a range styles
   • Press ⌘ Command / Control and click to select multiple non-adjacent styles.
2. Right-click the selected style(s) and click Add new folder.
3. Name the new folder and press Return / Enter to save.

Once created, the styles in the folder will be renamed according to their new heirarchy within the styles list. In the example below, the style Brand / Fuchsia was moved to the Blog folder within the Brand folder, which renamed the style to Brand / Blog / Fuchsia.

To delete a folder and the styles in it, right-click the folder name and select Delete. You can also move all styles to another location to keep the styles and delete the folder.

Group by name

Grouping styles using the slash naming convention involves adding a prefix to your style names so Figma groups them under the same heading.

In the example below, we use the slash naming convention to name and organize our styles:

• Blog/color
• Brand Style Guide/Color
• Secondary/Color

Reorder and move styles

When you view the Local styles section in the right sidebar, you can see every style in the current file, grouped by the style type: text, color, effect, and layout grids.

By default, Figma will show styles in the order they were added. To make them easier to find and navigate, you can change the order or folder they appear.

1. Select one or more styles:
   • Press and hold Shift and click to select a range styles.
   • Press and hold ⌘ Command / Control and click to select multiple non-adjacent styles.
2. Drag the style to change the order or move them to a new folder.
3. Release the mouse.
4. Repeat for any other styles.

Moving a style from one folder to another changes the name for the style to reflect its place in the hierarchy. For example, moving the color style Brand Style Guide / blue to the Blog folder will also change the style name to Blog / blue.

Edit styles

You can edit local styles from the right sidebar and from the style picker.

• Right sidebar: hover over the style, then click the adjust icon when it appears.
• Style picker: right-click on the style and select Edit style from the options.

View styles and their properties at the top of the Edit style panel.

• View or update the Name of the style.
• Add or update the style description, which displays when hovering over the style in the style picker.
• View or make changes to any properties of the style.
• Click on the icon to hide or show the property on any objects the style is applied to
• Click the icon to remove the property from the style

Any changes you make to the style here will update any objects in the file that use this style.

Move styles

To move styles between files:

1. Open the library file where the styles currently live. This is the source file.
2. Select styles or style folders:
   • Hold Shift and click to select a range of styles.
   • Hold ⌘ Command/Control and click to select multiple non-adjacent styles.
3. Right-click the selected styles > Cut styles to add them to your clipboard. You can also use the shortcut:
   • Mac:⌘ CommandX
   • Windows:CtrlX
4. Open the file you want to move the styles to. This is the destination file.
5. Right-click on the canvas > Paste here to paste the styles into the file. You can also use the shortcut:
   • Mac:⌘ CommandV
   • Windows:CtrlV

Publish library changes

When you move published styles between files, Figma prompts you to publish your changes to any affected libraries.

You must publish these changes to complete the move process. Figma pushes updates to all subscribed files when you publish your changes.

1. Click Publish in the notification window, or use the shortcut to open the library modal:
   • Mac:⌥ Option3
   • Windows:Alt3
2. Add a description of your changes. Figma shows this in the file’s version history.
3. Click Publish.

Figma pushes updates to any file that uses those styles. You'll see the usual bell notification and a prompt to receive updates from the library. Review and accept updates from libraries →

Delete styles

If you would like to remove one or more styles, you can do this directly from the panel.

1. Select one or more styles:
   • Press and hold Shift and click to select a range styles.
   • Press and hold ⌘ Command / Control and click to select multiple non-adjacent styles.
2. Select Delete style or Delete all from the options.
3. Figma will remove the style and you will no longer be able to use it. Any objects using that style will keep their properties, but are detached from the style.

Share styles

To access your styles in other files and projects, you can publish them to a team library. You can publish styles on their own, or alongside any components.

You can publish styles in a free Starter teams plan, but not components. You will need to be on the Professional or Figma Organization plan to publish components.

Publish styles to a library

1. Open the Assets panel in the left sidebar and click the Library icon. Or, use the keyboard shortcuts:
   • Mac: ⌥ Option + 3
   • Windows: Alt - 3
2. In the Current file section, click Publish next to the file name.
3. Add a description of the changes you've made to the file. Figma will include your description in the version history of the file.
4. Click the icon next to Styles and components section to view a list of all styles and components.
5. Click Publish to share them as a library.

When you publish changes to a library, Figma will prompt anyone using this library to receive updates. This makes sure any layers that use these styles use the most recent version.

Use styles from a library

When you enable a library for a file, anyone with can edit access to that file can access those styles and components.

• View any style from that library in the style picker.
• View any styles from that library as a separate palette in the color picker.
• Use any styles that are shared with you. Learn how to apply styles →
• Edit styles from files you have can edit access to.