Figma RESPONSIVE DESIGN with VARIABLES & AUTO LAYOUT | Config 2023 update | Step-by-Step
Вставка
- Опубліковано 27 лип 2024
- 🚨Follow along with this Figma file - www.figma.com/community/file/...
☆ Try Figma's Professional Plan - bit.ly/TDProFigma
☆ Try Figma For Free - psxid.figma.com/xnd9l
💛 Thanks for watching, Tair 💛
🍿 WHAT TO WATCH NEXT :
1. Auto Layout | Config Update - • Figma AUTO LAYOUT UPDA...
2. Variable Modes | Config Updates - • Figma VARIABLE MODES |...
3. Prototype with Variables | Config Update - • Figma PROTOTYPE with V...
👋🏼 IF YOU ARE NEW HERE :
Hey, it's Tair! 😃
Thanks for tuning in and watching my video! If you enjoyed it and learned something new, don't forget to hit that subscribe button and the like button as well 👍🏼. I'd love to hear your ideas and suggestions for my next video, so feel free to drop a comment below. Your support means a lot and it helps me keep the channel going and growing!
👾 MY GEAR :
Blue Yeti Microphone amzn.to/3qACorF
Tripod ring light amzn.to/43G7flv
Neon sign amzn.to/3NcwxAs
Fairy lights amzn.to/443l518
🌼 CHAPTERS :
00:00 Intro
00:15 The Current Design
00:35 Responsive Gallery
02:27 Using Min Width
04:03 Responsive Footer
06:28 Responsive Navigation Bar
07:36 Incorporating Variables
10:43 Using Boolean Variables
13:31 What’s Next
🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you.
#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma #figmaupdate #config #config2023 #figma2023 #designtokens #tokens #variables #responsivedesign - Навчання та стиль
Awesome vídeo!
Thanks! ☀️
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 always look forward to your videos, it's really helpful. Thank you so much❤
Glad you like them! 🙏🏼☀️
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! ☀️🤗🙏
Awesome like always :)
☀️🙏🏼
I've wached it and wating for the next figma video ❤❤❤❤...thanks for sharing
🙏🏼☀️
I really love that you mention the keywords in your videos. it's really helpful Thank you.
You're welcome! 🙏🏻☀️
Banger video 🎉
🙏🏼☀️
you are awesome. i really appreciate👍👍👍👍👍👏👏👏👏👏👏👏👏👏
🙏🏼☀️
Finally the new autolayout video drop. I was mainly waiting this video 🎉
😎☀️
Superb 🔥
🙏🏼☀️
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! ☀️🙏🏻💛
I've been experimenting with exactly this, the past few days. The new Figma update really is a game changer.
It’s amazing right?? ☀️
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 ua-cam.com/video/GGwqWc414rM/v-deo.html but there are loads more out there on youtube and Figma community ☀💛
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 ! 💛
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* - ua-cam.com/video/fB-4ikrt3mk/v-deo.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 🙌
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
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. ☀️🙏🏻
Great Tutorial, its really easy to follow and replicate with Figma #config23
Thanks! 🤗☀️