Creating a responsive component with boolean variables / Figma

Learn how to use boolean variables to set up just ONE responsive header component for multiple breakpoints.

01:21 Setting up variables and mode
03:28 Connecting header component to variables

For more practice with variables, check out these tutorials:

#figma #figmatutorial #figmavariables

[mash]

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).

[alejandromerino]

That was super clear and enlightening 💡 Thanks!

[sayekatchakraborty]

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

[diogomendonca]

Awesome content. Quick and right to the point

[skerimkaya]

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)

[PAdam-vqwq]

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?

[maryanne]

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!!

[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!

[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?

[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!

[robertovenditti]

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

[lauraalinda]

Its not changing when i move it between frames.

[humbertoventura]

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