Creating a responsive component with boolean variables / Figma
Вставка
- Опубліковано 25 лип 2023
- Learn how to use boolean variables to set up just ONE responsive header component for multiple breakpoints.
Playground file: www.figma.com/community/file/...
01:21 Setting up variables and mode
03:28 Connecting header component to variables
For more practice with variables, check out these tutorials:
• Dynamic prototyping wi...
• Light/dark mode and th...
• Gentle intro to Figma'...
• How to instantly add c...
Note: you need to have Figma pro (or above) to use multiple modes for variables. If you would like to upgrade, you can use my link: letsbuild.click/figma-pro. This is an affiliate link, which means I'll be compensated monetarily if you join 💸
🎓 Also, if you're a student, you get access to Figma pro for free!! Just verify your education status and enjoy all these cool features: figma.com/education/
#figma #figmatutorial #figmavariables
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).
This time sound quality and your voice tone were good, Masha! Keep going ❤ Thank you 🎉
thank you! :)
Great tutorial, thanks!
thank you! :)
This is awesome, thanks for sharing!
thank you :)
That was super clear and enlightening 💡 Thanks!
awesome, thank you so much 🙌
Super clear tutorial, thank you!
thank you :)
Awesome content. Quick and right to the point
thank you :)
Wow. Thanks for your content
thank you :)
Amazing 😊
thank you :)
Very helpful! Thanks :-)
thank you :)
sick!
thank you :)
you are amazing keep it up 👍
thank you so much 🤍
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!
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 😏
That is great, thank you :). Any other good use case for boolean variables in design systems that you could think of?
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...).
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?
hey! thank you :) and you can definitely combine component interactions with using variables - it all should work when prototyping
Now we know it
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!
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...).
Hi! It's a simple but great tutorial.
I'm deep diving a little into Figma variables, and I was wondering wat else I can do. I would like to have different type of width in different modes (like, fill container in mobile and hug in desktop, for buttons). Do you know if it's possible?
hi Laura, thank you!
Unfortunately we can't set auto layout properties (fill container, hug) as variables.
But, one workaround you could use is have a number variable for min-width for Phone and Desktop modes. For Phone it could be ~370px (or whichever size you need to make it look like it "fills" the container) and Desktop ~96px. Of course this isn't ideal because the values are still fixed.
Here's demo file if helpful: www.figma.com/file/WqwMhSQKfFNcL5VxLVfdwJ/button-on-phone-vs.-desktop?type=design&node-id=0%3A1&mode=design&t=BbRo4jC6GKmOk3Ez-1
@@mash312 Thank you very much!
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!!
It should! You’d just have variants for different states
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?
yes, you should be able to add a number variable for height and then bind it to the height value of the navbar
genius
thank you!
Its not changing when i move it between frames.
are your frames assigned to modes as well? I sometimes forget to do that and then it doesn’t change 🙈
This does not work if you have a component with several interactions, Jesus!
yeah, there're some limitations 💔sorry