An Open Letter to Adobe: Layer Comps Need Some Love

Layer Comps have transformed the way I work in Photoshop. They allow me to work more efficiently inside of Photoshop, and ultimately take a more atomic approach to my PSD structure. But the real genius of Layer Comps, and the reason I started venturing into them, is the ability to export all screens and accompanying permutations in one fell swoop.

All that being said, Layer Comps are something that haven’t been changed in some 5 years — and I think there are a few key ways Adobe could update it to make them even more powerful for UI designers out there. Below is a list of all the features I think Photoshop could add to enhance Layer Comps, and taking them to a whole new level.

“So Layer Comps are like having a roster of players on a team (the layers) and having multiple players appear on different lineups (Layer Comps)? 
- J.J. Sullivan, Professionally Handsome”

1. Text Content

Adding the option to have Text Content captured in Layer Comps

Allow Layer Comps to capture the content of Text and Paragraph layers. I find myself having to continually duplicate text layers from layer comp to layer comp, which is not ideal when trying to maintain a large PSD. If I could capture text content that’s unique to each layer comp, that would significantly reduce the amount of layers I’d need and maintain text positioning and overall design integrity.

2. Accessing Layer Comps Inside Smart Objects

Smart Objects are incredible. They are a big part of Atomic design and help maintain design consistency across UI’s really well. I can have multiple instances of the same Smart Object across a PSD, and when one changes, all of them do. This is a great feature, but becomes a little cumbersome when I want to change only a few layers within one Smart Object. I think there is a better way to go about this with something I like to call Smart Object Tunnelling.

Imagine you were able to have a Smart Object with Layer Comps which I could selectively use and capture in the parent layer comp. For example, in my Smart Object I have a few states like Enabled and Disabled, and in the parent PSD I could capture that state change, while maintain the fidelity of the Smart Object. In essence, I don’t want to maintain 2 separate Smart Objects which have roughly the same content, save for a couple of layer style changes.

A right-click context menu allowing users to select a Layer Comp present in the selected Smart Object

Bonus! It would be extra awesome if you could somehow natively allow for Dynamic External Smart Object linking. So whenever an external PSB (one that isn’t embedded in the parent PSD) is updated, it is automatically reflected in the source PSD file. This would make the process of sharing components between multiple portions of a project and PSD’s a lot easier and manageable. Update, Adobe was way ahead of the curve and added this in Photoshop 14.2!

3. Enhancing the Layer Comps Panel

The Layer Comps panel is pretty utilitarian and lacks a fair amount of features that would be really useful to layer comp veterans and aficionados alike. One of the more frustrating feature about the Layer Comps panel is that it hides a fair bit of information behind a double click. Upon double-clicking on an individual layer comp, you get the option to turn on certain properties that particular layer comp will track. The issue is that, for positioning specifically, if all Layer Comps don’t have the positioning option enabled there will be a lot of problems; such as layers shifting around unintentionally and not adhering to the positions you set. A simple way to mitigate that would be to update the panel like so.

This shows how the panel can be enhanced to bubble up things like which properties are set on each layer comp (position, visibility, layer style), as well as any of the properties have changes that need to be updated. This allows the user to see, at a glance where the problematic Layer Comps can be, and provides a call to action to read any comments that might have been passed over in the current implementation.

4. Exporting Separate Crop-Points

This one is for you @N8Garvie. In this world of Responsive Design, we typically have to accommodate for 3 breakpoints — mobile, tablet, and desktop. Doing so becomes a lot easier when they can be created in one mega PSD. However exporting individual breakpoints from said mega PSD via Layer Comps to Files is impossible. Thats why I think adding a Crop-Point ability to the export Layer Comps to Files dialog could be really handy. You could set up your coordinates to match the positioning of your breakpoints on the page, and then simply choose which one you want the scrip to trim against when exporting the Layer Comps to files.

There you have it  —  a collection of my best ideas on how to improve what’s already one of the best tools for UI design. Hopefully the article might spark something the community could undertake, or who knows, maybe it will find its way into the right hands of someone at Adobe who can make a difference.

I’d like to thank the Heist team for motivating me to writing this, a special thanks to Scott, Zak, and Eric for helping edit / guide the post, and finallyJ.J. for providing an awesome analogy for Layer Comps.