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. 

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

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: Ctrl-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: Ctrl-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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.