Swap variant instances between modes in Figma using boolean variables. 🤔 Doing it right, or missing something?

@figma Here’s another way of solving this. Maybe ✌️

@figma Whoa, didn’t realize you could use string variables like that. Thanks!

@figma From my understanding, it is not possible at the moment… The variable can be linked to a value within an instance, but not directly inside a component… Here is a test within a frame :

@figma Set the mode on the section when the instance is inside the section and not the shape

@figma Ah yeah, I think I set the mode before I created the boolean variable. Seems like it should work even if one came before the other.

@figma this is the true power

@figma I love that. If you make a Shape variable numeric with light mode value 0 and dark mode value 100, and then apply this variable to the corner radius, will the shape trigger as you want?

@figma Yeah that would probably work in this scenario, but I'm trying specifically to get the instance swap to work for an actual design I'm working on.

@figma Oh I see! Try it here, it's triggering without manually setting auto mode:

@figma plus it follows your design pattern

@figma @mds you need to use in the boolean of the variant true and false this will result in the boolean variable to work correctly. I won't work with on/off or yes/no.

@figma This is cool.

@figma Round corner variables I think is what you need there. I may be wrong, just starting to play around with it.

@figma I’m trying to specifically nail down instance swap for a bigger cause in an actual project.

@figma Instead of using a Boolean variable for Shape, try using Number variable for Radius. Set radius to 0 for light mode and 200 for dark mode. Then, where you change border radius, the little variable hexagon will popup when you hover, assign that to Radius variable. 🙌🏼

@figma Here’s a quick demo, hope it helps