Inspect designs inside Atom editor
Integrate Avocode web app with Atom to inspect Photoshop & Sketch designs inside your text editor and get code suggestions from layer styles.Install Avocode package
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.
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.
How to install Avocode in Atom?
- Open Atom, press CMD/CTRL + SHIFT + P and type in "avocode" and choose if you want to see Avocode on the rigfht or left.
- Open a design in the embeded Avocode, click on a layer and the CSS displays in the Avocode code panel on the left.
- Click back to your style sheet and type either a name of the selector or a specific property like width. You’ll get a suggestion which you can autocomplete by hitting Enter.
- Prepare a selector and press CMD/CTRL + SHIFT + V to import a whole code snippet of a particular layer.
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.