Switching variants. new variants are all flipped horizontally

Thanks Gleb, I started rebuilding them, before seeing your response, I appreciate the help 🙂

This has helped immensely. I spent an entire day building the component only to realise that they’re getting flipped in instances. Knowing this has saved a lot of time in repairing the components.

But i didnt understand how i can solve this. I want to use one of my components point to the other side.

Don’t flip the component (container), flip its contents.

No, it’s not fucking rotated, this idiotic Figma CONSTANTLY does something idiotic! LIKE ALL THE TIME SOME ILLOGIC SHIT!

EDIT: I know! This pathetic shit does it for mobile views only! I mean you need to have the orientation of both canvases the same, otherwise this idiotic tool will fucking rotate the item!! WHAT A PIECE OF IDIOTIC SHIT.

LOL. Did you rotate the main frame? Instead of switching the orientation with a button:

I will answer my case - I didn’t “rotate” it, it was just not mobile view but horizontal when creating component and I used it for mobile and it was vertical (obviously) - and those two settings need to be equal. Theoretically makes sense but there should be some kind of alert on this one that the settings are not equal.

There are no such things in Figma as “mobile view” and “not mobile view”. There are only frames, and they have a rotation property, which can be changed by the user. They can’t automatically rotate in any way, only the user can do it.

Yeah I meant frames for mobile view (meaning rotation) - it’s a shortcut of thought.
Now I know all that but at the beginning I was totally confused as of why components I put in the design file are vertical, not horizontal…

Glad you were able to solve the issue! And yes, this definitely is quite illogical that this happens.

I had a similar issue with Tooltips arrows and text… which drove me nuts for a few hours! I solved it by removing the AutoLayout from the Variant inside the Master component

(PS I fixed the variant of course moving the arrow where I needed as well as removing the unwanted rotation degrees)

Make sure the content in the original frame of the variant is set to the appropriate constraints.

When my variant frame is set to top and bottom instead of just top, it flips vertically in my component frame at different heights. Ensuring the original frame of my component is set to top prevents this issue.

This solution also applies to using the Breakpoints plugin.

In general, we should not be flipping or mirroring our variants for them to look correct in the component, and the problem here is not that people are designing inside flipped frames, because we’re not.

Hi Gleb,

How can I get to know whether the element is flipped or rotated during plugin development? Is there any specific things/value difference in any of the property?

Create a component and flip it, and check its rotation/X/Y values. When flipping horizontally, you will notice its rotation says 180degrees. Unfortunately, there’s no clear way to tell it been flipped vertically except for its Y value being way off as it’s still being calculated from the top pixel (which is now located at the bottom) for some weird reason.

Hello Svarrie,

I have a particular element that is horizontally flipped which is giving rotation as 180 deg. I am not able to identify that, whether it is horizontally flipped or is it normally rotated by 180 deg using the properties provided by figma. It is just that the X co-ordinate got changed during horizontal flipping which can not be used in differentiating rotation against flipping. Let me know your inputs on this.

Everyone, please read, I don’t think messages here have been clear enough

When a frame/component is flipped IT DOESN’T SHOW ON THE DESIGN TAB/PANEL, it doesn’t show as degrees rotated, it’s not that.

There’s two ways to identify this easily

Design panel way

• Go to the design panel
• Select all related frames, and do SHIFT-V
• When the height is lesser, it means the top side is up (usually we want this), components should (99% of the time) display correctly this way.

Inspect panel way (I prefer this way)

• Go to the inspect pane
• Go to the bottom, in code
• Select CSS and <>
• if it has transform: matrix(1, 0, 0, -1, 0, 0); in it, it means it’s flipped

I’m not sure how does this forum works very well, but feel free to copy, paste and update (with a better explanation) this comment

Another way, easier, but slower and only works with autolayouts

• Go to the frame you want to test
• Insert a dummy component, size it 64x64, and fill it #c3c
• if the component is displayed in the inverse order it’s show in the layers tab, then the a top frame is flipped

Thank you for this, it worked setting it to “Top” only.

Mine doesn’t show transform in CSS, whatever I do with it. Flip or no flip.

I am unable to detect whether something is flipped.

Any other methods?