The Figma Content Block is the perfect solution to display your Figma components (in either live preview or image format mode) to whomever you choose.
To install the Figma Block and to ensure that the sync between Frontify and Figma is working automatically, we need to properly set up the webhook API between Figma and your Frontify account.
This process only needs to be done once per Figma Team. Therefore, if all of the assets you’d like to move from Figma to Frontify are within one Team, this sync only needs to be done once.
What we’ll need is:
Figma App on Project Workspace
Figma App on Project
Figma Block
Install Figma Block from the Marketplace
ID’s to sync customer account with Frontify
Personal Token from Customer Figma*
Team ID from Customer Figma*
The Figma Project sharing settings cannot be “Invite Only”
Internal testing
Successful connection of the two ID’s to activate webhook
* You'll need these for submitting your sync activation here.
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.
→ Congrats, now you have the Figma Block. However, we still need to sync it with your Figma account for it to work correctly.
Step 3. Collecting ID’s to Sync Figma with Frontify
This is the crucial step. We only need two IDs from you to activate the webhook API, which will allow you to have images on Frontify which will mirror your Figma source file.
The two IDs are:
Figma Team ID
Personal Access Token
Disclaimer: This sync only works for projects which are not “Invite Only” and works for projects where “can view” or “can read” are selected. How can you find this out? Have a look at the below steps.
The webhook connection that we will create between your Figma and Frontify account is bound to a Team (1). Within this Team, you can only create projects with the sync which are either “can edit” or “can view” but not “Invite Only” (2)
If you want to check what kind of project is an “invite Only”, you have to read the sentence below the project name. See the screenshot below; this kind of project has no sync with Frontify.
Finding your Figma Team ID
The Figma Team ID will be added to a secure Frontify site to do the development necessary to activate the sync. Using your Team ID allows Frontify to check your Figma team files for changes. We can only access the file you import in 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 in regard to the 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, please 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, you'll need to highlight and copy the Team ID from the URL in the address bar (see screenshot below)
Explanatory Video - How to find your Team ID: Start the video
In the address bar, you'll now see 2 numbers. Your Team ID is the first string of numbers shown after "/team/" in the URL. This number is highlighted with a green bar in the above screenshot for reference.
Save this Team ID and prepare to copy and paste it into the submission form 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? Follow these steps:
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, you can proceed with the next steps. If you are not, please do the next steps with either one of the two users with that permission.
If you are in a file, then 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, like "Frontify Figma Sync,".
Under "Scopes," set the "File-content" to "Read-only" and the "Webhooks" to "Write"
Click on "Generate token"
Copy the new token and prepare to paste it into the form.
Now that you have your Figma Team ID and Personal Access Token, please add these to our submission and press submit when ready.
Connect Figma to Frontify: Here is where you add the Team ID and Personal Access Token.
→ Well done, you did it!!
What’s Next?
We are checking the Sync between Figma & Frontify
Now you can sit back and relax. You’ll hear from us very soon with hopefully some good news.
We are collecting the IDs you have entered in the above fields and creating the API sync. No matter what, we will contact you, either to give you the good news or let you know which ID is not working.
Are you wondering what we can “see” and access with these 2 ID’s?
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 Fronitfy. We are not able to read any file which is not added via URL in the Figma <> Frontify connector. Moreover, you are free to revoke the Personal Access Token you have shared with us after we have set up the sync. We only need it once to create the real-time sync, and this sync will only work whenever you edit your Figma file.