The Mighty Pen Tool

Given my past in designing creative tools, I often get asked what my opinion is of the latest digital tool to emerge on the market. My answer hasn’t changed in more than a decade: I’m disappointed.

I’m disappointed that in over three decades, the tools we use as designers of digital products are still lacking critical behaviors that would make our lives better and more productive. This includes the products I’ve worked on or have helped along the way. We’ve come a long way in three decades, but we should be much further along than we currently are.

From my point of view, designers are often only as good as their tools when it comes to executing a vision. That is to say, while the best tool out there for general design work is a pencil, some paper, and a brain trained for the job, at some point we have to produce a rendered version of the work. At the very least, we need to make production assets that will get used in the final build.

When our tools fail us, we have less of a chance of doing the job we all want to do as designers: make great products that people love.

If there is an appetite for this sort of article, this will be the first of a few I’ll be writing on the state of our creative tools.

[Note: I had intended to supply screenshots and movies as examples to go along with this article, but demands on my time have prevented me from doing so. My apologies. If anyone out there would like to make illustrations to go along with this article, I’d be forever in your debt.]

Functionality every pen tool needs

This article will be about the pen tool, and all the various behaviors it needs to be complete. If you feel that I’ve missed anything, by all means add a comment and I’ll update this article as needed.

Full disclosure: I led the design of Photoshop, Illustrator, and InDesign in the ‘90s. I also helped the Figma team get off the ground by being its first employee and an early contributor to its pen tool and vector networks. I have provided a lot of the feedback and notes you see in this article privately to the teams at both Adobe and Figma.

Further, while I considered adding Adobe Experience Design to this article, at the time I wrote this, XD lacked too many behaviors for the pen tool to make it worth including with this list. It seems to have since been upgraded somewhat, but generally, one can infer that the pen tool in XD should be on par with Illustrator at minimum given it’s made by the same company.

Note: To translate keyboard shortcuts for Windows users, ⌘ (Command) equals the control key, while ⌥ (Option) equals Alt.

Precise creation of anchor points and handles

The core aspect of drawing with the pen tool is the creation of anchor points and handles that control curves. Obvious, yes, but most of the products out there still lack the precision needed while drawing with the pen tool, even after three decades of digital creative tools.

The first behavior needed is the ability to land a point exactly where you want it via snapping when clicking on the artboard. This “snap to” location is either an intersection of the grid, another anchor point, or a line segment already on the canvas. One crucial aspect of this behavior is that when snapping to the grid, the pen tool must land anchor points in exact pixel increments. There are also times when snapping can get in the way, which is why a quick shortcut to toggle snapping on and off is needed.

Photoshop · While Photoshop will snap to the pixel grid when drawing with the pen tool, it still lacks snapping to guides, other points, or other objects. It’s one of the main reasons why drawing icons from scratch in Photoshop requires a lot of tedious hand tuning, switching back and forth from the pen and direct select tool.

Illustrator · Does almost everything needed here. While Illustrator handles snapping to guides, points, objects, and the pixel grid, it doesn’t provide an anchor point preview in the way Figma does to land the initial point. That little cursor hint goes a long way when spending an entire working session drawing vector artwork. To add to this, Illustrator’s anchor and cursor notations are far too small on large displays, and need to be significantly enlarged. Of note however is that Illustrator is still the only product to properly select just the last anchor point when closing a shape, rather than selecting the entire shape.

Sketch · The pen tool in Sketch supports snapping to the pixel grid, yet lacks snapping to other points or objects while drawing, making it as tedious as Photoshop for drawing icons from scratch. Bonus points in that Sketch allows for snapping in 0.5 pixel increments.

Figma · Like Sketch, The pen tool in Figma supports snapping to the pixel grid, yet lacks snapping to other points or objects while drawing. It’s not quite as tedious as Photoshop or Sketch in this regard, largely because it gets a few other snapping features correct and uses vector networks for complex drawing. Bonus points in that Figma also allows for snapping in 0.5 pixel increments.

Smart guides and construction lines

The second behavior needed for precision drawing is being able to line up an anchor point with another point or line segment while drawing. This is usually done with smart guides or construction lines. The types of dynamic guides appearing on screen can be tricky; too many and they interfere, while too few makes landing a point or handle in the correct spot impossible.

Photoshop · Missing this behavior entirely.

Illustrator · Does this in a very advanced fashion. Illustrator’s smart guides are thorough and powerful, allowing one to draw with complete precision. The default settings for these guides may be overwhelming for some, or not enough for others, so adjusting them in the preferences dialog is often a must. Of note however is an annoying bug where smart guides become disabled if you enable snap to grid.

Sketch · Missing this behavior entirely.

Figma · Does this almost as well as Illustrator. The behavior is limited to just the vector artwork you are currently drawing, whereas with Illustrator construction lines can appear over any intersection of the last few elements you’ve tracked by hovering over them with the cursor while you draw.

Numeric entry and keyboard manipulation

The final piece needed for precision drawing is the ability to adjust anchor points and handles using numeric input or via the arrow keys on the keyboard while drawing. If you land an anchor point at a 90° vertical from the previous one you’ve drawn, you should then be able to enter a coordinate that moves it to where you want horizontally, or nudge it in precise pixel increments to achieve the same result visually.

Photoshop · This would require Photoshop to allow editing anchor points numerically in the first place, which it still doesn’t.

Illustrator · While Illustrator does allow you to numerically adjust anchor points while drawing, it still doesn’t allow you to select handles to do the same. Worse, if you use the arrow keys to nudge an anchor point while drawing, it breaks the pen tool from continuing on from the last point you placed on the artboard.

Sketch · Amazingly, Sketch allows for this exact behavior. Why it lacks the other behaviors for snapping and precision while drawing with the pen tool remains a mystery to me.

Figma · Also allows for this exact behavior. To Figma’s credit, it was doing this before Sketch did, for what that’s worth.

Moving anchor points and handles while drawing

This is a feature that was first implemented in Illustrator 6.5 if I recall correctly, and soon thereafter was added to Photoshop 4.0. In fact, its a feature that not only applies to the pen tool, but any object creation tool like the rectangle or ellipse tool. While drawing, often times you need to fine tune or adjust the location of the point you have just created while still holding the mouse button down. Simply hold down the spacebar while drawing and soft switch to moving the point just created. Once in place, release the spacebar and continue drawing.

The genesis of this feature came from Neal Tucker, an engineer on the Illustrator team. He first showed me this behavior on the star tool he was developing. I quickly asked if he could make it work on as many other tools as possible. I also convinced one of the Photoshop engineers to add it to as many tools as well during the development of 4.0. To this day, it’s one of the few tweaks that I find almost impossible to live without in creative tools. That it is missing in Adobe’s Experience Design product is unconscionable.

Photoshop · Works as expected, but you might need to disable some of the new macOS Siri shortcuts that override this behavior.

Illustrator · Works as expected, but you might need to disable some of the new macOS Siri shortcuts that override this behavior.

Sketch · Doesn’t work. Invoking the spacebar while drawing moves the artboard instead, which to my mind is not very useful in that situation.

Figma · Doesn’t work.

Convert, clean up, and manipulate anchor points while drawing

A long standing pen tool feature—probably the most fundemental set of interactions in this list—are the ways in which you convert and manipulate anchor points from corner to curve without having to hard switch out of the pen tool. This includes using a key to toggle an anchor point from corner to smooth, resetting curves by dragging from the anchor point with a key held down, and breaking a corner while drawing using a key. Traditionally, this keyboard shortcut has been the ⌥ key.

These core sets of interactions are present as far back as Illustrator 1.0, which shipped in 1987, as demonstrated by John Warnock himself in this video:

https://www.youtube.com/watch?v=sAbjajnLZY0

You should also be able to add or delete any anchor point along the path you’re drawing, or adjust handles on anchor points then continue to draw without ever having to hard switch out of the pen tool. Hard switching basically results in a loss of context, requiring you to reset the last point to continue drawing. This results in a loss of flow, and can lead to having to reset the curves you were attempting to draw in the first place.

Photoshop · Works as expected, although Photoshop requires you to turn on the “rubber band” option with the pen tool so you can see that you’ll continue drawing without breaking flow. Photoshop still has a long standing bug with adding anchor points along straight line segments, where the new anchor point is actually set to a smooth anchor with handles instead of just a simple corner point.

Illustrator · The standard bearer here and works as expected.

Sketch · Mostly works. However, Sketch lacks using the ⌥ key to change anchor point types. You have to select an anchor point then manually set it in the inspector palette. As long as the path stays active, you can continue drawing. There’s a notable bug that when you set certain anchor points to mirror handles, those handles won’t adjust until you attempt to move one of them.

Figma · Mostly works, with the notable oddity that the keyboard shortcut to convert smooth and corner anchors uses the ⌘ key instead of the ⌥ key. This decision means it’s impossible to move a point while drawing using the pen tool, which is inconvenient and can break flow. Also, while converting between smooth and corner, the Figma pen tool exhibits a bug where holding down the ⇧ key doesn’t properly constrain while moving a handle.

Quick bending of segments and curves

This type of manipulation while drawing has been present in a simple form with Illustrator since it’s first version. Effectively, after drawing a curve, you grab the segment with the select tool and drag around to refit the curve through where you move the cursor. This ability is traditionally made accessible via soft switching to the move tool by holding down the ⌘ key while using the pen tool.

Photoshop · Works, but lacks cursor feedback that you’re about to bend a curve.

Illustrator · Works as expected.

Sketch · Impossible to do. Grabbing any curve adds a new anchor point, which prevents this behavior from working.

Figma · Works as expected.

Additional features used with the pen tool

Outside of the core pen tool behaviors, there is an extra set of functionality that must exist in order to complete the drawing toolkit.

Duplication of shapes, segments, and curves over repeated steps

Drawing vector objects entails duplicating drawn shapes, segments, or curves, and then using those duplicates to create patterns or objects. While this can de done with the pen tool, it can also be done with transformation tools to achieve specific effects. Critical to this operation is the ability to set an origin point for the duplication step.

Photoshop · Lacks any convenient way to dupliate vector shapes or create multiple stepped duplicates.

Illustrator · Has almost everything you want for duplication and repeated steps. There are explicit transformation tools which allow for duplication using the ⌥ key, or numerical precision via specific transform dialogs accessed by ⌥ clicking an object. Once a duplicate is made, hit ⌘D to repeat as needed. It’s also possible to use the transform palette for fast duplication with a little known shortcut of holding down ⌥ while pressing return. However, even though this shortcut was added back in 1997, this method of duplication still doesn’t work when invoking the repeat command.

Sketch · Lacks a general way to duplicate vector shapes while transforming them or creating repeated duplicates. It does have a nice rotate copies command, buried in the menus and using a cumbersome dialog to initiate it. Once activated, it’s actually a nice way to create certain effects even with a limited scope.

Figma · Lacks any convenient way to dupliate vector shapes while transforming them or create multiple stepped duplicates.

Pathfinder and boolean operations

Generally speaking, one of the best ways to get the kind of shape needed is to use the pen tool to draw many different shapes, then use a pathfinder or boolean operation on those shapes. Once done, switching back to the pen tool allows one to continue drawing without losing any rythym or flow.

Photoshop · Has basic live boolean operations once you have multiple vector paths on the same shape layer. The only pathfinder operation Photoshop can do on vectors is merge.

Illustrator · Has every boolean type of operation you’d ever want, including the ability to make live boolean effects as compound paths. To do this requires knowing you have to ⌥ click the shape mode buttons in the pathfinder palette. Because this isn’t the default behavior for pathfinder (after all these years) has lead many young designers to believe Illustrator lacks live boolean functionality when in fact Illustrator has more than you’d ever need.

Sketch · Does basic live boolean operations by default, but lacks other more powerful pathfinder operations like divide or trim.

Figma · Does basic live boolean operations by default, but lacks other more powerful pathfinder operations like divide or trim. Does allow for flattening of boolean shapes which can get similar results, but not as elegant.

Scissors

A bit outside the scope of the pen tool itself, but leaving out how the scissors tool should work would leave a hole in the toolset. Scissors should be able to easily snip any anchor point or segment where needed, allowing you to rip apart objects. The scissors tool also needs to be able to draw straight lines to cut across multiple segments or objects, while taking advantage of the same guides and construction lines available using the pen tool. Finally, the scissors tool needs to allow for movement of the cut line while drawing with a soft switch via a key like the spacebar.

Photoshop · Lacks any real scissors functionality. The workaround requires adding new points, then deleting midpoints, which is cumbersome at best. The lack of slicing or cutting vector shapes is further exacerbated by the fact that Photoshop still insists on adding smooth anchor points when you add a point along a straight line segment.

Illustrator · Has two tools—the scissors and knife—where it should only have one tool accessed via a single shortcut key that does both functions. I honestly don’t remember where the knife tool originated, but I do recall hating it, while also hating its default behavior of drawing freeform to slice across an object. To cut straight across an object with the knife requires holding down the ⌥ key. Awkward to say the least. The knife also lacks the ability to move the cut line while drawing, and doesn’t interact with smart guides like it should.

Sketch · Lacks a true scissors tool. Sketch does have a scissors function, but all it does is delete a curve segment as you click on an object. Getting scissors behavior requires the same workarounds as Photoshop.

Figma · Lacks any true scissors functionality. Same workarounds as Photoshop.

A proposed set of chorded shortcuts for drawing vector shapes

Drawing with the pen tool is a lot like playing a guitar. It takes practice, but there’s a definite logic to how the instrument works. Once you master it, you can play amazing music.

Drawing with the pen tool on a computer with mouse or stylus should allow the designer to get into a similar flow. There’s a rhythm and cadence to how one draws, and the tools we use should do as much as possible to not interrupt it. In the parlance of interface design, this means working with a combination of shortcut chords that work in concert with soft switching between a core set of tools. This means that as much of the functionality as I’ve listed above should be available without having to hard switch to a different tool. This is no easy task, but companies creating our drawing tools need to have a little more transparency into how they choose their tool shortcuts. I’m startled and amazed how much hard switching is required even to this day to perform many of the tasks I’ve listed here in this article.

To that end, I’m posting a thought experiment on a set of shortcuts that could be used with the move, pen, and bend tools that should provide much of what I’ve written here. I’ve given this feedback in various forms to different folks I’ve known at Adobe. Given my background with the Figma team, I’ve also provided this feedback to them as well, although it appears with their release of 1.0, much of it is still not present.

If you feel these set of shortcuts could work well with the pen tool, please feel free to add your voice to this article. If you feel this proposal is off base, should be tweaked, or otherwise adjusted, please feel free to let me know via the comments.

Move Tool (“V”)

Click: Select vectors, anchors, handles, or fills

⌥ · Click: No operation; could be used to copy to clipboard
⇧ · Click: Add to selection
⇧⌥ · Click: No specific operation

⌘ · Click: Bend Tool, toggle anchor or segment between smooth & straight
⌘⌥ · Click: Bend Tool, remove handle
⌘⇧ · Click, Bend Tool, mirror handles
⌘⇧⌥ · Click: Bucket Tool, fill

Drag: Move vectors, anchors, handles, or fills

⌥ · Drag: Duplicate while moving selection
⇧ · Drag: Drag selection along 45° axes
⇧⌥ · Drag: Duplicate while dragging selection along 45° axes

⌘ · Drag: Bend Tool, Bend segment or break handle
⌘⌥ · Drag: Bend Tool, duplicate while bending segment
⌘⇧ · Drag: Bend Tool, bend segment or break handle along 45° axes
⌘⇧⌥ · Drag: Bucket Tool, fill while dragging

Pen Tool (“P”)

Click: Create anchor point

⌥ · Click: Toggle auto smoothing on segments; deletes an existing anchor
⇧ · Click: Create anchors along 45° axes from previous anchor
⇧⌥ · Click: Create smooth anchors along a 45°

⌘ · Click: Move Tool, select
⌘⌥ · Click: Bend Tool, toggle anchor or segment from smooth to straight
⌘⇧ · Click: Move Tool, add to selection
⌘⇧⌥ · Click: Bucket Tool, fill

Drag: Create anchor points and draw handles from them

⌥ · Drag: Break handle while drawing
⇧ · Drag: Draw handle while constraining along 45° axes
⇧⌥ · Drag: Break handle while constraining to 45° axes
Spacebar · Drag: Move current anchor point while drawing

⌘ · Drag: Move Tool, move selection

⌘⌥ · Drag: Bend Tool, bend segment or break handle
⌘⇧ · Drag: Move Tool, drag selection along 45° axes
⌘⇧⌥ · Drag: Bucket Tool, fill while dragging

Bend Tool (“E”)

Note: The functionality listed below is a combination of the convert direction tool and the bend tool.

Click: Toggle an anchor or segment between smooth and straight

⌥ · Click: Remove handle
⇧ · Click: Mirror handles
⇧⌥ · Click: Mirror handles asymmetrically

⌘ · Click: Move Tool, select
⌘⌥ · Click: Move Tool, no specific operation; could be copy to clipboard
⌘⇧ · Click: Move Tool, add to selection
⌘⇧⌥ · Click: Bucket Tool, fill

Drag: Bend segment or redraw handles

⌥ · Drag: Duplicate while bending segment or breaking handle
⇧ · Drag: Bend segment or break handle along 45° axes
⇧⌥ · Drag: Duplicate while bending segment along 45° axes

⌘ · Drag: Move Tool, move selection
⌘⌥ · Drag: Move Tool, duplicate while moving selection
⌘⇧ · Drag: Move Tool, drag selection along 45° axes
⌘⇧⌥ · Drag: Bucket Tool, fill while dragging

Some parting thoughts

If you’ve read this far, you have my thanks for letting me communicate this at this level of detail. While it may seem dense, it’s required.

I view creative tools like musical instruments: they need to be an extension of the person wielding them, and will often take years of practice to master. That something takes time to learn isn’t a problem in my view. Our tools shouldn’t aim to make things easier to learn per se, but allow us total control over the thing we’re making first, then provide rhythm and flow once mastered. The real problem as I see it is when a tool is incomplete.

While I’m enthusiastic to see new products like Sketch and Figma rise up, I’m disappointed that creative tools in the digital world lack the same kind of precision and flow that a guitar provides a musician. Watching these tools evolve over the years, I’m dumbstruck how certain details get missed, how critical behaviors are left out of the next upgrade, or how incomplete our tools feel after all of this time.

My hope is that maybe through articles like this one, our tool makers will take notice and provide us with the products we deserve going forward.

Terminology

A few terms used in this article might need definition or clarification on how I use them.

Soft Switch: Temporarily change the state or interaction model while a key or button is held down. Once the key or button is released, the original state reverts back. Examples include holding down the ⌘ key to use the move tool or holding down the spacebar to pan the canvas inside a window while another tool is active.

Hard Switch: Switch to new a state by pressing a button or issuing a command. Examples include clicking or tapping on the pen tool in a toolbar to start drawing, or clicking an app icon in the macOS dock to switch applications.

Chords: Holding modifier keys or input buttons in a pattern, often used for soft switching, but also used for executing commands like cut, copy, or paste.

State: The current context of the device or computer, as displayed on your screen. Unlike a web page, or a single window of content, a state includes the entire display and context to execute input from a keyboard, mouse, stylus, or touch targets. Examples include painting on a layer, where the selected layer in a palette, the selected brush options in a palette, and selected colors in a different palette, all work together when using the paintbrush tool.

Software versions used for this article: Photoshop CC 2015.5.1 · Illustrator CC 2015.3.1 · Sketch 40.3 · Figma (Desktop Client) 1.0.8

Many thanks to Josh Puckett, Josh Williams, Cătălin Bridinel, and John Marstall for proofing this article.