All Collections
Figma Integration
Exporting text styles from Figma
Exporting text styles from Figma

Learn how to export text styles from Figma to your projects and styleguides

Okan avatar
Written by Okan
Updated over a week ago

With the Figma plugin, you can export text styles from Figma to your projects and styleguides on Zeplin.

Defining text styles in your Figma file

In order to export text styles, you will need to define them in your Figma file. Zeplin only recognizes text layers you have set up as text styles.

☝️ If you do not see certain text styles on Zeplin, first check that your text layers have been added as text styles in Figma.

You can set up text styles in the right panel on Figma.

Exporting text styles using the plugin

Once you’ve defined your text styles, you can export them to Zeplin using the plugin. To do that:

  • Right-click anywhere in your canvas and select “Plugins > Zeplin” to launch the plugin

  • Click the dropdown menu near the “Export” button

  • Choose the “Export Text Styles” option

  • Choose the project/styleguide and click “Export text styles”

☝️ You can also open the Resources menu (⇧ I), click Plugins, search for Zeplin, and then click Run to launch the Zeplin plugin.

Alternatively, you can export text styles directly to a project/styleguide via the Quick Actions menu in Figma. To do this:

  • Open Quick Actions by holding down ⌘ + P or ⌘ + * keys on Mac, or Ctrl + * keys on Windows

  • Type “Zeplin” and hit the “Tab” key to list the available actions

  • Choose “Export text styles…” from the list

  • Select the project or styleguide you want to export the colors

  • Click “Export text styles”

Adding suggested text styles

Zeplin automatically fetches all text styles in a Figma document when you export any frame or component from it.

These text styles will be suggested under the Text Style Catalog section in your Styleguide or your project’s Styleguide tab. You can either add them all using the "Add All" button or click individually on the ones you want to add.

You can choose to ignore the suggestions by clicking “Ignore these text styles”. When you do this, Zeplin will no longer show suggested text styles in this styleguide again to not bug you all the time.

Resetting suggested text style options

If you’d like to see suggested text styles again, select “Help > Reset Suggested Text Styles” from the menu up top, while you're in a project or a styleguide.

After selecting, just export another frame/component, and the text styles should appear again!

If you would like to learn more about Zeplin's Figma integration or any other topics related to Zeplin, reach out to our Customer Success crew at success@zeplin.io to schedule a 30-minute call.

Related articles:

Did this answer your question?