First, make sure youโ€™re logged in to your app.avocode.com account in your browser. Since Figma is a web-based tool, 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.

Open any of your designs in Figma.

Go to Integrations and select Avocode.

๐Ÿ‘‰๐Ÿผ 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.

Next, you should see a notification, that Avocode integration is now enabled.

Select one or multiple frames and go to the export button in the top right corner.

โ˜๐ŸผTIP: You can also press CMD + SHIFT + E shortcut in Figma to make the export dropdown appear.

๐Ÿ‘‰๐Ÿผ NOTE: If the frame you're syncing is on a different Page of the same Figma file, it will be added to a new design file in Avocode. To keep frames together in Avocode, we suggest having them on one Page in Figma.

Make sure you're switched in the tab that says AVOCODE and hit Export.

Avocode App will open in a new tab of your browser

๐Ÿ‘‰๐Ÿผ NOTE: If you have multiple teams in Avocode, make sure to switch to the right one first, and then sync the design from the start.

Select a project where you want to import this design.

โ˜๐ŸผTIP: 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.ย 

The design will be imported into your projectโ€ฆ

โ€ฆ and then you can open the Figma file and open any frame that you have synced from this file.

Open the design in the Inspect mode

You can measure distances, pick colors and generate code in 10 languages.

๐Ÿ‘‰๐Ÿผ NOTE: Exporting and toggling layers is currently disabled and will be added later on.

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

๐Ÿ‘‰๐Ÿผ NOTE: The frame that you want to sync as a new version, has to be the same one the one in Figma. If you, for example, duplicate a frame, change it and then sync it to Avocode, it will be added as a new design frame. Soon weโ€™ll release an update which will recognize versions by the name of the frame, so even duplicated artboards are added as new versions.

Did this answer your question?