Download the Sketch file here (You will need to install the Auto Layout plugin for it to work properly)

Quick Intro

Personally I love using Sketch for almost every step in my product design process but there have always been a couple of tasks that have forced me to leave Sketch and rely on other apps. Creating flow charts was one of those.

I would find myself using google draw to create fast user flows but then when I wanted to create low or high fidelity wireframe flows I would have a problem. As I like to create all my wireframes in Sketch I would then look for a way to export the screens from Sketch. This was already too complicated just because I would have to go back and forth between the two apps. But last night at 2am on a Saturday night, (I don’t know why I was looking at this at that time either) I think I found a practical solution.

Using Sketch and Auto Layout I managed to solve the two main problems, which was speed and consistency.

The Benefits

Using this method you can create extensive flows with 100% consistency. All you need to do is copy and paste a new screen or group of screens and everything else will rearrange itself to accommodate the new items while keeping all the same spacings between each-other. It will even adjust your background too! This saves so much wasted time trying to get everything evenly spaced while at the same time gives you a better looking result.

No more measuring spacing between screens or groups.

Step 1 — Flow Group

Screen symbol

Start with a symbol for the screen itself that has a title bar for the screen and a blank area for the screen contents.

Screen padding stack

Create two rectangles either side of the screen as padding to give a bit more breathing space. Next create your first Auto Layout Stack, set it to horizontal and then add the spacing that you would like between each screen in Auto Layouts. Once this has been done I can then copy and paste new screens in to the stack and rearrange the screens automatically while keeping all the correct spacing.(Later reduce the opacity of the padding to 0% so they can’t be seen.)

Responsive Background

Create a symbol for your background group which will be a container with a grey background and a title bar for the group on top. Set the background to resize and pin the title bar to the top. Group the background with the screen padding stack and use Auto Layouts left and right pin to make it is responsive while adjusting to accommodate new screens.

Step 2 — Flow Stacks

Horizontal Stack

Stack two or more flow stacks and set the spacing. Each time you add another flow stack the spacing between each group will be constant.

Vertical Stack

Stack two or more horizontal stacks on top of each other and again, set the spacing. This will now allow you to copy and paste horizontal stacks.

Step 3 – Responsive Background

Horizontal Padding

Positing two large padding rectangles, one above the vertical stack and one below. Group these together and turn the group into another horizontal stack.

Vertical Padding

Do the same again by grouping the horizontal padding with two more large padding rectangles one above and one below turn the group into a vertical stack.

Responsive Background

Finally group the vertical padding with the background and pin all four edges of the background. Now the background will resize when you duplicate any of the elements!

Step 4 – Brucie Bonus

Nested Symbols

Use nested symbols inside of the screen symbols to easily change the content of each screen. I use a few basic screen templates for my low fidelity flows. Also note that I group

DONE!

Remember that you can reuse the spacing at either end of a Flow Stack to create larger divisions between screens to create sub groups.

Download the Sketch file here (You will need to install the Auto Layout plugin for it to work properly)

Some Credits

Kickpush — Have been a massive inspiration, when I first saw their wireframes I was blown away by 1) how good they looked. 2) how clear and readable they are. Checkout their Process-Wireframes and website www.kickpush.com

Animaapp — This technique would not be possible without this amazing plugin Auto-Layout plugin

Pablo Stanley — Has a great way of explaining how things work, take a look at his Auto Layout tutorial here youtube-tutorial

Cheers

I dunno if anyone was able to follow that lol, but have a play-around with the source file and check out some Auto Layout tutorials.

I hope someone finds this useful. This was my first tutorial ever so please respond with any feedback or questions.

You can find more from me at http://ift.tt/2nI4JdS