Introducing Lingo’s Figma Integration

Figma is increasingly becoming the preferred design tool for both brand and product design teams all across the world. For many companies a large share of their graphic assets are now being created in Figma and we expect this trend to continue.

Because of this, we wanted to make sure Lingo was connected to Figma so assets could be easily imported, were always up to date and could be organized right alongside all of your other digital assets that make up your brand’s design system.

Today we’re excited to announce we’ve accomplished this with our new Figma integration that is now available to all customers.

How it works

At it’s core 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, giving you access to all the custom export functionality you’re already used to.

How to set it up

To set up the integration you need to be an Admin in both Lingo and Figma. On your Settings page in the web app you’ll now see an Integrations tab where you’ll be able to connect your Figma account to Lingo. You’ll need to generate a Figma API key and enter your Figma team ID. This help center article provides a more in depth guide on how to set up the integration. One note about entering in your team’s Figma ID — this is an important step because it allows Lingo to automatically check for updates to the assets you’ve added to Lingo.

How to use it

To use the integration, simply drag the Asset icon from the Insert Panel and drop it in the gallery. You’ll see an option to add Figma assets. Next you’ll see a modal where you can paste in a Figma share link. You can paste a link to a file, page or a specific frame. To learn more about where in Figma to find each one of these links take a look at this help center article.

If you paste in a link to a single frame it will automatically be added to Lingo. If you paste in a link to a page or an entire file you’ll see a modal where you can choose which assets to batch import. This import modal has 2 tabs, one for frames and one for components .

Nested Frames

In Figma, you are able to infinitely nest frames within other frames. The Import Modal reflects this with a dropdown for any frame that has frames nested within it. With this, you are able to view and select all nested frames in a parent frame.

Once you choose which assets to import they will be added to Lingo as SVG’s, allowing to you take advantage of all of Lingo’s custom export functionality. They’ll also be able to be searched, re-arranged and tagged just like any other asset in Lingo.

If you’d like to open an asset imported from Figma back in Figma you can do this as well. On the web just select the asset and then select “edit” or “view” in the bottom bar to show the inspector panel. Then open up the details tab where you’ll see the open in Figma option.

Automatic updates

And finally, during the setup process if you entered your Team’s Figma ID, Lingo will use Figma’s webhooks to automatically detect if an asset has changed in Figma and will sync that change to Lingo — no user action is needed. Important note — it can sometimes take several minutes for the changes to be reflected in Lingo.

Why to use it

Using Lingo to organize and share your team’s Figma assets can make it easier for people outside of your design team to use those assets. They can find the assets faster because of Lingo’s powerful search and visual interface, they’ll know how to use them correctly because of the documentation that can be displayed alongside the assets, and finally people can download assets in the format and size they need because of Lingo’s image processing capabilities. Not to mention you can upload more than just Figma assets to Lingo, like videos, photos and documents, allowing you to create a single location for ALL of your team’s brand assets.

It’s because of these reasons that Lingo’s Figma integration will be a great option for teams looking to build and share style guides, illustration libraries, icon libraries and much more!

We hope you find the Figma integration useful. As always, we’re open to feedback so send it our way if you have any!