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 Visual Studio Code integration

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

How to import design files from Dropbox?

  1. Simply open any project in Avocode and click on ADD DESIGN and select DROPBOX.
  2. Make sure you’re logged in the correct Dropbox account to enable the integration.
  3. Select one or multiple design files and confirm by pressing Choose.
  4. When your files are uploaded, you can open them, inspect layers, play them as a prototype and comment.

How to import new design versions?

  1. Go to any project in Avocode and select any design file (in the same format as the previous one in Avocode) that you wish to add as a new version. Click on the context menu and choose New version via Dropbox
  2. When the new version is added, you can open it and switch back and forth between the version states of the file.

If you want to import a new version of the same file, make sure that it is backed up in Dropbox. This way the file will be automatically updated and your Avocode team members will be able to sync it as a new version.

Share designs via Avocode to make them developer-ready

Import your Sketch, XD, PSD, and AI files to Avocode and share them with your colleagues so they can inspect or give feedback.

See more tools you can connect with Avocode.