[Download the corresponding Sketch project file here.]
When wireframing your next big idea in Sketch, you may find yourself creating arrows on your canvas to show how screens might flow. It’s all fun and games until you need to scale or stretch one of your arrows and you find yourself with a distorted mess. In the video tutorial above, you’ll learn a simple method for creating connection arrows that are infinitely scalable and reusable—with zero distortion.
Is it witchcraft? Nope—it’s the power of Sketch.
For those who prefer reading to watching, get step-by-step instructions below.
1. Turn the arrow into a Symbol
First, download the Sketch project file so you can follow along.
You’ll find that the first page of the project file has 2 arrows on it. The pink arrow on the left is the finished version from the video above. The grey arrow on the right is the one that needs a little love. Feel free to take a moment to stretch these and compare—just be sure to undo before we get started.
That was fun, right? Let’s get to work on that gray arrow. We’ll start by getting the layers for the gray arrow selected, then choosing Create Symbol from the toolbar. Give your Symbol a name and click OK.
You may be wondering, “Why turn it into a Symbol?” Aside from a Symbol being a great way to reuse our arrow, it also makes the Group/Symbol Resizing features available to us—along with showing the layers on their own artboard to help visualize positioning. More on that in a moment.
Related: 5 ways to keep your Sketch kitchen clean
2. Using layer resizing
Now we need to make some changes within the symbol, so we’ll double-click the gray arrow to edit it.
Now that we can see our layers within the bounds of an artboard, something becomes more clear. We need the arrowhead to stay in the top right and the square base to stay in the bottom left. Easy peasy. All we need to do here is select the 2, then head over to the Inspector and change the resizing from Stretch to Pin to Corner.
Now that those are going to stay in the corners, and we’ve got a line connecting them, we’re off to the races. Right?
Not so fast. Try stretching out the arrow symbol now, and you’ll notice it also redistributes the proportions of the space around the object.To fix this, double-click the instance to go back to your symbol. Then, change the resizing of the line to Resize Object. Resize Object tells Sketch to add and remove pixels from the scale of the object without touching the position.
Now when we go back to the instance of our Symbol, it’s fixed. It will no longer get off course with the arrow head and the base of the arrow. Boom!
3. Insert Symbol, stretch, smile
Because we’ve turned it into a Symbol, we can drop one of these smooth arrow guides in any of your Sketch wireframing projects by choosing Insert » Symbol.
Drop it in, scale it, and there you go. It scales up smoothly and evenly with no distortion whatsoever. Wireframe with ease, my friend.
More Sketch tutorials
Video Producer at InVision, former UI/UX designer of international in-flight entertainment, and avid automotive enthusiast.
