App user flows with Sketch

Artboards in Sketch are great for designing different screens and states of an app, but documenting how users navigate from one to another view isn’t obvious.

There are great tools available to turn screen designs into interactive prototypes, like the versatile Apple Keynote or InVision and Framer.

Though often it’s useful to just have a big two dimensional presentation of all steps and the resulting flows.

Let me show you a little hack Oliver and I use for this at Uber.

Sketch hides the overflowing parts of objects, which makes for sad arrows between screens.

Artboard overflow is hidden, including our arrow

Moving the arrows on top of all artboards, makes them visible. We can group them all on their own artboard with a transparent background.

Flow arrows grouped in top artboard with transparent background

Though Sketch won’t preserve artboard shadows in exports or presentation mode, resulting in harder to understand visuals.

White screen designs without shadows are awkward in exports and presentation mode

You can solve this by putting an artboard with a (neutral) background color underneath all your work.

Extra artboard underneath all work for enhanced export

Now you can select the Export artboard and generate a file that’s easily shared with other people.

Final result

To recap:

1. Place the arrows on a transparent artboard on top of your work;
2. And put an artboard with a background color below your work.

We call this the Flow Sandwich.

Thanks to Teehan+Lax for their free iOS GUI and to Bohemian Coding for making Sketch so awesome.

Don’t forget to checkout our open design positions at Uber. We’re working on some big challenges and are looking for smart team players.