You can now sync your Figma library with your Styleguide in Zeplin. To do this, you need access to the Figma Library file and an Editor or higher role in Zeplin.
☝️ Your Figma library should be published in order to be synced with Zeplin.
To start syncing your library, go to the Styleguides page and click on the "Import Figma library" button. Then, you'll need to choose your styleguide type and click on the "Create" button:
If you already have a styleguide and want to sync it with your Figma library, you can open your styleguide and click on the + button in the "Sync with Library" section on the right panel.
Then, you'll see a modal asking for your Figma library URL. You can copy and paste your URL into the textbox there and click on the “Continue” button.
☝️ It’s not possible to sync your color variables in Figma at the moment. Check out this article to learn more about: Exporting color variables from Figma
Zeplin needs your permission to access the file to proceed. Once you grant access to your Figma library file, you’ll be redirected to the Styleguides dashboard, and Zeplin will start to prepare your styleguide to sync.
☝️ Colors and Text Styles that are not used in the components will not be synced to your styleguide.
After your sync is completed, you can click on the “Review Styleguide” to check your synced Figma library. In the meantime, you can also click on the “Back to Workspace” button, and the components’ sync will be continued in the background. You’ll get an email once the sync process is completed.
Managing your synced library
When your Figma library is synced to Zeplin, you can check for updates anytime by clicking the “Sync now" button in the Components section of the Styleguide.
💁♀️ The synced components will remain in your styleguide even though you delete them from your Figma library and sync them again. If you don't want to keep them in Zeplin as well, you'll also need to delete them from Zeplin. Select your components and right-click on them to see the delete option.
You can change the library URL or unlink it from the right panel of your styleguide or from the Figma pill under the Components section:
💁♀️ All data synced from your Figma library will remain in your styleguide even if you change or unlink your library.
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: