Overview
The Figma integration allows you to import your Figma assets to Lingo. Once imported, if an asset is updated in Figma, those changes will automatically sync to Lingo. Figma assets are stored in Lingo as SVGs, supporting all the custom export functionality you’re already used to.
Setting up the Integration
To setup the integration you'll need to be an Admin in both Figma and Lingo. To get started Click on Settings in the Left Rail and then select the Integrations tab.
Figma API Key
Next you'll need to paste in your Figma API Key. In Figma these are called "Personal access tokens". To create a new one you'll need to open Figma and do the following.
Log into Figma
In the desktop app, click on the home icon in the upper left or in the browser, click on the Figma icon in the upper left, then click on "Back to files" in the dropdown menu.
Click on your profile icon in the upper right, 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, we recommend "Lingo integration"
Change the expiration dropdown to "No expiration"
Enable "Write" access to Webhooks, this is an essential part of enabling automatic updates for Figma assets. Then click Generate token.
Copy the new token and paste it back in Lingo.
Finding your Figma Team ID
To locate your Figma Team ID you'll need to open Figma in your browser, you can't get the Team ID from the desktop app. Once you open Figma in your browser do the following:
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)
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 dark blue bar in the above screenshot for reference.
Copy & paste this Team ID into Lingo when setting up your integration. Using your Team ID allows Lingo to check your Figma team files for changes. If changes are made to anything in a team file we'll automatically update those assets in Lingo.
Using the Figma Integration
Once you've setup the Figma Integration, check out these tips for adding Figma assets to Lingo.