How to Use Avocode to Inspect Your Photoshop and Sketch Files

In today’s tutorial I’m going to introduce you to Avocode, developed by the “eleven brave men and one brave woman” of Source and recently released in the form of version 1.0. Avocode is an application which allows you to work with .psd and .sketch files, moving from design to code, without even opening Photoshop or Sketch.

We covered Avocode a few months ago, but back then it was still in beta and has since undergone some serious feature overhauls. This tutorial will show you how to work with the Avocode desktop application and introduce the new features. 

Part 1. Getting Started

In this part of the tutorial I’ll demonstrate how to get setup with Avocode, create projects, upload Photoshop and Sketch files, then work with those files in the Avocode desktop application.

Part 2. Exporting Code

In this video I’ll show you how to generate CSS (along with Sass and Compass) directly from your Photoshop and Sketch files. We’ll also look at some shortcuts and a ton of other helpful features. Let’s get started!

Useful Resources