[FIXED]
Hi everyone, I’m running into this weird issue lately, this wasn’t happening before. started happening about a day ago maybe…
I’ve got a component, that has a couple of variants based on breakpoints.
For some reason, when I switch from one variant to another, the newly applied Variant is flipped Horizontally.
trying to figure out what is going.
[FIXED]
This is the right place. This is happening because one of your main components is flipped or rotated. Go through the affected components and check rotation values. If they are all 0, then one of the components is flipped horizontally. The hotkey for this is Shift + H. Simply take out all the contents of the component and flip it, then put the contents back. Or simply rebuild the broken component.
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
Inspect panel way (I prefer this way)
transform: matrix(1, 0, 0, -1, 0, 0); in it, it means it’s flippedI’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