Beta Notice: The Figma Integration is currently in a private beta. Reach out to us to request access. If you're using our Mac app, you'll need to download the Beta Mac app.
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.
Create a name for your new token like "Lingo integration" and press enter.
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 integration you're ready to start adding assets from Figma to Lingo. To add Figma assets, drag the asset item from the Insert Panel, drop it into a section and select the Figma option.
A modal will appear asking you to paste in a share link from Figma. All you need to do is copy the share link to a frame, page or file in Figma and paste that link into the modal. Here's how to get each of those links:
Links to a Frame
If you use a link to a specific frame, that frame will be imported as an asset in Lingo after pasting it into the modal.
Select the frame you want to add as an asset to Lingo
Right-click to bring up the menu
Go to Copy/Paste at the bottom, then select the "Copy link" option
Links to a Page
If you use a link to a specific Page, the modal will then show you all the frames in that page so you can choose which to import. You'll also be able to choose frames from other pages and components in the file.
Right-click a page in the left-hand navigation
Select the "Copy link to page" option
Click the "Share" button in the upper right
Click the "copy link" button
note: the blue "Share" button in the upper right will always give you a link to the page you're currently on in a file
Links to a File
If you use a link to an entire File, the modal will show you all the frames, pages and components in that file.
In the "home" view, right-click a file
Select the "Copy link" option