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.