What’s Up With Sketch’s Scissors Tool?
Turns out it’s hugely helpful and
simple to understand.
You may have noticed the “Scissors” tool in Sketch’s toolbar and wondered “what the heck is that?” You may have even played around with it, only to be more perplexed.
When I first experimented with the Scissors tool, I noticed that it could remove the border from one side of a shape. So I thought, “here’s a tool that can be used when I want a border on just 3 sides of a rectangle” — not an uncommon need, actually. I also observed that the Scissors tool could turn any curved segment of a shape into a straight line. But whenever I tried to use the Scissors tool on more than one segment of a shape, I got unexpected results. “What the heck, Sketch! You’re so buggy and unpredictable!” Not quite…
It turned out there was a gap in my understanding about how vector shapes work. Here’s what no one told me:
When you think of a shape, you most likely think of a circle, rectangle, or curved object that can be filled in with a color. But computers think about vector shapes slightly differently; they think of them as paths. Paths have a beginning and end, and a direction that the computer’s pencil travels down.
Let’s take a rectangle for example. The path might begin at the top left corner, move down to a point at the bottom left, then over to the bottom right, then up to the top right corner, before finishing at the same point it started at. What’s important to notice is that the path ends at the same place it begins. That’s called a “closed” path, which is exactly what we’re used to calling “a shape.”
But what if the path ends elsewhere? Perhaps that same rectangle starts at the top left corner and ends at the top right. Then it becomes an “open” path, which in layman’s terms we’re used to calling “a line.”
Computers think of shapes and lines in the exact same way — they’re just paths. Some are open; some are closed.
In Sketch, whether you insert a Shape, a Line, or a Vector, they’re all just paths under the hood. By now you may have guessed what the Scissors tool does — it simply cuts open a path between any two vector points. If you have a closed path (shape), this will open it up (into a line).
Using the Scissors tool is simple:
- Select the tool from the menu bar (Layers > Paths > Scissors) or from the “Tools” dropdown in the toolbar.
- Hover over any segment of your path. Click to remove it.
If instead of opening you’d like to close a path, enter Edit mode (by double clicking the path or selecting “Edit” in the toolbar) and click the “Close Path” button at the top right of the inspector. It’s possible to use the same button to re-open the path, but the Scissors tool offers you more flexibility.
The concept of opening paths is simple, although the results might not always be what you expect. Here are some things to consider:
What You Get with Open Paths
- Fills (aka backgrounds): Your path may have a fill applied to it, such as a solid color or gradient. If that’s the case, open paths will show up as though the beginning and end points were connected with a straight line. The fill will be applied as though it was a closed shape (A). If there are path segments overlapping the straight line from beginning to end, you’ll get a funky effect (B).
- Borders (aka strokes): Borders will only be applied from the beginning of the path to the end of it. Unlike fills, borders will not connect the end point back to the beginning point. That makes sense when you consider that open paths without fills are what most people would just call “lines”.
- The ends of an open path may have sharp corners or round corners. Sketch calls them “Ends”, while SVG calls them “line caps.” They’re a subject for another article, but I bring them up because lines / open shapes will always have them. You can access them through the little gear icon in the Borders section of the inspector.
- Remember that a path has only one beginning point and one end point — it cannot open in more than one place. So if your path is already open and you remove a segment next to the open part, the opening just gets larger. But if you remove a segment from another part of the path (somewhere in the middle), the path will split into two pieces. These two pieces are called sub-paths, and they’ll still be grouped together in Sketch. Learn more about sub-paths here.
When to Use the Tool
Remember when I described my experience about selectively removing the border from a path segment? Well, that’s not a good use of the Scissors tool. Anytime you’re using a fill, the path should be closed. If you want to control the border separately, I suggest duplicating the shape and using one layer for the border and one for the fill. If you want to hide part of a border or shape, that is best accomplished with a mask.
So when should you use the Scissors tool? There’s only one good answer. When you want to turn a closed path into an open path; to turn a shape into a line. Also, there’s this little trick…
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.
