Inspect designs inside Atom editor
Integrate Avocode web app with Atom to inspect Sketch, XD, PSD, AI, and Figma designs inside your text editor and get code suggestions from layer styles.
Install Atom integrationView design inside Atom
Don’t change environments and open designs inside your text editor.
Get code suggestions
Easily click on any design layer and get code suggestion in Atom editor.
Import a whole code snippet
Press CMD/CTRL + SHIFT + P to import a whole code snippet of a particular layer.

How to install Avocode in Atom?
- Go to Atom Preferences (press CMD/CTRL + ,) Then choose Install in the left sidebar and write "avocode" to search for the package. Once it shows up in the search list view, press Install.
- Then press CMD/CTRL + SHIFT + P and type in "avocode" and choose if you want to see Avocode on the right or the left side.
Export 10 different code languages
Switch between CSS, Less, Sass, SCSS, Stylus, React Native, CSS in JS, Styled Components, Swift, and Android. Read more about code languages.
Stay in Atom and do so much more
Avocode is a just as great for measuring, exporting images, and generating code, as for design team collaboration, feedback, and version control. All inside Atom.
See more tools you can connect with Avocode.