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 in your 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 “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
⌘ + Por⌘ + *keys on Mac, orCtrl + *keys on WindowsType “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!
Related articles: