Toggle stroke between variable modes

[dusky niche]

I’m setting up some buttons using variables for two different brands, the primary button of one has a stroke and the other does not. Is there an easy way to use the same component and be able to swap modes if one has a stroke and the other doesn’t?

[lament mural]

As far as I can tell, you can't trigger a mode change - only a variable change. So far I've been adjusting things like button color and text with Set variable . I also don't think you can control stroke visibility yet 😦 I think you'll still need to prototype this with component variants.

Honestly I would love an interaction option that can change another component's variant. For example, clicking on a color swatch component could change the button component to a disabled variant. Like 🤯 how is this not a thing, but variables are???

[unique acorn]

Could you expand on this one? Do you mean like clicking on something would update another component's variant to another one? I think that is possible

[lament mural]

Yeah essentially a variant swap triggered by something unrelated to the variants' component

Honestly, that would reduce the need for these variable wormholes in prototyping

[unique acorn]

couldn't you do that by having a variable thats the same as the possible props names, and on click just updating that variable?

[lament mural]

Yes but in the case of a large number of variants you have to create a variable for each, unless you want to manually type in the variant's prop name. And then you have to update every on click instance's interaction to update the variable. I just tried doing this with a product that has 18 color swatches and I feel like I could have just built the whole thing with code faster

[unique acorn]

yeah code will definitely most probably be always faster, especially now when variables is very new and is very limited

interactive variables have a long way to go but i see the potential in it. we cant expect figma to be able to roll out whats equivalent to coding on its first try or to tackle every scenario that comes up, and interactive variables wont be the most optimal solution for everything as of right now -- thats for sure. but hopefully sometime soon in the future it could be!

[lament mural]

Then why even bother prototyping 😭 I'll just ship to dev and iron out the wrinkles in QA

[unique acorn]

for me personally, i dont prototype everything, and i dont think everything needs to be prototyped. I think its more just up to if you need that specifically for demo or for user testing. but even then, i might would just prototype one specific case and not all cases. A lot of times i do just give it to dev if its understandable enough with a few examples

So i think if prototyping or not, thats more just based on needs but its definitely not a must.

[lament mural]

Also the last thing I want to do in Figma is code! I want to design... maybe advanced prototyping should be put in a different app

I definitely don't prototype most things, but sometimes I want high fidelity prototypes to test UX. It takes so much work tho 😦

[unique acorn]

i think you can still prototype as you used to be -- its not taken away!

so you dont have to use variables if you dont want to, its just an option

[lament mural]

Why would Figma prioritize building a way to create advanced prototypes if most of us don't even do that? Like I appreciate variables for design system management for sure. I just think the prototype implementation is still too difficult to use and honestly constrictive to be meaningful. I wish Figma had put more time into things that improve workflow - I have so many ideas of what would've been more helpful for me