Suggestion: Make the fact that the element has been flipped visible in the Design tab (and perhaps provide a button to un-flip it).

Background: My org has a component that gets exported as an SVG so that we can manipulate it with JS. Figma generally does a great job of this, but I recently encountered a particularly confusing edge case caused by the opaque effects of using the “Flip” button.

The component in question consists of a number of circles. The designer took advantage of some symmetry in the design by using copy+paste+“Flip Horizontal” to make half the circles. This change is represented in the Design tab only as a change to the position and a rotation of 180 degrees. The Design tab does not explicitly show you that the element has been flipped. The Inspect tab likewise shows a rotation attribute, but has no explicit indication that it has been flipped.

However, under the hood, Figma still knows that it has been flipped and alters the exported SVG element accordingly. The first half of the elements that were created have their positions specified using cx and cy attributes. The half that were created from a horizontal flip have their position specified using a transform=matrix... attribute which encodes the coordinates and do not set cx/cy. This behavior in itself makes perfect sense, but it was awkward to work with in JS, so I wanted to modify the component in Figma so that all the generated elements would be specified using cx/cy instead of transform.

This proved to be much harder than expected. I did not make the original asset, so I didn’t know that the elements had been flipped and could not tell from the Design tab alone why the transform was being used. I could see that the nodes in question had a rotation of 180, so I set the rotation to 0. This made them look like all the other nodes in the Design tab with the sole exception of their positions, but they were still using a transform instead of cx/cy on export. Ultimately, I just deleted and re-made the elements in question, which fixed the problem. In the process of writing up this post, I learned that you can alternatively use “Flip Horizontal” on the element a second time to get it un-flipped.

Example: In this design, Frame 1’s SVG export looks like:

<circle cx="234" cy="299" r="50" fill="#D9D9D9"/>

<circle r="50" transform="matrix(1 0 0 -1 234 199)" fill="#D9D9D9"/>

and Frame 2’s SVG export looks like:

<circle cx="234" cy="299" r="50" fill="#D9D9D9"/>

<circle cx="234" cy="199" r="50" fill="#D9D9D9"/>

When comparing the Design tab on the elements in question, it’s unclear why the element attributes differ under Frame 1 but not under Frame 2. In larger and more complicated designs, it can be very hard to recognize that the reason is because “Flip” has been used in Frame 1.