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 from the right panel in 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 on the “Export styles” dropdown button next to the “Export” button.
Choose the “Export Text Styles” option.
Choose the project/styleguide and click the “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 the “Export text styles…” option.
Select the project or styleguide you want to export the text styles.
Click the “Export text styles” button.
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 Text Styles" or click individually on the ones you want to add.
Resetting suggested text style options
If you dismiss the suggestions by clicking the “x” button on the right top of the suggested text styles window, Zeplin will not show these text styles again on your next export, to not bug you all the time.
If you’d like to see suggested text styles again, you’ll need to select the “Help > Reset Suggested Text Styles” option from the menu up top while you're in a project or styleguide. Then, when you export another artboard/component from the same file, you will see suggested text styles in your styleguide 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