Ever notice in Figma that if you rotate a few shapes and then rotate them back, they'll end up in a different place?

It's not just Figma! Excalidraw supports this kind of rotation and has the same issue.

...and so does my own project, tldraw, which is where I ran into the issue.

Side note: most other design tools don't support this kind of rotation. Shapes either rotate around their own centers or inherit rotation from a group. I wish they would though!

Anyway, here's what's happening. When you start rotating a selection, you need to pick a point to rotate around. We're all using the average center of the selected shapes—and we keep using this point until you stop rotating.

However, the rotated shapes probably have a different average center; which means that your second rotation (ie to rotate things back) is pivoting around a different point. And that's what causes the change of position.

Honestly, I was extremely glad to find this in Figma and other apps because I was worried it was a bug in my own rotation implementation.

It is even a bug though? It's weird that rotating a group and then rotating it back doesn't put them back in the same place. Let's fix it!

And here's the fix: once a user starts a rotation, we hold onto the the center point; if the user rotates again, we re-use that same point; and we only give it up once the user makes a new selection.

To their credit, canva seems to be solving the problem is the same way. The original rotation point is preserved until a user makes a new selection.

Ok, that's it! Hope you enjoyed this extra-obscure edition of design tool micro-UX. If you catch any rotation-related bugs in tldraw, let me know!

Look familiar? This blog post was adapted from my Twitter thread.