How to connect Avocode with Atom editor?

Open your Atom editor (you can download it here).

Go to the navigation top bar, click on Atom and go to Preferences (or press CMD + ,)

Go to Install and type in "avocode".

How does it work?

  1. Press CMD/CTRL + SHIFT + P and type in "avocode" and choose how you want to open Avocode inside you Atom editor.
  2. Click on a layer and the CSS displays in the Avocode code panel on the left.
  3. Click back to your CSS style sheet and type for either a name of the selector or a specific property like width, you’ll get a suggestion which you can autocomplete by hitting Enter.
  4. Press CMD/CTRL + SHIFT + V to import a whole code snippet of a particular layer.

Features:

  • View design inside your text editor
  • Click on a layer and get code suggestions
  • Measure sizes and distances in pt, px, dp and rem
  • Export layers and design slices as PNG, SVG, WebP, & JPEG images
  • Press CMD/CTRL + SHIFT + V to import a whole code snippet of a particular layer

Supported code languages:

Less, Sass, Less, SCSS, Stylus, React Native, CSS in JS, Styled Components, Swift, and Android.

Set code language you want to export

Click the cog wheel icon in the code panel (on the right) and select your preferred language.

To customize the code output (reorder code lines and hide properties) please read this article.

Did this answer your question?