The Figma content block is the perfect solution for displaying your Figma components in Frontify, either as live previews or images.
With self-service Figma sync, you can now connect Figma and Frontify directly within Frontify—without submitting forms, contacting support, or waiting for manual activation. To ensure your Figma content stays automatically up to date in Frontify, you'll need to connect your Figma team and configure the sync.
The entire setup can now be completed by your team in just a few minutes, directly within Frontify.
This process only needs to be completed once per Figma Team. If all the assets you'd like to sync are within the same team, you'll only need to set up the connection once.
What you'll need:
Figma app on project workspace
Figma block: Figma content block installed from the Frontify marketplace
Figma team ID: ID’s to sync customer account with Frontify
Personal token from customer Figma*
Team ID from customer Figma*
Figma projects that are not set to "Invite Only"
Account admin permissions in Frontify (the Figma sync setup is only available to account admins)
*You'll need your Figma team ID and personal access token to complete the setup in Frontify. Sync activation here.
Internal testing
Successful connection of the two ID’s to activate webhook
Step 1. Figma app on project workspace
Firstly, we'll need you to set up the Figma app in your project workspace.
Step 2. Install content block for Figma
To install the Figma content block:
If you are an account admin: go to your Marketplace within Frontify and install the block on your guidelines.
If you are not an account admin: contact your account admin to install the block from the marketplace.
Next, connect your Figma team to Frontify using the self-service Figma sync setup.
Step 3. Collecting IDs to sync Figma with Frontify
To activate the webhook API and enable automatic syncing between Figma and Frontify, you'll need:
Figma team ID
Personal access token
Disclaimer: This sync only works for projects that are not set to "Invite Only" and works for projects where "can view" or "can read" permissions are selected.
The webhook connection that we create between your Figma and Frontify account is bound to a team (1). Within this team, you can only create projects with the sync that are either "can edit" or "can view" but not "Invite Only" (2).
If you want to check what kind of project is "Invite Only", read the sentence below the project name. Projects marked as "Invite Only" cannot be synced with Frontify.
Finding your Figma team ID
The Figma team ID allows Frontify to check your Figma team files for changes. We can only access the file you import into Frontify via the URL. If changes are made to anything in a team file, we'll automatically update those assets in Frontify. If no changes are made, we won't be able to access your files.
If you are interested in learning more about data protection regarding file imports, please check out the section below.
To locate your Figma team ID, you'll need to open Figma in your browser. Please note that the team ID is not accessible from the desktop app. Once you open Figma in your browser, perform the following steps:
If you are in a file, click on the Figma icon in the upper left, then click on "Back to files" in the dropdown menu.
In the left-hand navigation, click on your team name.
Once on your team's page, highlight and copy the team ID from the URL in the address bar.
Explanatory Video - How to find your Team ID: Start the video
In the address bar, you'll see two numbers. Your team ID is the first string of numbers shown after "/team/" in the URL.
Save this team ID and prepare to copy and paste it into Frontify once you've collected the personal access token.
Finding your personal access token
For this step, you'll need to be a Figma admin or owner of the team.
How can you know who the admin of the team is?
In the left navigation, click on your team name.
In the middle view, below the team name, click "Members".
There you will see the permission of each team member.
We need the access token of either an owner or admin.
If you are an admin or owner, proceed with the next steps. If you are not, complete the next steps with a user who has one of those permissions.
If you are in a file, click on the Figma icon in the upper left, then click on "Back to files" in the dropdown menu.
Click on your profile icon/avatar in the upper right corner, then click on "Settings" in the dropdown menu.
Scroll to the bottom of the modal until you see the "Personal access tokens" section.
Click on "Generate new token".
Create a name for your new token, such as "Frontify Figma sync".
Under "Scopes," set "File content" to "Read-only" and "Webhooks" to "Write".
Click on "Generate token".
Copy the new token and prepare to paste it into Frontify.
Step 4. Connect Figma to Frontify
Once you have your Figma team ID and personal access token, open the Figma sync setup in Frontify.
Enter your team ID and personal access token into the setup form and click Connect.
Frontify will automatically validate your credentials, configure the webhook connection, and activate the sync.
No forms are required. No manual configuration is required. No waiting is required.
What’s Next?
Your Figma sync is activated immediately after a successful connection.
You can start syncing Figma files to Frontify right away and use them in your digital asset management system and brand guidelines.
If the connection cannot be established, Frontify will notify you so you can review and update the provided credentials.
Are you wondering what we can "see" and access with these 2 IDs?
No worries, we can only read the files you've added via URL through the Figma <> Frontify connector. Therefore, you are in full control of what is shared with Frontify. We are not able to read any file that is not added via URL in the Figma <> Frontify connector.
Your personal access token is used to establish and maintain the Figma sync connection. You can revoke or replace it at any time within Figma if needed.