Related Videos

• 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:
• Avocode and Figma

  Avocode allows you to automate your design workflow for hand-off. You can use Avocode in the browser, or via their macOS, Windows or Linux apps.

  You can use Avocode to turn your design files into exportable assets. Avocode allows you to:

  • Keep your designs organized and in sync with version history.
  • Automate the preparation of assets for export.
  • Batch export assets in multiple formats and sizes.
  • View and export your Styles and Properties in a variety of code languages.

  The integration allows you to export your Frames from Figma to Avocode. From there, you can create prototypes and prepare your assets for hand-off. 

  Note: The integration between Figma and Avocode only works with the web-version of Avocode. You can only import Figma designs into Avocode in the browser. After your design file is synced in Avocode, you can inspect comment on it also from the Avocode desktop app.

  In this article we will cover how to:

  1. Connect Avocode to Figma
  2. Export Frames to Avocode
  3. Updating Exported Frames
  4. Disable the Avocode Integration

  Note: You'll need to create an account with Avocode before using the Integration. Learn more about Avocode.

  Connect Avocode to Figma

  The Avocode integration is already added to your Figma account, by default. To share your designs with Avocode, you'll only need to enable the integration.

  You can use the Avocode integration on both the Figma Desktop and Figma Web App.

  1. Login to your Figma account and open a File in the Editor.
  2. Open the main menu (in the top left corner) and select Integrations from the list: 
  3. Select Avocode from the options.
  4. The dialog indicates we have enabled the Avocode integration. This dialog will also give you some basic information on how to export your designs
  5. Click Got it to return to your File.

  Export Frames to Avocode

  We export Frames to Avocode via the Export modal. You can export many Frames at once.

  Before you get started, you'll need to make sure you have logged in to app.avocode.com in the browser. If you have multiple teams in Avocode, make sure to also select the appropriate team.

  In Figma

  You can export Frames to Avocode via the Export modal.

  1. Open the File you want to export to Avocode.
  2. Select the Frames you wish to export. You can select a single Frame, or multiple Frames at once.
  3. Apply Export Settings to the selected Frames in the Properties Panel. Getting Started with Exports.
  4. In the main menu, select File > Export. Or, use the keyboard shortcut:
     • macOS: Command-Shift-E
     • Windows: Control + Shift + E
  5. This will open the Export modal in the top-right corner of Figma. You'll see a preview of all the Frames that we will export to Avocode.
  6. Click the Image drop-down in the top-left corner of the Export menu and select Avocode from the options: 
  7. Click Export to share your Frames with Avocode.
  8. Avocode will open in a browser tab.

  In Avocode

  Once we transfer you to Avocode, Avocode will prompt you to select a Project.

  1. Select the Project using the drop down provided and select Add to Project:
  2. Or, select Create a New Project:
     1. Give the Project a Name.
     2. Choose a Platform.
     3. Click Create Project:
  3. Your Figma Frames will be imported into the Project as Artboards: 
  4. After the design sync is complete, double-click on any Frame to open it in Avocode to view it in the Inspect mode. There you can export images, measure distances, pick colors and generate code in 10 languages.

  Updating Exported Frames

  The integration allows you to export Frames from your Figma Files to Avocode.

  If you make adjustments to those Frames in Figma, you will need to export a new version of that Frame to Avocode.

  You will be able to browse and switch between different versions of your Frames in Avocode.

  1. Select the Frame(s) you've made changes to.
  2. In the main menu, select File > Export. Or, use the keyboard shortcut:
     • macOS: Command-Shift-E
     • Windows: Control + Shift + E
  3. This will open the Export modal in the top-right corner of Figma. You'll see a preview of all the Frames Figma will export.
  4. Click on the arrow next to Image and select Avocode from the options:
  5. Click Export to share your Frames with Avocode: 
  6. Avocode will open in a browser tab.

  As you've exported a Figma Frame with the same name in the project, the design will be added as a new version. This will create a new version in the Project history. Also if you change a Figma frame and then sync it back to Avocode, it will be automatically added as a new version to the previous design.

  Note: You can open the original Figma File from the Avocode Project. This is handy if you want to check for any changes to the original Figma File.

  When you have no Artboard selected, click the View Figma File button in the right sidebar:

  When you have an Artboard selected, click the View Figma File link. You can find this in the Options menu in the right sidebar:

  Disable the Avocode Integration

  If you no longer want to export your designs to Avocode, you can disable the integration in Figma.

  1. Login to your Figma account and open any File in the Editor.
  2. Click on the hamburger menu in the top left corner and find Integrations in the list. There will be a check mark next to the Avocode integration: 
  3. Select this again to disable the integration.
  4. Figma will remove the check mark and show an alert so you know we have disabled the integration.

  Glossary

  Translating terminology between Figma and Avocode.

  Figma	Avocode
  Frames	Artboards
  File	Project
  Page	Project
  Properties Panel	Right Sidebar

  
  Check out Avocode's article on how to use the integration: Import Figma designs into Avocode.

• Zeroheight and Figma

  zeroheight allows you to keep your design system resources in one place.

  You can use zeroheight to:

  • Establish and outline the principles of your design system.
  • Craft and maintain living style guides.
  • Document your Styles and Components and educate Team Members on how to use them.
  • Collate related resources in one place.

  You can connect zeroheight to Figma, to share your Styles and Components. This allows you to view your Figma Styles and Components alongside your other design system resources.

  In this article we'll show you how to:

  1. Allow zeroheight to access your Figma account
  2. Share Figma Files with zeroheight
  3. Add Styles and Components to your Style Guides
  4. Disconnect zeroheight from Figma

  You will need to create an account with zeroheight first: Sign up for a zeroheight account. Learn more about zeroheight on their website: https://zeroheight.com/

  Allow zeroheight to access your Figma account

  You will need to give zeroheight read-only access to your Figma account. This allows zeroheight to access the Figma API on your behalf.

  Zeroheight can only access Files you share with them. Authorizing zeroheight does not give them write access to your Files. Or, allow them to access other Files in your Figma account.

  Once you've signed up for a zeroheight account:

  1. Login to your zeroheight account.
  2. Head to the Uploads Dashboard: 
  3. Click the Add New Upload button: 
  4. Click the Upload button next to the Figma icon:
  5. You'll need to allow zeroheight to access your Figma account. This will prompt you to login to your Figma account and grant access. Click Authorize to proceed: 
  6. Sign in to your Figma account and click Allow access:

  Share Figma Files with zeroheight

  To open a Figma File in zeroheight, you will need to share the File's URL. This allows zeroheight to access any Styles or Components within that specific File.

  It doesn't matter if the File has View or Edit access. zeroheight will only need to view the File to access any Styles or Components.

  Note: Due to the Figma API, zeroheight can only import Styles that you have applied to Layers in that File. If you're missing any Styles, you can apply these to a Layer in the original File.

  Copy the Figma File link

  You will need to copy the File URL from Figma. There are a couple of places you can find the File URL.

  • From the URL in the browser: Copy the File's URL in the browser window: 
  • From the File's Share modal: 
    • Click Share on the File 
    • Use the Copy link button to copy the URL to your clipboard: 

  ---

  Share the link with zeroheight

  When you first connect to zeroheight, you can add a Figma File link: 

  You can access this screen again:by clicking the Add new upload link in the Uploads tab:

  1. Go to the Upoads tab:
  2. Click the Add new upload link: 
  3. Paste the Figma link in the field provided: Click Add file to add the File to zeroheight: 
  4. zeroheight will download the Figma File to your account: 
  5. The File will now show up in the Uploads dashboard:

  Adding Styles and Components to your Style Guides

  You can then insert any Figma Styles and Components into your styleguides in zeroheight.

  1. Go to the styleguides tab in zeroheight: 
  2. Select the styleguide from the list:
     

     Note: If you haven't created a styleguide yet, click the Create styleguide button to add a new one:

  3. Select the page you'd like to add your Figma content to.
  4. Click on the design block to add content to your page: 
  5. If you're adding this to an existing list of Styles or Components, click the Add block:
  6. You'll see the Figma file in the browser on the left: 
  7. Click the checkbox next to an individual Style or Component to select it:
  8. Or use the checkbox at the top of the select all Styles or Components in the list:
  9. Click the Add button to add them to the page: 
  10. You can then click-and-drag to rearrange:

  Made Changes to your Figma Files?

  If you have made a change to any Styles or Components in Figma, you will need to update the File in zeroheight.

  1. In zeroheight, open the Uploads Dashboard.
  2. Click the Update File icon: 
  3. Updates are then applied to any Styles and Components in zeroheight.

  Disconnect zeroheight from Figma

  If you want to remove the zeroheight integration, or remove access, you can remove it from your Connected Apps section:

  1. Open Figma and go to your Account Settings: 
  2. Find the Connected Apps section.
  3. Click the Revoke access link next to the zeroheight application:

  If you have any questions or issues with using Figma and zeroheight, please reach out to the Zeroheight Team!

• ProtoPie and Figma

  Beta Feature: This feature has been developed by ProtoPie and is currently in Beta. For any questions regarding ProtoPie or the integration, please contact the team at ProtoPie.

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

  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. 

  In this article we'll cover how to:

  1. Connect Figma and ProtoPie
  2. Import your designs from Figma
  3. Disconnect your Figma account from ProtoPie

  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.Open ProtoPie on your computer.

  1. Click 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 login to your Figma account.
  5. Once signed in, click the Allow Access button to give ProtoPie permission to access your Files:
     
  6. Once completed 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 .

  Tip! You can import any Frames from your "recently used" Files. A recently used File is a File that you have opened and/or edited in the last 12 hours.

  Learn more about ProtoPie's options when importing from Figma: https://www.protopie.io/learn/import/#Figma_Import

  1. Open ProtoPie.
  2. Click on the same Import button in the top-left corner
     
     
  3. In the Frame dropdown, select the Frame you wish to import
     
     
  4. Choose the Import Size as required
  5. You can 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 your 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 the Account Settings page in your Figma account.

  1. Login to your Figma account
  2. Click on your name in the top-left corner and choose Account Settings
  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.

• Receive Comment Notifications in Slack

  Before you Start

  Who can use this feature

  Users on the Professional Plan can use the Slack integration to send Comment Notifications to Slack.

  You can connect Figma to your Slack account. This ensures you receive notifications in Slack when someone comments on your Files. 

  Every Comment notification in Slack will include:

  • Team Member's name
  • File name and link
  • Contents of the Comment

  

  Set up Slack Comment Notifications

  Send notifications to  Public or Private Slack channels. Or, create your own notification stream by sending Comments to the Slackbot Slack Channel. Notifications are set at a Figma Project level. You can only set one channel per Project. 

  Tip! You can have notifications from multiple Projects feed into a single channel.

  Enable Comment Notifications from the Project in the Figma. 

  1. Open the Project Page in the File Browser.
  2. Click on the Project name in the toolbar and select Manage Slack Notifications: 
  3. Click the Choose a Channel button.
  4. Select the channel you'd like notifications to Post to:
  5. Click Authorize to confirm.

  Note: We don't have access to your messages in Slack, only the ones we post to your selected channel. We can also access your:

  • Email address
  • Name
  • Slack handle
  • Profile Picture
  • (you selected) Channel

  Select another Slack Channel

  You can update the Slack Channel that a Project's Notifications are sent to. You can do this from the Manage Slack Notifications setting on the Project Page.

  1. Open the Project Page in the File Browser.
  2. Click on the Project name in the toolbar and select Manage Slack Notifications.
  3. We'll show you which Channel Notifications are currently sending to. Click the Change Channel... link to change this to another channel.
  4. Select which channel you'd like to change it to using the Post to drop down field.
  5. Click Authorize to confirm.

  Turn Off Notifications

  You can turn off Slack Notifications from the Project Page of each Project.

  1. Open the Project Page in the File Browser.
  2. Click on the Project name in the toolbar and select Manage Slack Notifications.
  3. Click the Turn off Notifications button: 
  4. Comment Notifications will no longer be sent to Slack for that project.

  Enabled Slack Notifications on more than one project? You will need to repeat this process for each Project. To remove the integration, you will also need to Remove Figma from Slack.

  Remove Figma from Slack

  If you'd like to completely remove the integration, you can disconnect it from Slack. You will need to disconnect Figma from Slack's end.

  Slack have detailed instructions on how to remove apps in:  Remove apps and custom integrations from your workspace.

• 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.

• Dribbble and Figma

  When you're ready to show the world your work, you can share your designs in Figma directly to your Dribbble account.

  Sharing via Dribbble is supported from both the Figma website and the Figma Desktop Apps.

  In this article, we'll cover how to:

  1. Share a design to Dribbble.
  2. Disconnect Dribbble from your account.

  Share a design to Dribbble

  Your Figma account is already set up to share your designs to Dribbble. The first time you export a design to Dribbble, you'll be required to authenticate your Dribbble account.

  1. Login to your Figma account via the website or Desktop App.
  2. Open the file and select the Frame you would like to share:
  3. In the main menu, go to Integrations and select Dribble from the list:
  4. Click Export selection to confirm:
  5. You'll be redirected to Dribbble's authentication page, where you'll be prompted to sign in and authorize the connection. You will only need to do this once.
  6. Once authenticated, you'll be taken to a special New Shot page on Dribbble. This will load the selected Frame from Figma:
  7. You can then resize or crop your artwork and fill in some details, like you would do when you're adding a regular post to Dribbble:
  8. Complete the post in Dribbble.

  Disconnect Dribbble from your account

  If you want to remove the connection between your Figma and Dribbble accounts, then you can remove the connection from Dribbble's end.

  1. In your Dribbble account, head to your Social Profile Settings: https://dribbble.com/account/social_profiles
  2. Click the "X" icon above the Figma setting.
  3. The connection between the two will now be removed. You can always reconnect your Figma account to Dribbble again, using the instructions above.
• Trello and Figma

  Power-Ups allow you to turn your Trello boards into living applications. By enabling the Figma Power-Up, you can add live embeds of your Figma files and prototypes as a way to communicate more effectively with designers, developers, and other stakeholders on your team.

  First, anybody on your team can enable the Figma Power Up: 

  1. Select the correct board in your Trello team
  2. Click Show Menu in the upper right corner
  3. Choose Power-Ups
  4. Scroll to find Figma and select Enable

  

  Now, when members of your Trello team open any new or existing card, on any board in the team, they will see Figma listed under Power-Ups in the card view. 

  

  Adding Figma Files and Prototypes

  First, you'll need to connect your Figma account to Trello. Click Figma under Power-Ups:

  1. Click to Connect Figma Account
  2. Then Allow Access

  To add a Figma file or prototype as a live embed to a card:

  1. Select the Figma Power-Up on the right side of the card view
  2. Choose to attach a file or a prototype
  3. Make your selection from the list (there's also a convenient search menu)

  

  You can add more than one Figma embed to a card. To view them all, click Show all Figma attachments. You can also add Figma file links in the description and as comments.

  Navigating the Live Embed

  If you're using a mouse or your laptop trackpad, you can click and drag to move around the live embed. You can pinch to zoom on your trackpad, and if you are using Apple's Magic Mouse, you can hold Command while dragging your index finger forwards and backwards on the mouse. 

  If others are updating the file, you will see those changes reflected in real-time. 

  Removing Figma files and Prototypes

  Click Remove at the upper right corner of the attached Figma file and confirm that you want to remove the attachment. If you have more than one Figma file or prototype attached to a card, you will have an option to select which one to remove.

  Read more about our integration with Trello on our blog. 

• Jira and Figma

  You can add live embeds of your  public Figma files to JIRA issues. To do this, first install the Figma JIRA add-on. Then copy the Figma URL of any public Figma document and paste it on a JIRA issue page. A preview will appear. It's that easy!

  Read on for how to install the add-on, how to use it, and some details on permissions.

  Installing the add-on

  To install the add-on, open the settings dropdown in JIRA and choose Add-ons.

  

  Once on the Add-ons page, search for  Figma for JIRA in the marketplace search box and click Install.

  Using the add-on

  After installing the add-on, all JIRA issues will have a new section called  Designs.

  

  Simply paste the URL to a publicFigma file into the input box and click Add Design. You'll see an embed of the Figma file appear inline.

  You can also share embed a live preview of a specific frame, instead of a preview to the entire file.

  Figma in the browser

  1. Open your Figma file 
  2. Select the individual frame you'd like to embed in JIRA
  3. You'll notice the file URL is appended with ?node-id=XXXX  
  4. Paste this URL into the box and click Add Design

  Figma desktop app

  1. Open your Figma file
  2. Select the individual frame you'd like to embed in JIRA
  3. Click the Share button
  4. In the dialogue, select the box for Link to selected frame
  5. Choose Copy shareable link to this file
  6. Paste this URL into the box and click Add Design

  Permissions

  The Figma JIRA add-on only works with public Figma files. To see if a Figma file has public access enabled:

  1. Open the file and click the Share button in the top right corner of the toolbar. You should see a window like the one below. 
  2. Make sure it reads, Anyone with the link can view or Anyone with the link can edit.

  

  Check out our blog for more about our integration with JIRA. 

  If you're interested in embedding your Figma files in Confluence, check out this blog post by Ben Kopf at ADP.

  Read more about Permissions and be sure to check out our video on Sharing Files.