Design

Prototyping with Photoshop layer comps

by

on

View all posts

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.

cycle-comp

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:

new-comp

  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.

panel

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

menu

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.

Author

Andy Orsow
Designer and product marketer at InVision, resident GIF-ologist and video maker.

Join over 3 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 3 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 3 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 3 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 3 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.