Mastering the Bézier Curve in Sketch
Break through the confusion and start making beautifully curved vector shapes.
In digital graphics, computers draw vector shapes using a collection of points — a sort of connect-the-dots — and most programs use “Bézier curves” to create curved lines around those vector points. You may be familiar with their appearance in design and motion graphics tools, but understanding how they work will take out some of the pain and confusion when you’re trying to create a particular shape. Building off our understanding of vector shapes, this article will demystify designing with Bézier curves.
How Curves Work
Although there are different types of Bézier curves (differentiated by how the curve is controlled and the complexity with which it is drawn), “cubic-Bézier” is the most commonly used in graphics software — and the only method used in Sketch. So how does cubic Bézier work?
Bézier curves are created by handles that extend from any vector point. At the end of each handle is the handle control point. These handles seem to magnetically pull the shape toward them. If you’ve ever wondered how this magical magnetic pull works, dork out with the short video below!
If you have no interest in knowing how computers draw Bézier curves just skip to the following sections, which provide practical tips for all levels.
I highly recommend that you use Sketch 3, version 3.1 or higher.
Using Bézier Handles, in Practice
The example in the video above focuses on two points (a line), whereas most vector shapes have considerably more points. As such, there are often two Bézier handles extending from a point — one on each side. Here are some of the ways to create a curve around a vector point in Sketch:
“Mirrored” is the default and most common method of controlling a Bézier curve. This approach uses two handles that extend the same distance from the vector point, at the same angle. The handles seem to form a single line that is “tangent” to the curve. The Mirrored option is based on the fact that if both handles are at the same angle, the shape will have a completely smooth curve; in other words, there will be no visible corner/point along the shape as is the case with the Disconnected option.
“Asymmetric” is similar to Mirrored in that the handles are at the same angle, although the handles do not have to be the same distance from the vector point. This is especially useful when a curve needs to taper off more quickly on one side.
“Disconnected” allows you to change each handle independently of the other. There are two use cases for this:
- You would like the shape to have a noticable angle/corner when it hits that vector point, rather than creating a smooth curve through the point.
- You may only want one handle; control over a curve on one side of the point, and no curve on the other side. If this second option is what you’re after, click on the handle control point you’d like to remove and press the “delete” key.
Straight Points & Rounded Corners:
When the Straight option is selected, a vector point has no handles or curve through it. If two vector points with this option are adjacent to each other, the path between them will be a straight line. Sketch gives you the option to round the corner of any Straight point (aka border radius). Although Sketch makes it appear incredibly easy to round any corner with a single point and radius value, under the hood the software is actually acheiving this by calculating Bézier curves for you. Pretty neat! If you want to reveal these Bézier curves, simply flatten your shape (described here).
Get Your Handles Under Control!
One of the most confusing things about Bézier curves is where to place handles and vector points in order to acheive your intended result. Designer and lettering artist Dave Coleman of the AGSC recently wrote a great article about this, and I’ll summarize a few of his main points.
- If you strategically place vector points along a curve, you can substantially reduce the amount of points in the shape. The more simply your shapes are constructed, the easier they will be to change, and the smaller your filesizes will be. Dave recommends finding the “outermost point” along a curve, and placing your vector point there.
- With your points in position, it’s time to fiddle with the handles. By aligning the Bézier handles vertically or horizontally, curves will often be smoother and faster to fine-tune. Because you only need to move the handle along one axis, the whole process of making curves becomes easier.
- …Except, occasionally, when it doesn’t. Sometimes a curve can’t be fully reproduced unless Bézier handles are at an off-angle, or the vector point isn’t positioned at the outermost point. This is OK. Like all guidelines, follow them, understand them, and — when necessary — break them.
You may be relieved to know that there’s a quick way to snap Bézier handles to 90° angles: just hold down the “shift” key while dragging a handle control point. If, like in the graphic below, this feature isn’t behaving as expected, look to see if “rounding” is turned off. If instead you’re using “Round to full pixel edges” or “half pixel edges”, and the vector point is not at an exact pixel or half-pixel position, the handles will not snap to 90° angles.
One solution is to turn off rounding, at least as long as you’re adjusting those particular handles. Another solution is to manually assign each handle’s coordinates, as described in following section.
A Life-Saving Hidden Feature
While working on a custom logotype project, I discovered an important hidden feature in Sketch: not only do vector points have their own coordinates — so do each of a point’s Bézier handles (“handle control points”). Part of this seems obvious, because those handle coordinates are essential for the computer to draw the curve. What wasn’t obvious is that Sketch allows you to manually enter those coordinates.
This feature is easy to miss because the appearance of the handles doesn’t change when they are selected — the only thing that changes are the X and Y “position” values in the Inspector. Being able to set a handle’s coordinates solved these conundrums and gave me the peace of mind that my Bézier handles were exactly where I wanted them. Furthermore, miniscule adjustments (measuring fractions of a pixel) became easy to make. Try this out for yourself; modify a Bézier curve by dragging the handles, then fine-tune the handle positions in the Inspector.
More Tips and Shortcuts
- Double-clicking a vector point will alternate it between Straight and Mirrored modes. You may be familiar with this from other applications.
- When editing a shape, you can select the next vector point along the path by hitting “tab” on the keyboard. “Shift” + “tab” will select the previous point along the path. Whether the “next point” goes clockwise or counterclockwise around your shape depends on the shape’s direction (described in more detail here).
- When a vector point is selected hit the 1, 2, 3, and 4 number keys on the keyboard to cycle between straight, mirrored, disconnected, and asymmetric modes.
- If you hold down the “Command” (⌘) key while moving a vector point, Sketch will ignore “smart guides” that would otherwise help you align the point vertically or horizontally with other ones.
- Holding down the “Command” (⌘) key while moving a Bézier handle will allow you to position that handle freely and independently of the other handle as though the vector point is using Disconnected mode. Keep in mind that if the point had been using Mirrored or Asymmetrical modes, moving a vector handle without holding down the command key will discard the Disconnected result. Give it a try and see how it works!
One last thing. Don’t be discouraged if Bézier curves don’t seem intuitive at first. Just remember:
Like any skill, creating perfectly-curved vector shapes requires repetition & practice.
A great way to practice these skills is by tracing letterforms. Take a photo or drawing of a beautiful letter (something curved, like a “G”, “Q”, “R”, or anything from a script alphabet), bring that image into Sketch, and use the vector tool to trace the outline of the letterform. Try to position your vector points at the outermost places on the shape, use vertical and horizontal handles, and fine-tune them by manually entering coordinates.
And don’t forget to share what you make! Use #sketchbezier on Twitter and Instagram. I’ll post some too. The world needs more beautiful curves!
Be the first to know when I publish new design articles and resources.
I just released Sketch Master — online training courses for professionals learning Sketch. You’ll learn tons of tricks and practical workflows, by designing real-world UI/UX and app icon projects.
