Import your designs to Avocode with the Dropbox integration

While Dropbox has great sharing options, it can only show a preview of the file and cannot make your design file developer-ready. Avocode gives front-end developers access to layers, assets, code, and specs right in the browser.

How does it work

Import files in any format

You can directly import Sketch, XD, AI, PSD, JPEG, PNG, GIF, BMP or TIFF design files.

Sync new versions

Are you backing-up your designs to a team Dropbox? Pull any new version to Avocode.

Batch-import from Dropbox

Multi-select files in any Dropbox folder and transfer the contents into an Avocode project.

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 pressALT + 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.

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.

See more tools you can connect with Avocode.