Avocode App

Integrate Avocode web app with Visual Studio Code to inspect Photoshop & Sketch designs inside your text editor and to get code suggestions from layer styles.

What is Avocode?

Avocode is a tool for designers and developers to share, open and inspect Photoshop & Sketch designs. It works on the web and has also an offline desktop app for macOS, Windows, & Linux. It comes with a 14 day free trial, no credit card required. To try it out, please start your trial here: https://avocode.com/signup


  • 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

How does it work?

  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.
  3. Click on a layer and the CSS displays in the Avocode code panel on the left.
  4. 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.

Supported code languages:

CSS, 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.

  1. Avocode is an app to share and inspect Sketch, XD, PSD, and Figma design files - on macOS, Windows, Linux and in the browser. Invite your Slack team members to your Avocode team to collaborate on design files with you.
  2. Centralize design collaboration, developer hand-off, version control, screen flows, & feedback in one tool. Sign up free today. Work with Sketch, Adobe XD, Photoshop, Illustrator, and Figma designs on macOS, Windows, and Linux.
  3. Oct 01, 2019 Avocode Alternative – A lot of alternatives app to Avocode that you must to know out there. And, looking for an ideal application was not easy job. Lucky you, in this page you can find the best replacement app for Avocode. So what you are waiting for, get the latest Avocode alternative app for Windows 10 from this page.

Avocado App For Android

Avocode is a platform-independent tool that helps teams turn Sketch, PSD, XD, AI, and Figma designs to the Web, React Native, iOS, or Android code.NOTE: This wrapper is not verified by, affiliated with, or supported by Avocode, Inc.