This video was so far the most helpful video I've watched on this topic. You troubleshot all the problems I have been facing, and I loved the fact that you didn't take the happy path to the final design. Thank you so much ❤ saving this in my library right away
When I see your wonderful and simple presentation, I realize that you are one of the best content providers I watch for the Figma platform 👏Simplicity, brevity and broader understanding😇
this was great! Can you imagine a way to create "container queries" at the component level? I'm also trying to figure out the best way to handle layout changes. css grid allows you to do this but Figma uses flexbox so not really sure the best approach yet. Keep up the great content!
Thanks! Hmmm tricky one! I guess you could fake it a little bit with conditionals interactions if certain elements where set by variables. I.e if the background colour of the container and the width were both controlled by variables then you could set an interaction that background changes if the width=X but then you would also need to set up a way to change the width in the prototype 🙃 not exactly the best solution 🙈 ☀️
@@TDSunshine Hmmm.... I wonder if the use of variable "Modes" could help too. i haven't even got into the prototyping tab yet 😅 (brand new to Figma). But I am 2 decades in on frontend dev/ ui so trying to set it up the same way I develop components. I started using "Atomic Design" as the basis for how I create everything and now that CSS Container Queries are a thing, we can truly have self-contained reusable components and I'm really excited about it! So now the trick is figuring out how to achieve this in Figma. Would love to see your take on it in a future video!
@@TDSunshine i recently had a project that needed everything from biz cards/ flyers/ yard signs to web UI components/ video assets... I started up on the biz card in Figma and created a simple bullet point "services" list.. that got me thinking..how would services look different on the other mediums? Maybe vertical row layout with images, titles and summaries on a printed flyer... Maybe a swipe carousel on mobile... 🤔 And then how to best achieve this in Figma at the component level so it naturally adapts.... So many questions! 😅
@@justinoneill2837 So many cool ideas! Modes can be used to control different "breakpoints"! and using components and nesting them can go hand in hand with "Atomic Design" so be sure to check out components and variants in Figma! I have a video about it here czcams.com/video/GGwqWc414rM/video.html but there are loads more out there on youtube and Figma community ☀💛
Suppose u make a nav component set with 3 variants namely, Desktop, Tab and Mobile. The variable modes are named the same. How do i assign the variables in this case?
Hey! So its not the variable modes that need to be named the same it's the value of a variable inside of that mode. You can check out this video where I go through this again a bit slower 🤗 (at 4:25 minutes) - *Variable Modes | Config Updates* - czcams.com/video/fB-4ikrt3mk/video.html
@@TDSunshine ya i checked that 1 again. I meant to ask that only. I did the mistake of using modes on the nested element as well as on the parent element. Changed the nested element to default as u mentioned and it worked Thanks 🙌
@@TDSunshine the boolean on the link and nav. also it doesn't change the width even though it is on auto or even when I manually select mobile . maybe it's a bug don't have a clue yet
@@user-yo1be6nb7j Make sure you have all the variables set up properly (in their modes) and that they are connected to the right elements (there are some nested autolayouts so can be tricky to make sure you are selecting the right one) ☀ might also be worth duplicating the community file again and starting all over just to make sure it's not a bug
Seriously! Your tutorials are mind blowingly awesome! You are a fantastic teacher! You manage to make them fun simply with JUST your voice! 10/10! 😊
Thank you! 🙏🏼☀️🥹
I really love that you mention the keywords in your videos. it's really helpful Thank you.
You're welcome! 🙏🏻☀️
This video was so far the most helpful video I've watched on this topic. You troubleshot all the problems I have been facing, and I loved the fact that you didn't take the happy path to the final design. Thank you so much ❤ saving this in my library right away
Aww thanks! Im happy to hear it was helpful! ☀️🤗🙏
When I see your wonderful and simple presentation, I realize that you are one of the best content providers I watch for the Figma platform
👏Simplicity, brevity and broader understanding😇
aww thanks! I appreciate it! ☀️🙏🏻💛
Finally the new autolayout video drop. I was mainly waiting this video 🎉
😎☀️
you are awesome. i really appreciate👍👍👍👍👍👏👏👏👏👏👏👏👏👏
🙏🏼☀️
I've wached it and wating for the next figma video ❤❤❤❤...thanks for sharing
🙏🏼☀️
Starting to watch your videos now. And they're amazing, thank you!! It is so difficult to see a woman doing tutorials! You gained a subscriber
🙏🏼☀️ I assume you mean “find” and not “see” 🤪 happy to have you as a subscriber either way ! 💛
I always look forward to your videos, it's really helpful. Thank you so much❤
Glad you like them! 🙏🏼☀️
I've been experimenting with exactly this, the past few days. The new Figma update really is a game changer.
It’s amazing right?? ☀️
Banger video 🎉
🙏🏼☀️
Awesome like always :)
☀️🙏🏼
Awesome vídeo!
Thanks! ☀️
this was great! Can you imagine a way to create "container queries" at the component level? I'm also trying to figure out the best way to handle layout changes. css grid allows you to do this but Figma uses flexbox so not really sure the best approach yet. Keep up the great content!
Thanks! Hmmm tricky one! I guess you could fake it a little bit with conditionals interactions if certain elements where set by variables. I.e if the background colour of the container and the width were both controlled by variables then you could set an interaction that background changes if the width=X but then you would also need to set up a way to change the width in the prototype 🙃 not exactly the best solution 🙈 ☀️
@@TDSunshine Hmmm.... I wonder if the use of variable "Modes" could help too. i haven't even got into the prototyping tab yet 😅 (brand new to Figma). But I am 2 decades in on frontend dev/ ui so trying to set it up the same way I develop components. I started using "Atomic Design" as the basis for how I create everything and now that CSS Container Queries are a thing, we can truly have self-contained reusable components and I'm really excited about it! So now the trick is figuring out how to achieve this in Figma.
Would love to see your take on it in a future video!
@@TDSunshine i recently had a project that needed everything from biz cards/ flyers/ yard signs to web UI components/ video assets...
I started up on the biz card in Figma and created a simple bullet point "services" list.. that got me thinking..how would services look different on the other mediums? Maybe vertical row layout with images, titles and summaries on a printed flyer... Maybe a swipe carousel on mobile... 🤔
And then how to best achieve this in Figma at the component level so it naturally adapts.... So many questions! 😅
@@justinoneill2837 So many cool ideas! Modes can be used to control different "breakpoints"! and using components and nesting them can go hand in hand with "Atomic Design" so be sure to check out components and variants in Figma! I have a video about it here czcams.com/video/GGwqWc414rM/video.html but there are loads more out there on youtube and Figma community ☀💛
Superb 🔥
🙏🏼☀️
Suppose u make a nav component set with 3 variants namely, Desktop, Tab and Mobile. The variable modes are named the same.
How do i assign the variables in this case?
Hey! So its not the variable modes that need to be named the same it's the value of a variable inside of that mode. You can check out this video where I go through this again a bit slower 🤗 (at 4:25 minutes) - *Variable Modes | Config Updates* - czcams.com/video/fB-4ikrt3mk/video.html
@@TDSunshine ya i checked that 1 again. I meant to ask that only. I did the mistake of using modes on the nested element as well as on the parent element. Changed the nested element to default as u mentioned and it worked
Thanks 🙌
How can we do this on free plan, is this even possible?
Variable modes are not available on the Free plan but you can make a new variable and switch variables manually. ☀️🙏🏻
I don't know for some reason this way doesn't work on my file.
Which bit? 🙃
@@TDSunshine the boolean on the link and nav. also it doesn't change the width even though it is on auto or even when I manually select mobile . maybe it's a bug don't have a clue yet
@@user-yo1be6nb7j Make sure you have all the variables set up properly (in their modes) and that they are connected to the right elements (there are some nested autolayouts so can be tricky to make sure you are selecting the right one) ☀ might also be worth duplicating the community file again and starting all over just to make sure it's not a bug
Great Tutorial, its really easy to follow and replicate with Figma #config23
Thanks! 🤗☀️