Prototyping with Photoshop layer comps

Here at InVision, we help turn your designs into fast, fully interactive prototypes for web and mobile. If you’re a Photoshop user, this tip’s going to make prototyping with InVision that much faster—and easier.

Using layer comps for prototyping

If you’re not familiar with layer comps yet, be warned—your Photoshop workflow is about to change. Dramatically. For the better.

What’s a layer comp?
Layer comps act like shortcuts to different states of your design, so if a particular state involves a dozen different nested layers, you can display it with a single click, instead of hunting around to toggle visibility or shuffle positions.

One of my favorite things about layer comps is that you can export all your layer comps as images—all at once, instead of having to individually save out each page and state of your design file. But more on that later.

Okay, so how do I make these layer comps?

Creating layer comps in Photoshop is super easy. Just follow these steps:

1. Go to Window > Layer Comps
2. Click the Create New Layer Comp icon, and name your comp
3. Choose what you want to track (I usually only track visibility, but you might want to track position and appearance too, in certain situations)
4. Click OK
5. Repeat steps 1–4 with a new page of your design, creating a quick list of shortcuts to your different screens and states

If you make a change to one of your layer comps, just click the refresh icon to commit the change.

How to skip exporting images

Layer comps really come into their own when you’re prototyping with InVision, because you can easily turn all those states into screens—without exporting a thing.

Just add a “+” symbol before your comp name, then drag and drop your PSD into InVision via your favorite browser, InVision Sync, or Dropbox. Voila—you’ve got a nice, tidy prototype, ready to share and gather feedback.

Exporting all layer comps at once as images

If you still need to export everything manually, it’s crazy easy. Just go to File > Scripts > Layer Comps to Files

It’s even easier in Sketch

If you also use Sketch, you can automatically convert your artboards to screens too! Find out how in our 11 tips for prototyping with Sketch (hint: we left the best for last).

Have questions about layer comps? Get answers on Twitter @InVisionApp.