Design tool canvas handles

Design tools often pack a lot of functionality around the bounding box of selected objects. Some of this functionality is represented by handles or icons, but a lot of it is hidden.

This can make learning the behaviour and interacting with objects pretty tricky. The only way to know if you can perform an action is to hover near the edge of a selected shape and note cursor changes. It’s like inspecting a giant cave with a flashlight, which isn’t conducive to working quickly or confidently.

As well as being hidden, interaction hit zones can also be quite small or oddly shaped, making them hard to target. Illustrator and Affinity Designer have settings to control handle sizes. I changed my Illustrator handles to be the second largest size a couple of years ago to make them easier to see in videos. After using them for a while, I ended up keeping the setting. It’s just quicker and less accident prone working with larger handles.

Interaction hit zones #

Here’s the object interaction hit zones for the standard transform mode for a rectangle, across various design tools. It’s also worth noting that additional features may be available via modifier keys — Sketch can rotate objects by holding the command key and dragging the corners or sides of the bounding box. That’s less discoverable, but the zones are indicated by the corner widgets, and large enough to easily grab.

I’m a fan of the horizontal and vertical resizing being available for the entire side, similar to how Figma and Sketch offer the feature. I’m not sure why you wouldn’t do that, if the space isn’t being used for anything else.

I don’t really like the L and C-shaped rotation hit zones, but it is nice for rotation to be available without holding a modifier key. Long and narrow zones are hard to target, especially when they’re not denoted with anything.

Photoshop gets its own hit zone image, because the area for rotation extends a whopping 200pt in every direction from the shape, so it didn’t fit neatly into the previous image.

I don’t understand why Photoshop has horizontal and vertical resizing just beyond the corner resizing area. That’s possibly just a mistake?

These interaction hit zones were figured out by screen recording and slowly moving the mouse around, noting cursor changes. It was a slow process, and also probably not accurate. I assumed symmetry for the handles, and didn’t test every single handle — typically just one side and one corner. I was careful and tried my best, but it’s unlikely they’re pixel perfect. The latest version of each app was used.

Illustrator’s corner resize handles are especially problematic. There’s just so many tiny, oddly shaped areas packed into a small space. A short cursor move may cross many zones.

Here’s a screen recording, showing the amount of times the cursor changes, due to being in a different zone. Targeting some of these areas is almost impossible.

Small objects #

When objects are small, the interaction zones get bunched up and overlap. Different apps have different ways of dealing with this. Sketch enlarges the bounding box so that all the handles are accessible. I believe Flinto was the first design tool to do this, back in 2018. Figma hides the handles, letting you move, but not resize or rotate the object. Affinity Designer, Illustrator, and Photoshop just let the handles stack on top of each other.

Corner radius handles are dropped when they don’t fit, in all the apps that show them.

Mouse offset within handles #

Given canvas handles occupy an area, mouse clicks within a handle are unlikely to be precisely in the center. If the mouse position offset isn’t accounted for, the first frame of the drag will jump as the handle gets centered under the cursor. This looks a little jarring, and it means interacting with canvas handles isn’t as accurate. It’s a subtle, but important detail.

Photoshop and Affinity Designer do account for the position where the mouse is clicked within canvas resize handles. Sketch, Figma, and Illustrator do not. The screen recording below shows what happens when grabbing and dragging the edge of a resize handle in Illustrator. Note that the mouse only moves upwards during the drag, which should expand the rectangle, but it initially shrinks when the handle centers on the mouse cursor.

Published 14 December 2023.