Problem with variants: ALIGNMENT

Hi people, I want to learn how can I do when create a variant appear in the correct alignment.
I have created 2 variants:
imagen

The second have autolayout, alignment right. If you see the image, all is perfect. But my result is:

Error figma

I tried 10 times, creating again and again but I don’t know how can I know where can I check the position where my variant appear. Sometimes I have other “jumpings” for some pixels and I don’t know how can I solved because in my variants is in the correct position.

Hope someone can help me! Thanks!! :slight_smile:

Try setting both variants to fixed width.

2 Likes

Whenever I had this problem I solved it by wrapping it inside a frame (the instance, not the component) and set the constraints to the opposite of the way it needs to expand.
Your variant expands to the left so it should constrain to the right.

2 Likes

Thanks @ntfromchicago and @Klesus, I will try both options. If I solve the problem I will write here again, I can’t now check because I don’t have my laptop :sweat_smile:

I’m here again, sorry for the delay.
I tried both solutions but I couldn’t. Always I receive the same effect or if I do your option @ntfromchicago my first variant works but in prototype my hotspot hint is too big (rectangle) and only I want to be the icon.

Here I tried the solution of @Klesus but I continue with the same effect. I don’t know what i’m doing wrong. Can you check please?

I could “solve” doing like open overlay and not variants, creating my menu in other frame and clicking show my menu but I want to learn more about variants and I want to create in this way. I hope you can help me.

DESIGN: https://www.figma.com/file/McXUqm6vHjb64QDKZ8JrTJ/Untitled?node-id=1%3A26

PROTOTYPE: https://www.figma.com/proto/McXUqm6vHjb64QDKZ8JrTJ/Untitled?node-id=1%3A26&scaling=min-zoom&page-id=0%3A1

Thanks!

I see I didn’t explain very well.
You’re not supposed to do anything to the component set or it’s variants. All is happening inside the prototype.
When you place an instance of the component in your prototype, you then wrap it inside an autolayout. So in your file you have Frame 2 as your prototype screen. Inside that you have your component that misbehaves. Wrap that inside an autolayout frame and set the constraint to right.

Like so:

3 Likes

Thank you very much @Klesus for your time and explain to me.
All my changes always was in my variants for that i have never got the result.
I need to apply the constraint in the instance of my variant!.

THANK YOU!