Inspect designs inside Atom editor

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

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 integration

View 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.