Back to Plugins
Avocode

Avocode

<p>Hand-off design versions to other stakeholders who need to work with them, while keeping your work in Figma intact.</p><p><br></p><p>In Avocode, anyone from your team can:</p><p><br></p><p>- review design versions from Figma &amp; leave feedback (while not seeing all your exploration work)</p><p>- click through and edit screen flow logic</p><p>- edit copy in text fields</p><p>- inspect all layers, get specs, pick colors, export assets as PNG, JPEG, WebP, and SVG</p><p>- export pure standards-based CSS, Sass, Stylus, Less, SCSS, CSS in JS, Styled Components, Swift, Android, and React Native from layers</p><p><br></p><p>Learn more at <a href="https://avocode.com/" rel="noreferrer noopener nofollow" target="_blank">https://avocode.com/</a></p><p><br></p><p>How to use the Avocode plugin?</p><p><br></p><p>1. Make sure you are logged into your Avocode account.</p><p>2. In Figma, go to Plugins and pick Avocode. You should see a new export window.</p><p>3. Select any number of frames and hit EXPORT.</p><p>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.</p><p><br></p><p>We welcome any feedback on how to improve our Figma plugin. If you have any suggestions or issues, please contact us at <a href="mailto:[email protected]" rel="noreferrer noopener nofollow" target="_blank">[email protected]</a></p>

csshandoffdevelopercodeinspect

Plugin Preview

Avocode preview

About this plugin

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 [email protected]

Plugin Details

Version10
CreatedMarch 17, 2020
Last UpdatedSeptember 30, 2021
CategorySoftware development
CreatorPetr Brzek
Stats8940 installs, 142 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Editor Types:
    figma