Inspect designs inside Visual Studio Code

Integrate Avocode web app with VS Code to inspect Sketch, XD, PSD, AI, and Figma designs inside your text editor and get code suggestions from layer styles.

Install Avocode extension

View design inside VS Code

Don’t change environments and open designs inside your text editor.

Rename, scale, export any layer

Select one or multiple layer and export it in multiple formats and resolutions.

Get code suggestions

Click on any design layer and get code suggestion for your stylesheet in VS Code.

Avocode in Visual Studio Code

Enjoy fully-featured Avocode inside VS Code

Avocode is just as great for measuring, exporting images, and generating code, as for design team collaboration, feedback, and version control. All inside VS Code

How to install Avocode extension into VS Code?

  1. Go to VS Code Preferences and press SHIFT + CMD/CTRL + X to open Extensions.
  2. Write "avocode" into the search. Once it shows up in the search list view, select it and press Install.

How to use Avocode in the VS Code?

  1. Avocode extension will be automatically opened on the right side of your code tab. If you’d like to open Avocode below your code, please go to View/Toggle Editor Group Layout (or press ALT + CMD + 1 on macOS or ALT + SHIFT + 1 on Windows).
  2. Then press CMD/CTRL + SHIFT + P and type in ">avocode" to launch Avocode inside your VS Code
  3. Log in to your Avocode account.
  4. Open any design in the Inspect mode.
  5. Click on a layer and the CSS (or any other pre-set code) displays in the Avocode code panel on the left.
  6. Click back to your stylesheet 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.
  7. Switch between CSS, Less, Sass, SCSS, Stylus, React Native, CSS in JS, Styled Components, Swift, and Android. Read more in this article.
See more tools you can connect with Avocode.