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.

• Zeplin is now a plugin

  Figma no longer supports a custom integration with Zeplin.

  Use the official Zeplin plugin to annotate and share your designs for handoff.

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