1. Web Design
  2. Avocode

How to Use Avocode to Inspect Your Photoshop and Sketch Files

Scroll to top
Read Time: 1 min
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

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

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.