Q & A: Flattening Shapes

Q: Why doesn’t Sketch allow you to flatten a shape with a hole inside?

A: First off, it’s a bit silly that Sketch shows such a big warning about this, because it really isn’t an issue. It’s actually a characteristic of how vector shapes generally work, not only in Sketch. Let’s break down how it works.

Vector shapes and lines are often called “paths” because the computer starts drawing them at one point, then draws a line to the next point, and then to the next point, etc. As a result, there is always a Start Point, an End Point, and a direction to the path.

If you peer inside an SVG (which abides by the same rules as Sketch), you’ll actually see something like this for defining a <path> element:

1. Mark the virtual pencil here: 100, 50 (x & y coordinates)
2. then, draw a Line to here: 150, 100
3. then, draw a Line to here: 100, 100
4. end by connecting back to the start point (Z), and lift the virtual pencil.

Here’s what that data actually looks like: “M100,50 L150,100 Z”

The point is that vector shapes are extremely basic under the hood. They sort of immitate our hands when we draw a shape. Take a pencil in your hand and try drawing two circles that don’t intersect, without lifting the pencil. It’s impossible. So as for your question:

In order to fully flatten multiple paths into a single path, they must intersect at some point.

Otherwise they have to exist as separate paths, each with its own start point, end point, and direction.

For non-intersecting paths, the closest you can get to flattening is combining those paths into a single layer/element that contains multiple sub-paths. And despite Sketch’s big warning when you flatten those shapes, there’s no need to panic. Sub-paths are fine. It’s just how vector shapes work.

Thanks for asking!

Peter

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.

Sketch Master