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.
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?
- Go to VS Code Preferences and press SHIFT + CMD/CTRL + X to open Extensions.
- 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?
- 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).
- Then press CMD/CTRL + SHIFT + P and type in ">avocode" to launch Avocode inside your VS Code
- Log in to your Avocode account.
- Open any design in the Inspect mode.
- Click on a layer and the CSS (or any other pre-set code) displays in the Avocode code panel on the left.
- 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.
- Switch between CSS, Less, Sass, SCSS, Stylus, React Native, CSS in JS, Styled Components, Swift, and Android. Read more in this article.