Creating a responsive component with boolean variables / Figma

[@mash312]

The actual variables part starts at 1:21 if you'd like to skip over the demo! Also, some thoughts: on one hand I love variables because you no longer have to manage duplicate subcomponents separately. It's quite a sleek experience once you get the hang of it. On the other hand, I think it's still not very obvious to somebody using the component that it could appear differently in different modes. (Even more so, it's hard to tell right away that there are different modes available in the first place).

[@jerry_pham]

super easy to understand, tysm!

[@sayekatchakraborty4621]

This time sound quality and your voice tone were good, Masha! Keep going ❤ Thank you 🎉

[@mash312]

thank you! :)

[@alejandromerino56]

That was super clear and enlightening 💡 Thanks!

[@mash312]

awesome, thank you so much 🙌

[@amlproductdesign]

Super clear tutorial, thank you!

[@mash312]

thank you :)

[@diogomendonca1798]

Awesome content. Quick and right to the point

[@mash312]

thank you :)

[@paulnever6501]

Great tutorial, thanks!

[@mash312]

thank you! :)

[@tylersharpe7338]

This is awesome, thanks for sharing!

[@mash312]

thank you :)

[@luongkhai6435]

Wow. Thanks for your content

[@mash312]

thank you :)

[@JürgenBuchholz]

Very helpful! Thanks :-)

[@mash312]

thank you :)

[@grafikaya]

Hey masha, its really flexible using variables but have you tried on prototype. For example in mobile menu how do you solve drop down with one component variant (sure we can give an boolean for expanded version but things getting messy)

[@mash312]

hi! yeah i haven’t applied this to prototyping, totally agree it could get more messy

[@hanzzyolo8240]

you are amazing keep it up 👍

[@mash312]

thank you so much 🤍

[@siskoDE]

sick!

[@mash312]

thank you :)

[@PAdam-vq4wq]

I want to change the navbar height based on breakpoints. Because I want to show different logo variant on different screens (e.g: on mobile: logo image only, tablet & desktop: logo + brand name). Can I achieve that with this variables?

[@mash312]

yes, you should be able to add a number variable for height and then bind it to the height value of the navbar

[@lauraalinda5779]

Its not changing when i move it between frames.

[@mash312]

are your frames assigned to modes as well? I sometimes forget to do that and then it doesn’t change 🙈

[@maryanne3793]

If you want to have a sidebar open up on the mobile’s menu, will this method work if you have different states for the breadcrumb? Thanks!!

[@mash312]

It should! You’d just have variants for different states

[@rohitjadhav8744]

Amazing 😊

[@mash312]

thank you :)

[@TheTiiatia]

Hello Masha, thank you for such a good and well described video! I was also wondering if you have tried to create tables? As in desktop table is a large wide card, but the smaller we go the more compact the card gets & some stuff goes under each other... Thanks!

[@mash312]

thank you so much :) For spacing/compactness, you can definitely utilize the variable modes for it! (And then you can reuse that not just for the card but other components too). For stuff that changes orientation, I'd probably still stick to creating variants for that (because currently there's no way change direction based on modes). Or, as a workaround, you could use boolean variables to hide some content in desktop view and display it mobile view (and vice versa). I'd probably not do that, because then you have duplicate content to maintain :/ Lastly, you could utilize auto layout wrapping, depending on the structure of your card. And no, I haven't tried making a component like that yet with variables but that sounds like a fun challenge 😏

[@robertovenditti1515]

That is great, thank you :). Any other good use case for boolean variables in design systems that you could think of?

[@mash312]

thank you! :) ohh probably so many, but the only ones I can think of at the moment is anything that could be hidden in desktop vs. mobile vs. tablet mode (headers, footers, card content, etc...).

[@realmisr]

Very neat, thank you! Does this pose issues when creating micro interactions? Such as hover states, overlays, etc. It makes sense when you have variants that you can just prototype link with...but with variables and booleans...there doesn't seen to be a way to do this, right?

[@mash312]

hey! thank you :) and you can definitely combine component interactions with using variables - it all should work when prototyping

[@andersonaf]

Hi there, do you know if with conditional would be possible to change the variables while you resize a canvas? I'm trying to find it. Thank you for the content!

[@mash312]

hi Anderson, thank you so much! I tried to play with it and unfortunately, I don't think it's possible at the moment (variables are tied to modes which can only be changed by changing the layer type...).

[@alexlynpi]

Now we know it

[@amrmohsen7915]

genius

[@mash312]

thank you!

[@humbertoventura1344]

This does not work if you have a component with several interactions, Jesus!

[@mash312]

yeah, there're some limitations 💔sorry