A quick introduction to Layer comps

Layer comps is a feature for designers that want to create, view and manage multiple layouts in a single Photoshop® file. Many designers do this by grouping different screens into folders which they show and hide. Layer comps just makes it really easy to change between those screens and states.

A layer comp can record three types of layer actions. The layer's visibility, the position in the document and the layer's appearance. When you create a new layer comp you can choose what you want it to record.

It's important to remember that if you make a change on a layer that the layer comp listens to, you need to update that layer comp. You do that by selecting the layer comp and then clicking the Update icon at the bottom.

Alex Kendrick has written a great, in-depth article about how layer comps work: http://twosixcode.com/notes/view/how-to-use-photoshop-layer-comps

Linking the screens together

Composite uses the layer comps in your document to separate between different screens. You tell Composite to transition to a layer comp by appending the name of the layer comp to a layer's name. This will turn the shape of the layer, or the combined shape of everything inside a group, into a tappable hotspot on your phone.

What's so great about this is that, when you move a layer, or update its size, the hotspot is always correct. That means you don't have to manually update your hotspots everytime your design changes.

Add animations for a native feel

Simply by appending the animation type to the end of the layer name, you can add animations when transitioning between different screens. You can choose between +push, +pop, +modal, +close and +flip.

Open in Interactive Mode

Enter Interactive mode in Composite by pressing the hand icon in the lower right corner. Composite automatically connects to your Photoshop® document, loads all the layer comps and converts them into an interactive prototype. Now you can tap on the hotspots you've defined to navigate around around the app. When you make a change to your mockup, make sure that you tap the refresh icon in the lower left corner of the toolbar.

Happy prototyping!