Figma plugin

Avocode

by Petr Brzek

users
15K
likes
154
saves
9K
comments
7
Open in Figma
FreeWorks inFigma Design
Price
Free
Latest version
v10 · Sep 30, 2021
First published
Mar 17, 2020
Publisher
Petr Brzek
Features

What Avocode does

Summarised from Petr Brzek's description on the Figma Community.

  • review design versions from Figma & leave feedback (while not seeing all your…

  • click through and edit screen flow logic

  • edit copy in text fields

  • inspect all layers, get specs, pick colors, export assets as PNG, JPEG, WebP, and SVG

  • export pure standards-based CSS, Sass, Stylus, Less, SCSS, CSS in JS, Styled…

  • Make sure you are logged into your Avocode account

  • In Figma, go to Plugins and pick Avocode. You should see a new export window

  • Select any number of frames and hit EXPORT

  • Avocode will open in a new browser tab.

  • Manifest

    2 quick actions

    Run from the Actions menu (Cmd/Ctrl + K): Avocode, Configure Private Cloud.

On this page
Overview

About Avocode

Avocode is a free Figma plugin published by Petr Brzek in 2020. It works in Figma Design and has 14,507 users and 154 likes on the Figma Community.

In the developer's words

Hand-off design versions to other stakeholders who need to work with them, while keeping your work in Figma intact.

In Avocode, anyone from your team can:

- review design versions from Figma & leave feedback (while not seeing all your exploration work)

- click through and edit screen flow logic

- edit copy in text fields

- inspect all layers, get specs, pick colors, export assets as PNG, JPEG, WebP, and SVG

- export pure standards-based CSS, Sass, Stylus, Less, SCSS, CSS in JS, Styled Components, Swift, Android, and React Native from layers

Learn more at https://avocode.com/

How to use the Avocode plugin?

1. Make sure you are logged into your Avocode account.

2. In Figma, go to Plugins and pick Avocode. You should see a new export window.

3. Select any number of frames and hit EXPORT.

4. Avocode will open in a new browser tab. Choose a project or folder where your wish to sync your designs, and that’s it.

We welcome any feedback on how to improve our Figma plugin. If you have any suggestions or issues, please contact us at team@avocode.com

Changelog

What's new

Version 10 · released Sep 30, 2021

  • Support for syncing main components
Trust

Permissions and privacy

Network access

This plugin's manifest doesn't declare its network access, which is common for older plugins. Figma shows a warning on the Community page for plugins like this.

Extra permissions

None beyond the standard access to the file you run it in.

Read from the plugin's published manifest.

Compare

Avocode alternatives

  1. 1

    Figma to Code

    by Bernardo Ferrari

    2.4M users8.9KFree

    Code Conversion Made Easy: Figma to Web & Apps

    View details
  2. 2

    Anima

    by Anima

    1.9M users18KFree

    Anima - AI Design to code, Vibe code, Vibe design

    View details
  3. 3

    Builder.io

    by Steve Sewell

    1.3M users23KFree

    Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.

    View details
  4. 4

    Figma to HTML with Framer

    by Framer

    643K users12KFree

    Convert your Figma design to HTML code in seconds with Framer.

    View details
  5. 5

    SkewDat

    by Unfold

    640K users7.3KFree + $2/mo upgrade

    Skew any layer or group with all layers preserved to edit.

    View details
  6. 6

    Locofy Lightning

    by Locofy.ai

    608K users5.4KFree

    Convert Figma designs to code in a flash: React, React Native, Flutter, HTML/CSS, Angular, Next, Vue

    View details
FAQ

Avocode FAQ

What does Avocode do?

It's a Figma plugin by Petr Brzek that runs in Figma Design.

Is Avocode free?

Yes. Avocode is free to install and run from the Figma Community, with no paid tier listed.

How do I install Avocode?

Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.

What are the best alternatives to Avocode?

By user count, the closest alternatives are Figma to Code, Anima and Builder.io.

For developers

Built this plugin?

Use this page as a landing page for Avocode: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.

Avocode on figmaplugins.co

Style

Label

Size

Code

<a href="https://figmaplugins.co/plugins/avocode/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="Avocode on figmaplugins.co" width="220" height="48"></a>

Want it featured on figmaplugins.co? Submit it for review