Skip to main content
All CollectionsIntegrationsDesign
Figma Library Sync - Installation Guide
Figma Library Sync - Installation Guide

This article talks you through the necessary steps to set up the Figma Library sync.

Updated over a month ago

Note: This is a paid integration. In order to set it up, you need to include it in your Frontify subscription. If you haven't done so, please speak to your Customer Success Manager about doing so first.

Setting up the Figma Library Sync happens in two stages. Please read the instructions carefully and follow the steps accordingly. For more information about the sync itself and how it works, refer to the Figma Library Sync - Introduction.

Stage 1

In stage 1, you'll need to share a couple of things with your Customer Success Manager. Make sure to collect all of this information and then reach out to them.

  1. The sync details for each connected Frontify library. If you'd like to set up the sync for multiple Frontify libraries, please clearly list the information individually for each library. (Note that the cost of the sync includes up to 5 connected Frontify libraries.) The information that we'll need:
    ​

    1. Frontify Library URL: The URL for the Frontify library where assets should end up.

    2. Figma File URL(s): The URL(s) for one or multiple Figma files that should sync into the above Frontify library.
      ​Looks like: https://www.figma.com/design/abCD123asDFghj23a4qwer/name-of-file

    3. Figma Team URL: The URL for the Figma Team where the above file(s) live. All the files need to live in the same Figma Team for us to be able to connect them to the same Frontify library.
      ​Looks like: https://www.figma.com/files/1234567891011121314/team/1516171819202122232/name-of-team

    4. File Type: The file type that should be used for the assets in Frontify.

      Options are: SVG, PNG, JPG, PDF (If the connected Frontify library is an Icon Library, only SVG is possible)

    5. Export Scale: The scale that should be used when exporting the components from Figma (this will always be 1x for SVG & PDF).

      Options are: Any scale between 0.01x - 4x.

  2. Let us know whether we should include any additional people from your side in stage 2. If so, please give us the name & email address of these people. This is necessary if you don't have all of the necessary user rights in both Frontify and Figma to complete stage 2.

    1. In Frontify, you need to have the right to invite new users to the library(ies) you listed above.

    2. In Figma, you need to be an admin of the team(s) where the relevant file(s) live(s).


Stage 2

This stage includes sharing a confidential API token, therefore it's handled separately and will only include people that need to be included.

  1. Once we have all of the information from stage 1, someone from our Technical Solutions Team will get in touch with you (& any additional people you may have listed) in order to finish setting up the sync.

  2. We'll provide you the information for an 'integration user' that you'll need to invite as an editor to the Frontify library(ies) where assets from the sync should end up. This user is a programmatic user that isn't tied to any person and that will allow you to clearly see which assets have been added through the sync.

  3. You'll need to share a personal access token from Figma with us.

    1. The token has to be for a user that is an admin in the team(s) where the synced Figma file(s) live(s).

    2. The project(s) that the file(s) live(s) in cannot be invite-only projects or this personal access token will not work.

    3. Personal access tokens are confidential. We recommend that you use a password manager (i.e. 1Password) or other secure fashion for sharing it.

    4. The token needs to be set to "no expiration", "File content: Read-only" and "Webhooks: Write". Here's an example of what it should look like:

Once we have all of this information, we can set up the sync for you. Before the sync can start running and to avoid any errors, you'll need to make sure to publish all updates in the synced Figma library(ies).

Did this answer your question?