Change variant on resizing a component

Hey Martin, this is a great question! Did I understand this correctly you want to resize your component and trigger the variant with it? Let me ask internally and come back to you once I get more information from the team.

Yes. So I have a component and variant prioperty calles Size with variants S, M, L. I want to auto switch between these variants when using the component and resizing it.

For ex: S is triggered when height is < 16px, M when between 17 and 32 and etc.

Thank you for clarifying!
I’d suggest working with conditionals. Conditional is a rule that defines if an action should trigger. They are written with if/else logic.

As an example in your case: If height is < 16px than (you’ll receive) Variant S. If not, or else M.

Please let me know if you’ve already tried applying conditionals or if you need help to implement it. Happy to help further!

I was trying to solve the problem. But isn’t what you are saying only while viewing prototype?

were you able to figure it out ?

Hey @gtr!
Yes you’re right this action works when viewing prototypes, you can use multiple actions and conditionals to handle multiple or different outcomes within the same interaction.

Is this not what you’re trying to achieve?

Hello @Gayani_S Thanks for your response.
I was trying to figure out a way to make that happen on the canvas itself.
To describe briefly : I have a button which is responsive to the text it contains. The width to the button is the only variable. There is a diagonal strike through across the whole button. I want the diagonal strike to be responsive based on the size of the button. Was trying to define multiple variants of different diagonal strike-throughs and expect the instance of the button to shift from one variant to wider variant as I change the text.

Hey @gtr, apologies for the delayed response!

I do think this isn’t possible at this moment. However, I am double checking this with the team. Will get back to you once I get a response!

If you can show me a screenshot of what you are making I’m fairly sure this is possible without any variants or prototyping. Is it just a single diagonal line going from one corner to the other?

I’ve asked the team and the team also thinks that this will be possible by binding both the button variant and the strikethrough variant to a shared variable, the swap only happens with the following actions:

• Change-to action in a prototype mockup in presentation mode
• Manually changing the bound variable value in the “local variables” menu

But great to hear @mattaningram might have a workaround for you.

Yes, it’s a single diagonal across the button. Below is an image. left coloumn is without strike, right is with strike. I have had to define the right column individually but was wondering if we could the diagonal one work like how button sizes would increase in an auto-laid out setup.

Place the line inside the box, give it absolute position and set constraints to “left and right”. It should now stick to the corners regardless of box’s size.

You don’t even need to create separate variant for crossed out box, just assign boolean property to the line’s visibility.

Thanks for your response. But the expectation is for the diagonal to change its length and orientation based on the container size. Having the lines in abs pos keeps them in the position but it will not reorient to look like a diagonal. Hence, had made a separate set of variants. Attaching an image for reference.

That’s because you are using two separate lines for that. My solution uses one. Text has white background to mask the diagonal underneath it.

Edit:
When using my solution don’t use “line” for the diagonal. Line becomes thinner or thicker when is stretched in Figma. Instead use rectangle with 1px width(or any other depending on your needs).

Thanks for the response. This helps. This was our version in the wireframes but it seemed slightly crude. It was a small detail in the UI which made us iterate with two lines. Wanted the ends to be rounded where the lines meet the letter. I know it makes no difference when viewing on a mobile screen, but designer complex took over. 🙃
But really appreciate your help. The advice on left and right constraint was vital.

Also, I chose to use pen tool as it is centrally aligned with the path.

Thanks and regards,

It may be crude, but it’s usually implemented that way using either vector bg, gradient or something similar. When designing I try to stay as close to the way it will be implemented as it’s possible.

Sure, you could implement it with separate diagonals, but similar to the design, it would be rather inflexible and would require more work from developers to make it work.

What @Bart_K showed is also how I would approach it both in Figma and in code. Making the tip rounded would be very difficult for a developer as well and probably not worth the extra effort.

Hi, is it possible to change variant inside a frame (header on a webpage) to change when I’m rezising the whole screen(frame)? I have applied dimensions to both the header(s) and the frame, and I would like the header to change variant from desktop to mobile (not just scale) when I change between token sets.

Thank you in advance 🙂

Hey @Jeanette_Hafnor, thank you for reaching out!

I am not quite sure here, I’m just checking this internally with the team. I’ll get back to you once I receive a reply.

Thank you for your patience!

Hey @Jeanette_Hafnor, the team has confirmed that this is a feature request. Feel free to create a new topic on our “Share an Idea” page here: Share an idea - Figma Community Forum.

This helps us roadmap future updates. Community members who would like to see your suggestion implemented can leave their feedback and vote on it.

Thank you,
Gayani

You certainly can!

If your component has 3 size variants, say Desktop, Tablet and Mobile and you have a page / frame that you want to adjust across the device widths without having to individually change each component within… You can create a page width variable (screen-size) with different modes as above (Large, Medium, Small) to correspond to your defined breakpoints.

If your component variable uses the same values, i.e. Desktop, Tablet, Mobile you can map the components state to use the same variable as the frame (screen-size). This way, when you change the frame size it automatically changes all the components in the frame to use the same variant ie Desktop, Tablet or Mobile.

Hope this helps.

How did you monitor the component width? Can you show more detail?

You don’t need to monitor component widths, as the component variant is mapped to the screen-width variable.

So, on my design frame I assign min and max width variables plus assign the screen-size var to the frame. This allows me to adjust the frames width within the breakpoints. ie. if I select desktop the frame can be resized from 991px to 4000px and the screen-size var == large.

Now, if the components used within the frame also reference the screen-size var to determine which variant they display then you are controlling all the components with one frame option.

Hope that helps.

I see how this would work if you manual change the “Sizing” mode of a frame but what about for a responsive prototype that gets resized?

I see what you’re getting at. I’ll take a little time to look into it more but as far as I know this is the easiest way to implement something close to it.

I don’t think there’s a feedback mechanism to get the frame width and push it to a variable you could use to control the component variant states, but I think that would be the ideal solution.