Related Videos

• Lingo and Figma

  Before you begin

  You need to be a team admin in Figma and an admin in Lingo.

  Lingo will need read-only access to your Figma account.

  Lingo is a digital asset manager that helps creative teams organize, manage, and share their brand assets.

  With Lingo you can:

  • Build, share and manage digital style guides
  • Organize all your creative assets in a single location: photos, videos, logos, icons, graphics, and more
  • Build a brand hub that can be used by your entire team and outside partners
  • Add documentation alongside your assets

  Connecting Figma to Lingo lets you import Figma assets and organize them alongside your other digital assets. Any changes you make to an asset in Figma will automatically sync to Lingo.

  Note: Lingo stores Figma assets as SVGs, which you can resize and convert to different file types before downloading.

  Connect Figma to Lingo

  To connect Figma to Lingo, do the following:

  Generate a Figma API token

  1. Login to Figma in your web browser.
  2. From the file browser, click on your profile icon in the upper right corner, and then click Settings.
  3. Navigate to Personal access tokens, enter a name for your new token (for example, Lingo integration), and press Return.
  4. Copy the new token.

  Paste the token in Lingo

  1. In Lingo, select Settings in the left rail.
  2. Click the Integrations tab.
  3. Select Setup and paste the token.

  Paste your Figma team ID into Lingo (optional)

  Add your team ID to Lingo to keep your files in sync. This step is only required if you want Lingo to receive updates when an asset changes in Figma.

  1. From the Figma file browser, click on the team you’d like to give Lingo access to.
  2. Highlight and copy the team ID from the URL in the address bar. You can find your team ID represented by {team-id} in the following URL: www.figma.com/files/xxx/team/{team-id}/xxx?fuid=xxx.
  3. In Lingo, select Settings.
  4. Click the Integrations tab and select the Figma integration.
  5. Paste your team ID.

  Note: It may take several minutes for changes to be reflected in Lingo.

  Add assets to Lingo from Figma

  You can link to a single frame or to a whole file in Lingo. Link to a file when you want to import multiple assets at once.

  In Figma

  Link to a frame:

  1. Select the frame you want to add to Lingo.
  2. Click the Share button in the toolbar.
  3. Make sure Link to selected frame is checked.
  4. Copy the link.

  Link to a file:

  1. Open the file with the assets you want to add to Lingo.
  2. Click the Share button in the toolbar.
  3. Copy the link.

  In Lingo

  1. Open the kit where you want to add your Figma assets.
  2. Drag and drop an asset from the insert panel into the gallery.
  3. Select Figma from the asset type menu.
  4. Paste the link to your Figma frame or file.

  

  The import modal has two tabs for selecting either frames or components from a Figma file. You can import multiple frames and components at once by checking the checkboxes.

  If you have nested frames in Figma, Lingo lets you navigate the frame hierarchy and select specific frames to import.

  

  Open a Lingo asset in Figma

  From Lingo, you can navigate back to a specific asset in Figma.

  1. In Lingo, double click on an asset.
  2. In the inspector panel on the right click the Details section.
  3. Click the Figma link.

  Disconnect Lingo from Figma

  1. In Lingo, select Settings in the left rail.
  2. Click the Integrations tab.
  3. Select Update settings within the Figma area.
  4. Select Disable the integration.

  Tip: If you have additional questions about the integration, see Setting up the Figma integration in Lingo’s help center.

• Bubble and Figma

  Before you start

  Who can use this feature

  Users on any Figma team or plan.

  This feature is available to all Bubble users and creating an account is free at bubble.io

  Bubble lets you create interactive, multi-user apps for desktop and mobile web browsers, without having to write a single line of code.

  Turn your designs into working prototypes and full-fledged applications. Import your Figma frames into Bubble, then add logic, workflows, and database capabilities to your designs. No coding required.

  Bubble's Figma integration will:

  • Import Figma frames as new pages of your app in Bubble
  • Upload images from your Figma file to your app in Bubble
  • Label the newly created Bubble elements with the same names as your Figma file

  This feature is available to all Bubble users and creating an account is free at bubble.io

  Tip! For more information about how the import works, known limitations, and tips for setting up your Figma file for best results with this import, visit the Bubble Manual.

  Connect Bubble to Figma

  The import tool exists in the Bubble editor and will ask for your Figma API Key. This is so Bubble can access the Figma file you specify and see all its contents. This integration can only access the specific files you tell it to, and will not make any changes to those files in Figma.

  In Figma

  To import a Figma file to Bubble, you'll need:

  • Your account's Figma API Key
  • The ID of the file you want to import

  To add a Figma API key in Bubble, you will need to generate a Personal Access Token in Figma.

  1. Go to the File Browser.
  2. Click your name at the top left and go to the Settings tab.
  3. Under Personal Access Tokens, click Create a new personal access token.
  4. Copy this token. This is your Figma API key.

  Each Figma file has a unique URL containing its ID. The file ID is the string of random alphanumeric characters found in the section of the URL after figma.com/file/.

  

  To find and copy the ID of the Figma file you want to import:

  1. Open the Figma file you want to import.
  2. Copy the file's ID from your browser's address bar. If you're in the Figma Desktop App, right-click the file's tab to Copy link and paste it in a browser's address bar to view and copy the file ID.

  In Bubble

  1. Navigate to your app in Bubble.
  2. Click Settings from the left side panel.
  3. In the General tab, scroll down to the Design import section.
  4. Enter your Figma API key and the file ID.
  5. Click Import. The import can take a few moments depending on the size of your Figma file.
• Flinto and Figma

  This feature has been developed by Flinto. For any questions regarding Flinto or the integration, please contact the Flinto team.

  Flinto is a Mac app used by designers to create interactive and animated prototypes. Flinto is only available for Mac. Learn more about Flinto.

  Flinto gives you access to powerful tools for animated transitions, micro-interactions, scroll-based effects and more. With Flinto you can:

  • Create custom animated transitions between Frames.
  • Design your own micro-interactions with Flinto's Behavior Designer.
  • Use a variety of touch gestures, including 3D touch.
  • Add GIFs and videos to your prototypes.
  • Export recording of your prototypes to share online.

  The integration allows you to import your designs from Figma into Flinto. You can then turn them into animated and interactive prototypes.

  Note: When importing Frames from Figma, Flinto will preserve most vector shapes and editable text layers. For any features that aren't supported, Flinto will flatten them into bitmap images.

  In this article we'll cover:

  1. Connect Figma and Flinto
  2. Import a Design from Figma
  3. Disconnect your Figma account from Flinto

  Connect Figma and Flinto

  Before you can import your designs from Figma, you'll need to authorize the connection between Figma and Flinto.

  This gives Flinto to access your Files, so they can import them into their app.

  You'll only need to do this once, the first time you import a File from Figma.

  1. Open the Flinto app.
  2. Click Import in the toolbar. Or go to Flinto > Import in the menu bar. 
  3. Select the Figma tab: 
  4. Click the Sign into Figma button: 
  5. Your web browser will open Figma in a new tab. If you're not signed in, you will be prompted to do so now. Otherwise, click the Allow Access button: 
  6. Click the prompt to return to Flinto.

  Import a Design from Figma

  Now that the connection is established, you can import your Figma Files into Flinto.

  You'll be able to select from the Files you've most recently opened. If you haven't recently opened the File - or don't see the File you're looking for - try opening the File in Figma first.

  1. In the Flinto app, click the Import button in the toolbar.
  2. Select the Figma tab. You can then select which File you want to import into Flint. Your most recently edited Files are displayed at the top: 
  3. Select the Screen size for the selected File. Frames. The default will be the size of the current document.
  4. Click the Import Frames button.
  5. Now you are ready to create your prototype in Flinto! Visit Flinto’s learn page to learn more about getting started.

  Disconnect your Figma Account

  1. Click the Import button in the toolbar to open the modal.
  2. Select the Figma tab. 
  3. Click on your profile picture in the bottom left corner and select Log Out:
• Framer is now a plugin

  Figma no longer supports a custom integration with Framer.

  Use the official Framer plugin to copy layers from Figma to paste in Framer.

  For help with the plugin, reach out to the Framer team via the Support contact on their plugin page.

• Maker and Figma

  Maker is the fastest way to go from design to live experiences on your site.

  Designers and marketers use Maker to create and personalize web content for their landing pages, product pages, or blog posts to increase engagement and conversions.

  Convert your Figma files into a dynamic and fully responsive webpage within minutes. Add the Figma file link to the Maker editor, and the Figma to web engine does the rest.

  Maker’s Figma Integration:

  • Seamlessly converts your designs to fully editable, responsive web pages in minutes
  • Lets you freely edit the imported layout in Maker's drag-and-drop editor
  • Enhances the page with videos, data from e-commerce stores, live streams, and more
  • Keeps your layers, groups, and elements in the same structure as your Figma file
  • Remembers the last file you imported for convenience and efficiency

  Import a Figma file to Maker

  
  In Figma

  1. Open the file you'd like to import to Maker.
  2. Select the Page with your design, then right-click and Copy Link to Page.
     

  In Maker

  1. Create a new Story in Maker.
  2. Navigate to the elements panel in the left sidebar and search Figma.
     
  3. Paste the Figma file link and select Add.
     
  4. Grant Maker access to your Figma account.

  Once Maker converts your design, you can continue to edit the elements within the drag and drop editor.

• Test your Figma prototypes with Maze

  Before you start

  Who can use this feature

  Users on Any Plan

  Users with View access to a Prototype can copy the share link.

  Users with Editor and Owner access can edit a Prototype's share settings.

  Maze allows you to test your Figma prototype with real users. Gain insight and build better products with usability metrics and valuable feedback.

  Use Maze to:

  • Run usability testing on Figma prototypes
  • Create missions for users to complete
  • A/B test designs to compare performance
  • Get quantitative data like success rates, misclick rates, and duration.
  • Review heat maps for each screen in your prototype
  • Ask follow-up questions with scales or open-ended questions
  • Find the best user flow for your designs
  • Run in-person tests using a single device

  Need help using Maze? Check out the Maze Quick Start guide, or contact the Maze team at help.maze.co/hc/en-us/requests/new

  How it works

  Maze uses your Figma prototype's share link to create a new mission in Maze. Maze will need read-only access to all your Figma Files to import the information needed to create a user test.

  Tip! If you're new to Maze, you can create a Maze account for free.

  Import a Prototype from Figma

  In Figma:

  1. From your File, click the play icon to enter presentation mode.
  2. Click the Share Prototype button in the menu bar. This will open the Sharing modal for the Prototype.
     
  3. Adjust the Link Sharing Discovery settings to Anyone with the link.
  4. Click Copy link to copy the prototype's URL to your clipboard.

  Learn more about sharing Figma prototypes.

  Test a Prototype in Maze

  In Maze:

  1. Log in to Maze and open the Projects dashboard.
  2. Open or create a maze.
  3. Add a Mission Block and paste the link to your Figma prototype. It’s recommended to optimize your Figma prototype before importing it into Maze.
  4. If needed, add more tasks and questions to your maze.
  5. Preview your maze, then click Start testing in the top menu.
  6. Click Copy maze link to share the test URL with people to get results.
  7. Once you start receiving responses, you can access your results and report.

  Visit the Maze Help Center for more on creating user tests.

  Update the Prototype in Maze

  If you make changes to a prototype in Figma, you’ll need to update the prototype in Maze as well.

  You can either refresh the prototype in an existing maze or create a new maze with the updated prototype.

  Need help using Maze? Check out The Official Guide to Using Maze or contact the Maze team at help@maze.design

  Disconnect Maze from Figma

  If you want to remove the Maze integration, or remove access, you can do so in your Figma account Settings. 

  1. Click on your name to open your account and select the Settings tab.
  2. Scroll down to the Connected Apps section.
  3. Click Revoke access next to the Maze application.
• Principle and Figma

  Principle is an interaction design tool that allows you to bring your digital designs and prototypes to life.  

  You have a whole host of interactions available; from scrolling or swiping, managing multiple states, building custom animations and super slick transitions. Learn more about Principle here.

  Once you connect Figma to your Principle account, you can easily import your designs from Figma and start building advanced animations.

  With Figma and Principle, your designs look and feel like the real deal.

  In this article we'll cover how to:

  1. Connect Figma and Principle
  2. Import a Design from Figma
  3. Disconnect your Figma account from Principle

  Connect Figma and Principle

  You'll need to have an account created with Figma and Principle to get the two connected. Principle is currently available on macOS only.

  When you first go to import a design from Figma, you will be prompted to enter your Figma account details to authorize the connection. This will only happen the first time you use the Import from Figma option.

  1. Open up Principle.
  2. Head to File in the main menu and select Import from Figma:
  3. Or, click the Import button:
  4. Select Figma from the options:
  5. Click the Connect to Figma button:
  6. This will open up a browser window. If you're not logged in, you'll be prompted to login to your Figma account:
  7. Click Allow access to confirm:
  8. A dialog box will prompt you to return to Principle:

     Note: If you don't get redirected to Principle directly, you can close the authorization window and return to Principle. While it may not look like it, the connection has now been successfully established.

  Import a Design from Figma

  Now that the two applications are connected, you'll be able to import your designs directly into Principle. Note: It's not possible to export a File to Principle from within Figma.

  You can import all of the Frames from a page in a File, or a selection of Frames.

  1. Open up Principle.
  2. Head to File in the main menu and select Import from Figma:
  3. Or, click the Import button:
  4. Select Figma from the options:
  5. You will then be able to select a Document from the field provided. This will show you any Recently Edited Files.
     
     

     Note: Any files that have been using Multiplayer (i.e. Files where multiple Editors are collaborating) will be prioritized in the Recently Edited Files suggestions.

     

  6. Click Import Page to import all Frames on the Page.
  7. Or, click Import Selected Frames to import any Frames that are currently selected in Figma.
     
     

     Note: At this point, you can also hop over to Figma and select any specific Frames you want to import. This will update the selection in Principle.

  8. A status message will indicate that the layers are currently being rendered by Figma:
  9. The Frames will then be added to your Artboard in Principle:
  10. Each object will be rendered as an individual layer, just like it is in Figma. You can select individual objects in either the Layers panel on the left, or directly in the canvas:

  Disconnect your Figma account

  If you want to change the Figma account associated with your Principle account, or disconnect the two completely, you can do this in Principle.

  1. Click on the Principle menu in the Apple menu bar.
  2. Select Disconnect from Figma from the options:
  3. You can then start the Import process again, to reconnect or connect to a different account.

  Working with Shadows in Figma and Principle

  Drop and Inner Shadows will behave differently between Figma and Principle. Figma renders shadows based on the object's position on the canvas, whereas Principle will show the shadow based on the object itself.

  This means that rotating an object in Principle will also rotate the location of the object's shadow (versus remaining consistent as it would in Figma).

  Note: Learn more about Figma and Principle in our Medium post: Animate your Figma designs with our new Principle integration.

• ProtoPie and Figma

  ProtoPie allows you to create prototypes for a wide spectrum of digital products. ProtoPie is available on both macOS and Windows.

  You can use ProtoPie for the basics, as well as try your hand at advanced conditional interactions. With ProtoPie you can:

  • Create interactions across multiple devices
  • Build hardware integrations
  • Use device- specific sensors, such as the gyroscope, compass, microphone, and proximity sensors.

  The integration allows you to import your Figma designs right into ProtoPie. From there, you can turn them into realistic prototypes. 

  ProtoPie also has a plugin for Figma. Download the ProtoPie plugin to:

  • Import multiple frames and objects

  • Import top-level frames as scenes

  • Import selections

  • Import vector layers as SVG

  • Import text layers as SVG that can be converted to text layers

  • Import constraints as constraints

  Learn more about the ProtoPie plugin for Figma →

  Connect Figma and ProtoPie

  You can import your designs from Figma into ProtoPie.

  Before you can get started, ProtoPie will need permission to access your files in Figma.

  You'll only need to connect the two apps once. Once you've given ProtoPie permission, you won't have to do this again.

  1. Open ProtoPie and click on the Import icon in the top-left corner.
  2. Select Figma from the options.
  3. ProtoPie will ask for permission to access your Figma files. Click Proceed to browser to open Figma in a new browser window.
  4. If you're not already, you'll need to log in to your Figma account.
  5. Once signed in, click the Allow Access button to give ProtoPie permission to access your files.
  6. When you're done granting access, you can close the browser window, or click the Go to ProtoPie button to open the ProtoPie app.

  Import your designs from Figma

  You'll now be able to import your Figma designs into ProtoPie. Learn more about ProtoPie's import options in their Import documentation (external link).

  You can import frames from any file you have opened or edited in the last twelve hours.

  Import new designs

  1. Open ProtoPie
  2. Click on the Import button in the top-left corner.
  3. In the frame dropdown, select the frame you want to import.
     
  4. Choose the Import Size as required.
  5. Choose to import All layer structure, or Only layers marked for export. Select All layer structure to import all layers.
     
  6. Click Import to start the process.
  7. ProtoPie will download the rendered layers into your current file. This will maintain the same layer order as in Figma.
     

  Re-import designs

  You can also use the import process to re-import frames. This allows you to bring across any changes you've made to the original design in Figma.

  When you go through the import process, you will see a heading called Re-import Options. This allows you to determine how you want ProtoPie to reimport frames.

  When you Re-Import, you can choose whether to:

  • Overwrite [any changes to the] positions of layers
  • Overwrite [any changes to the] sizes of layers
  • Update layer orders and grouping structure
  • Remove layers deleted or made invisible in Figma
    
    

  Disconnect your Figma account

  If you want to change the Figma account associated with ProtoPie, or disconnect them entirely, you can disconnect ProtoPie from your Figma account.

  You can do this from your account settings in Figma.

  1. Login to your Figma account and open the File Browser
  2. Click on your name in the top-left corner and select the Settings tab.
  3. Scroll down to the Connected Apps section.
  4. Click Revoke access next to the ProtoPie integration: 

  Note: Once disconnected, you can connect a different Figma account to ProtoPie. Follow our instructions above to connect Figma and ProtoPie.