Figma RESPONSIVE DESIGN with VARIABLES & AUTO LAYOUT | Config 2023 update

Figma RESPONSIVE DESIGN with VARIABLES & AUTO LAYOUT | Config 2023 update | Step-by-Step

Рет қаралды 4,628

Жыл бұрын

🚨Follow along with this Figma file - www.figma.com/community/file/1256566641658899155
☆ 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* - kzfaq.info/get/bejne/iZ6YncSLs93Zc5c.html
2. *Variable Modes | Config Updates* - kzfaq.info/get/bejne/nKhdZ8yc19qXnZ8.html
3. *Prototype with Variables | Config Update* - kzfaq.info/get/bejne/iKuCmcaC1Z3eg58.html
👋🏼 _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

Пікірлер: 44

@user-1836-jdk 8 ай бұрын

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

@TDSunshine 8 ай бұрын

Aww thanks! Im happy to hear it was helpful! ☀️🤗🙏

@MubarakMarafa Жыл бұрын

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

@TDSunshine Жыл бұрын

Thank you! 🙏🏼☀️🥹

@marcuscustodio9338 Жыл бұрын

Awesome vídeo!

@TDSunshine Жыл бұрын

Thanks! ☀️

@antanasgeguzinskas2841 Жыл бұрын

Awesome like always :)

@TDSunshine Жыл бұрын

☀️🙏🏼

@tridang8407 Жыл бұрын

I always look forward to your videos, it's really helpful. Thank you so much❤

@TDSunshine Жыл бұрын

Glad you like them! 🙏🏼☀️

@akacemkhadidja3557 Жыл бұрын

I've wached it and wating for the next figma video ❤❤❤❤...thanks for sharing

@TDSunshine Жыл бұрын

🙏🏼☀️

@hajaryazdani5566 5 ай бұрын

I really love that you mention the keywords in your videos. it's really helpful Thank you.

@TDSunshine 5 ай бұрын

You're welcome! 🙏🏻☀️

@hondimon69 Жыл бұрын

Banger video 🎉

@TDSunshine Жыл бұрын

🙏🏼☀️

@brabahar Жыл бұрын

Finally the new autolayout video drop. I was mainly waiting this video 🎉

@TDSunshine Жыл бұрын

😎☀️

@michellekarolyne 11 ай бұрын

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

@TDSunshine 11 ай бұрын

🙏🏼☀️ I assume you mean “find” and not “see” 🤪 happy to have you as a subscriber either way ! 💛

@MrVenkatganta Жыл бұрын

you are awesome. i really appreciate👍👍👍👍👍👏👏👏👏👏👏👏👏👏

@TDSunshine Жыл бұрын

🙏🏼☀️

@prajithpu7574 11 ай бұрын

Superb 🔥

@TDSunshine 11 ай бұрын

🙏🏼☀️

@Akram-UXUI 8 ай бұрын

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😇

@TDSunshine 8 ай бұрын

aww thanks! I appreciate it! ☀️🙏🏻💛

@KarimMaassen Жыл бұрын

I've been experimenting with exactly this, the past few days. The new Figma update really is a game changer.

@TDSunshine Жыл бұрын

It’s amazing right?? ☀️

@justinoneill2837 Жыл бұрын

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!

@TDSunshine Жыл бұрын

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 🙈 ☀️

@justinoneill2837 Жыл бұрын

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

@justinoneill2837 Жыл бұрын

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

@TDSunshine Жыл бұрын

@@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 kzfaq.info/get/bejne/fa2npLqUmZeYooE.html but there are loads more out there on youtube and Figma community ☀💛

@kriswayne7938 Жыл бұрын

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?

@TDSunshine Жыл бұрын

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* - kzfaq.info/get/bejne/nKhdZ8yc19qXnZ8.html

@kriswayne7938 Жыл бұрын

@@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 🙌

@nargessscreativejourney6041 Жыл бұрын

I don't know for some reason this way doesn't work on my file.

@TDSunshine Жыл бұрын

Which bit? 🙃

@user-yo1be6nb7j Жыл бұрын

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

@TDSunshine Жыл бұрын

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