Arrow scales but the corners don’t distort

This tutorial shows you how to make scalable, dynamic flow arrows for your UX flow charts and explainers. It’s inspired by Jarosław Ceborski’s User Flow Diagram Template — I saw what they had created and thought it was very clever and wanted to break down how it was done.

Downloadable content: You can view my Sketch file with four line styles and eight arrow tips!

Library Version

Use this version to import into Sketch as a library

Original

Leaving this here for reference

The Problem

Making a regular path with rounded corners and an arrow gives you distorted corners and tip when you stretch it.

The Solution

Use symbols and the rounded corner feature to keep things scaling elegantly.

Figure 1

Figure 2

Figure 3

Draw your line using the Vector tool Make your points snap to the grid so they are all aligned Select the two corners and set the point curving to Straight and change the Corners slider to the roundness you want. (see figure 4) Make the line a symbol Add an arrow and allow it to pop outside the bounds of the symbol, so that the line aligns with the centre of the arrow, and the top half of the arrow is outside the bounding box of the symbol. (see figure 2, centre panel) Set the Resizing option for the arrow to Pin to Corner (see figure 5). The line can stay as the default Stretch option. You can now duplicate, stretch, flip and scale the symbol to your heart’s content!

Figure 4: Setting for the two points in Step 3 (above)

Figure 5: Pin the arrow to the corner

Extra Credit

This technique works for a single style of arrow, but you can use Sketch’s nested symbols to allow for different line types (e.g. straight, single corner, or U shapes) and different arrow heads (diamonds, circles, yes/no)

Like so!

I’ve made this into a Sketch file, so know you have a single symbol that has nested styles for four line types and eight arrow tip types!

StretchyArrowsAssets.sketch by Stewart Curry