The integration between Figma and Avocode works with the web-version of Avocode. You can only import Figma designs into Avocode in the browser, however, once the design is synced in Avocode, you can inspect it or comment on it also from your desktop app.
Note: When you click the add design button and select Figma, Avocode will show you the guide on how to import Figma designs.
Getting started
Either log in to your Avocode account or create a new one here. Additionally, you can download the Avocode desktop app (it works on macOS, Linux, and Windows). Watch this video to learn how Avocode can speed up your work.
Enabling the Avocode integration
First, make sure you’re logged in to your app.avocode.com account in your browser. If you have multiple teams in Avocode, make sure to switch to the right one.
Login to your Figma account and open any of your designs.
Click the hamburger menu in the upper left corner of the toolbar
Search for Integrations, and then select Avocode from the dropdown menu
NOTE: You only need to enable the Integration once, and the option to export your frames to Avocode will always be there - no matter what Figma file you open.
You should see a notification, that Avocode integration is now enabled.
Then click Got it
How do I export my content from Figma to Avocode?
Any Frames you select in Figma can be exported to Avocode.
1. Select one (or more) frames on your canvas
2. Use Shift + Command + E on macOS and Shift + Ctrl + E on a PC, or select Export from the Menu.
Click the Image drop down in the top-left corner of the Export menu and select Avocode from the options. As you switch to Avocode the frames you have selected will be listed below. Click Export and Avocode will automatically open in a new tab of your browser.
3. Select a project where you want to import this design. If you don't have an appropriate project for this design in Avocode yet, just click on “Create a new project”. Once you create it, the design will be automatically imported there.
NOTE: If you already had a Figma file with the same name in the project, the design will be added as a new version. 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.
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.
To make the transition between design and specs even faster, you can also view any file back in Figma directly from Avocode - just click on VIEW FIGMA FILE in the right sidebar.
Keep design versions from Figma in sync
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. This way your team always knows which version is final. Then you can switch between the versions chronologically - in both Inspect and Comment mode.