brown-bag-design-dev-workflow-layer-comps.md

# Design & Development Workflow - Photoshop Layer Comps Since we won't be dropping Photoshop entirely out of our workflow (anytime soon), Layer Comps are something we should leverage to ease the designer/developer workflow. ## What even are Layer Comps? * Ability to save document state * Visibility, Position and Appearance (Layer Style) * Export layer comps to files (PSD, PNG, JPG, etc) or PDF * [How to Use Layer Comps for Multi State Mock-ups in Photoshop CC](https://www.youtube.com/watch?v=PKSLu_UELv0) ## Why should I use them? ### Benefits for Designers * Easy export of all states * Helps you keep track of different states in large projects * You'll sleep better knowing the developer won't have to make design decisions ### Benefits for Developers * You'll have a "table of contents" of every state * No more changing visibility of layers/layer groups until you match up to exported stills ## Keeping things DRY * Don't repeat yourself (DRY), is a principle of software development * This is important for designers and developers * Designers: Symbols, Paragraph Styles, Character Styles, Smart Objects, etc * Developers: CSS classes, modules, templates, functions, etc ## Topics for discussion * How do we continue the conversation Molly started? * Should Photoshop still have a place at the table (when it comes to UI design)? [Probably not for long.](http://techcrunch.com/2016/03/14/invision-acquires-silver-flows-a-tool-for-prototyping-inside-sketch/?utm_source=designernews) * If so, at what point in the process do we start and stop using it? * What new tools should we adopt to help us be more efficient (=== profitable)? * [Adobe XD](http://www.adobe.com/products/experience-design.html), [Sketch](https://www.sketchapp.com), [Webflow](https://webflow.com), [InVision](https://www.invisionapp.com), [Avocode](http://avocode.com), etc.
Overview of the topics covered in my brown bag, Design & Development Workflow - Photoshop Layer Comps.

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.