I organize my states by collecting them on a different page and then put them on seperate artboards. This way I can combine them in InVision to hand to the developers. I usually also make a preview of all the states on 1 artboard as an extra screen to give the developers a good overview of all the different options.

This is a huge issue and I haven't seen a good solution.

Elements having different states is such a crucial part of product design and none of the tools I've seen makes it easy to create them.

I hope we will see a tool that really enables us to design interactive layouts.

I would say that the best way to hand-over something like this to developers would be in some sort of visual style guide.

Handing over using Zeplin would also help the developer too. Good luck!

Nobody's using States plugin (http://states.design/)? I'm still trying to figure out whether it's good or not ...:)

This is what I do:

XX.YY.ZZ - Name of Screen, Screen Description, Different States

XX = Epic # YY = Screen # ZZ = Optional, States of the Screen #.

No one has ever complained, mostly people are happy with the level of specificity. I wonder if anyone has thoughts on a better way.

Example Screenshot: http://d.pr/i/w1Ui

Is your issue specifically that it's hard to navigate 100+ screens in invision for creating your prototype?

Does your prototype require all 100+ screens?

tl;dr – Screen types vertically, screen states horizontally.

1) Create a sitemap to identify all screens of an app (or pages of a site). Assign each screen a name and a unique ID as prefix. I normally use a dot notation to reflect content hierarchy, for example

• 1 Stories
• 1.1 Story Details
• 1.2 Post a Story
• 2 Jobs
• 2.1 Post a Job
• 3 Podcast
• …

2) In Sketch, create an artboard for each screen in your sitemap. Arrange them vertically, label them with the prefix and name. Add a suffix ‘0’ to the artboard name, for example 1.1 Story Details 0. This will be the screen's default state.

3) If a screen has multiple states, duplicate the corresponding artboard and adjust its state. Arrange different states of the same screen horizontally. For each new state, increase the suffix by 1.

4) The result is an OCD-grade organised Sketch file that translates nicely into structured exports for Zeplin or InVision, for example:

• 1 Stories 0.png
• 1 Stories 1.png
• 1 Stories 2.png
• 1.1 Story Details 0.png
• 1.1 Story Details 1.png
• 1.2 Post a Story 0.png
• 2 Jobs 0.png
• 2 Jobs 1.png
• …

The best approach I've found with my team, is to insure that each prototype is built with hotspots on every comp in order to navigate it. That way the developers are clicking on the actual elements that have the state changes.

Along with that, I've found that leaving "Tour Point" note types on comps that have subtle changes between them. These notes have a blue pulsing dot when you land on the comp, which help them get noticed more than the standard note type.

I create a "states" artboard which is a bit loose and not structured like the UI itself that has all the necessary states of things. I'd recommend taking a look at Shopify's Pattern Library (in Sketch), which appears to lay things out this way as well (albeit more methodically/public facing than I find is necessary for internal work.)

The solution, if you use pro grade software like Photoshop, is to use hidden groups and colour code them - I use blue for states that can be turned on and off and orange for notes layers. It doesn't take much work to make sure they work out of the box and everyone else can use them (i.e. use a background layer to cover the old content behind it, use smart objects to make sure re-used elements stay in sync), and this is even supported by handover tools like Avocode.

I can't tell you for sketch though.