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.
1. Open any of your designs in Figma.
2. 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.
You should see a notification, that Avocode integration is now enabled.
3. Select one or multiple frames and hit CMD + SHIFT + E or go to File/Export
4. Click on the "Image" dropdown and select Avocode
As you switch to Avocode the frames you have selected will be listed below.
5. Click Export and Avocode 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.
6. Select a project where you want to import this design.
NOTE: If you already had a Figma file with the same name in the project, the design will be added as a new version.
☝🏼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.
7. The design will be imported into your project
8. Double-click on the design to open it and inspect it
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. Learn more.
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.
View your files in Figma
If you need to edit your file, just click on View in Figma in the right sidebar.
1. View for de-selected artboards
2. View for selected artboards
