TD Sunshine
TD Sunshine
  • 84
  • 379 856
Figma RESPONSIVE DESIGN using Variables, Layout grids and Auto Layout | Figma 2024
🚨Follow along with this Figma file -
www.figma.com/community/file/1397154454323520866/figma-responsive-design-using-variables-layout-grids-and-auto-layout-figma-2024
☆ 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. *Figma components* - czcams.com/video/JDHHRN5kNU8/video.html
2. *Figma Slides* - czcams.com/video/uvc0l4uZ07U/video.html
3. *Variable mode interaction* - czcams.com/video/KJ9rqT3WHR0/video.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:20 Breakpoint variables
02:10 Layout grid variables
04:03 Layout grid overview
05:50 Responsive title
07:20 Font variables
08:31 Responsive cards
09:07 Min and Max widths
12:13 Auto Layout variables
14:50 Responsive form
🤗 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 #config2024 #figma2024 #designtokens #tokens #variables #responsivedesign
zhlédnutí: 3 614

Video

Figma AI Full Overview | Config 2024 limited beta release | Figma updates 2024
zhlédnutí 6KPřed měsícem
🚨Follow along → www.figma.com/community/file/1389929734850980904/figma-ai-full-overview-config-2024 ☆ 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. *Variables 101* - czcams.com/video/TGinpYnwu2A/video.html 2. *Figma Slides* - czcams.com/video/uvc0l4uZ07U/video.html 3. *Figma components...
Figma Autolayout update CONFIG 2024 | Figma updates Auto Layout | Config 2024
zhlédnutí 3,8KPřed měsícem
☆ 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. *Variables 101* - czcams.com/video/TGinpYnwu2A/video.html 2. *Figma Slides* - czcams.com/video/uvc0l4uZ07U/video.html 3. *Figma components* - czcams.com/video/JDHHRN5kNU8/video.html 👋🏼 _IF YOU ARE NEW HERE_ : Hey, it's Tair! 😃 Thanks for ...
FIGMA SLIDES ! Config 2024 Figma update | New Figma feature Figma slides
zhlédnutí 1,7KPřed měsícem
☆ Try Figma's *Professional* Plan - bit.ly/TDProFigma ☆ Try Figma For *Free* - psxid.figma.com/xnd9l ☆ Get the arrows - www.etsy.com/uk/listing/1455310940/doodle-arrows-300-hand-drawn-arrow 💛 Thanks for watching, Tair 💛 🍿 _WHAT TO WATCH NEXT_ : 1. *Variables 101* - czcams.com/video/TGinpYnwu2A/video.html 2. *Figma connect variable to variant* - czcams.com/video/5EN2Stgg52g/video.html 3. *Figma ...
Procreate top tips (2024) | Tips and Tricks for Procreate on iPad
zhlédnutí 528Před měsícem
💛 Thanks for watching, Tair 💛 🍿_WHAT TO WATCH NEXT_ : 1. *Figma beginner crash course 2024* - czcams.com/video/OtOXEKKScg4/video.html 2. *Colour System* - czcams.com/video/qPL3ubdlkRM/video.html 3. *Variables 101* - czcams.com/video/TGinpYnwu2A/video.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 f...
Figma on Apple Vision Pro | Apple Vision Pro Design Tools Overview 2024 | Figma in VR
zhlédnutí 2,5KPřed měsícem
💛 Thanks for watching, Tair 💛 🍿_WHAT TO WATCH NEXT_ : 1. *20 Tips for designing faster in Figma* - czcams.com/video/pt0yvghcKhw/video.html 2. *Figma Auto layout 2024* - czcams.com/video/IPLbPOYFTHw/video.html 3. *Figma Components* - czcams.com/video/GGwqWc414rM/video.html 👋🏼 _IF YOU ARE NEW HERE_ : Hey, it's Tair! 😃 Thanks for tuning in and watching my video! If you enjoyed it and learned somet...
Procreate 101 (2024) | Procreate beginner tutorial
zhlédnutí 473Před měsícem
🎨 Get my rainbow palette here - drive.google.com/file/d/1oSPV70LcoMLmW80lp9Ao7PHnfOqOGSG4/view?usp=drive_link 💛 Thanks for watching, Tair 💛 🍿_WHAT TO WATCH NEXT_ : 1. *Figma beginner crash course 2024* - czcams.com/video/OtOXEKKScg4/video.html 2. *Colour System* - czcams.com/video/qPL3ubdlkRM/video.html 3. *Variables 101* - czcams.com/video/TGinpYnwu2A/video.html 👋🏼 _IF YOU ARE NEW HERE_ : Hey,...
Swap libraries in Figma 2024 | Swap styles, components & variables in Figma 2024
zhlédnutí 1,5KPřed 2 měsíci
☆ 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. *Variables 101* - czcams.com/video/TGinpYnwu2A/video.html 2. *Variables best practice* - czcams.com/video/WMDJY86RhLo/video.html 3. *Figma Components* - czcams.com/video/GGwqWc414rM/video.html 👋🏼 _IF YOU ARE NEW HERE_ : Hey, it's Tair! 😃 ...
Set variable mode interaction | Figma update May 2024 | Figma Variables
zhlédnutí 4,2KPřed 2 měsíci
🚨Follow along → www.figma.com/community/file/1370722468293685377/set-variable-mode-interaction-figma-update-may-2024-figma-variables ☆ 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. *Variables 101* - czcams.com/video/TGinpYnwu2A/video.html 2. *Prototype with Variables | Config Update* -...
Figjam 101 (2024) | Beginner tutorial to Figjam | Figjam AI tool
zhlédnutí 1,3KPřed 3 měsíci
☆ Try Figjam for *FREE* - psxid.figma.com/6adxqiq4edv6-us1nsz ☆ Try Figma For *FREE* - psxid.figma.com/xnd9l 💛 Thanks for watching, Tair 💛 🍿 _WHAT TO WATCH NEXT_ : 1. *Figma beginner crash course 2024* - czcams.com/video/OtOXEKKScg4/video.html 2. *Figma components* - czcams.com/video/JDHHRN5kNU8/video.html 3. *Figma Project Set Up* - czcams.com/video/zIk0lTlSnvM/video.html 👋🏼 _IF YOU ARE NEW HE...
Variables for Typography and Gradients | Figma Variables update April 2024
zhlédnutí 8KPřed 3 měsíci
Variables for Typography and Gradients | Figma Variables update April 2024
Design a card with me using Auto Layout | Auto layout practice | Figma Auto Layout
zhlédnutí 2,2KPřed 4 měsíci
Design a card with me using Auto Layout | Auto layout practice | Figma Auto Layout
Figma's new MULTI EDIT tool | 2024 Figma update | multi-edit deep dive
zhlédnutí 1,9KPřed 4 měsíci
Figma's new MULTI EDIT tool | 2024 Figma update | multi-edit deep dive
How to use the Figma pen tool | Master the pen tool in 8 Minutes (Beginner Tutorial)
zhlédnutí 941Před 5 měsíci
How to use the Figma pen tool | Master the pen tool in 8 Minutes (Beginner Tutorial)
Figma Components 101 | Learn about Variants and Components Properties | Figma tutorial
zhlédnutí 14KPřed 5 měsíci
Figma Components 101 | Learn about Variants and Components Properties | Figma tutorial
Connect Figma Variable to Variant | Connect a component to a variable | Prototype with Variables
zhlédnutí 29KPřed 6 měsíci
Connect Figma Variable to Variant | Connect a component to a variable | Prototype with Variables
Figma beginner crash course 2024 | UI/UX Course | Design with me in Figma & Prototype
zhlédnutí 8KPřed 6 měsíci
Figma beginner crash course 2024 | UI/UX Course | Design with me in Figma & Prototype
Figma variables - Personalised journey | Variable onboarding flow | Variables for personalization
zhlédnutí 1,9KPřed 7 měsíci
Figma variables - Personalised journey | Variable onboarding flow | Variables for personalization
Level up your presentations with Figma | Figma tips for presentations | Prototype a presentation
zhlédnutí 2,6KPřed 8 měsíci
Level up your presentations with Figma | Figma tips for presentations | Prototype a presentation
UI Design Principals | Top 10 must know | Beginners UI Design
zhlédnutí 1,1KPřed 8 měsíci
UI Design Principals | Top 10 must know | Beginners UI Design
Designer Passive Income - Make a planner in Figma | Make a digital planner | Figma passive income
zhlédnutí 1,8KPřed 8 měsíci
Designer Passive Income - Make a planner in Figma | Make a digital planner | Figma passive income
Learn Figma Auto Layout (Including Config updates) - Everything you need to know! | Figma Autolayout
zhlédnutí 11KPřed 9 měsíci
Learn Figma Auto Layout (Including Config updates) - Everything you need to know! | Figma Autolayout
Figma Variables Dark And Light Modes | How to use variables in Figma for Colour Modes | Figma 2023
zhlédnutí 1,4KPřed 9 měsíci
Figma Variables Dark And Light Modes | How to use variables in Figma for Colour Modes | Figma 2023
Figma Shortcuts 2024 | Must know keyboard shortcuts | My top 23 keyboard shortcuts
zhlédnutí 1,7KPřed 9 měsíci
Figma Shortcuts 2024 | Must know keyboard shortcuts | My top 23 keyboard shortcuts
Figma Variables - Prototype a form | dynamic form using VARIABLES in Figma 2023
zhlédnutí 3,5KPřed 9 měsíci
Figma Variables - Prototype a form | dynamic form using VARIABLES in Figma 2023
Figma Project Set Up for UX/UI Design Projects | Mobile UX Figma | How to set up a project in Figma
zhlédnutí 5KPřed 10 měsíci
Figma Project Set Up for UX/UI Design Projects | Mobile UX Figma | How to set up a project in Figma
Avatar Component - Figma Variables, Variants & Component Properties | Design System Part 9
zhlédnutí 6KPřed 10 měsíci
Avatar Component - Figma Variables, Variants & Component Properties | Design System Part 9
Figma Components - Checkbox & Radio buttons (Variables, Variants, Component Properties ) | DS Part 8
zhlédnutí 7KPřed 10 měsíci
Figma Components - Checkbox & Radio buttons (Variables, Variants, Component Properties ) | DS Part 8
Figma Component - Input Field (Variables, Variants & Component Properties ) | Design System Part 7
zhlédnutí 15KPřed 10 měsíci
Figma Component - Input Field (Variables, Variants & Component Properties ) | Design System Part 7
Figma Prototyping - Button Component Interactions | Part 6 | Figma Tutorial Step-by-Step
zhlédnutí 7KPřed 11 měsíci
Figma Prototyping - Button Component Interactions | Part 6 | Figma Tutorial Step-by-Step

Komentáře

  • @whyzytcg8873
    @whyzytcg8873 Před 2 hodinami

    Also, 7:35 . They listened :)

  • @whyzytcg8873
    @whyzytcg8873 Před 2 hodinami

    Hi I have a question. I don't get the part where we have to create a Radius Scales & Sizing Token Radius. Can't we create one and connect it once will do?

  • @tashazai7540
    @tashazai7540 Před 3 hodinami

    Thank youuuuu! 🌿

  • @djashawe88923
    @djashawe88923 Před 8 hodinami

    Thanks for the great content. You're so good at explaining with examples. At 15:55, shouldn't you change the constraint position from Left Top to Right Top, or does it not matter?

  • @MrMaxie83
    @MrMaxie83 Před 17 hodinami

    Thank you!

  • @the_infinity_channel
    @the_infinity_channel Před 17 hodinami

    In the beginning of any new design process I always get back to this system which make things a lot easier. And I mean on whole series of videos about design system. Thank you sooo much. You are real UX sunshine!

  • @carlafdz
    @carlafdz Před 18 hodinami

    Hello! Why is having a primitive collection with colors and then token collection with the primitive colors better than just using the colors from the primitive collection?

  • @DeathGripper1337
    @DeathGripper1337 Před 22 hodinami

    Hello Sunshine. I have a question. What can i do to make something hover towards my desired direction? (ex. while hovering, small rectangle becomes a bigger rectangle that goes diagonally up and right, or diagonally down and left) Thank you and your figma videos are by far the best on the Tube.

  • @alinasiri9173
    @alinasiri9173 Před dnem

    You are smart, and you know how to teach. I hope you grow fast. Thank you!

  • @lauranixon20
    @lauranixon20 Před dnem

    This is the most clear and useful Figma video I've ever seen!

  • @_ABHB_
    @_ABHB_ Před dnem

    Great tutorial as always!! Could you post a playlist explaining apple design system explaining dimensions of each components like spacing, colors, typography and how it is used in apple apps.. It's so difficult to understand apple's design system

  • @MohammadAlzeer-wy1bb

    16:37 😃😂😂😂 -" Don't skip this !!! I know you wanted to skip this you were like mmm text is boringو text is not boring !! , text is important !!!" -Roger that, Officer Sunshine! You have a great sense of humor, thanks for making the crash course enjoyable! 😃

  • @MohammadAlzeer-wy1bb

    Wow, what an outstanding crash course! The content was thorough and delivered in a concise manner, without wasting time., and the teaching method was both creative and engaging. The high energy and humor made the experience exceptionally enjoyable. This is the best crash course I’ve encountered. Thank you so much, I’ve definitely subscribed!

  • @k16e
    @k16e Před 2 dny

    Little do you know how much training I get from these videos you make. Thanks a huge for the education, TD!

  • @NilsSalzer
    @NilsSalzer Před 3 dny

    your videos are absolutely amazing!

  • @DeathGripper1337
    @DeathGripper1337 Před 3 dny

    The copy in principal 3 was nothing but straight facts

  • @oatula-g7g
    @oatula-g7g Před 4 dny

    Just loved and subbed lovely lady. You are an absolute wizard, I can't think of anyone explaining it better. Also your explainition is just awesome.

  • @x0x0ROCKx0x0
    @x0x0ROCKx0x0 Před 4 dny

    Īs there a way to import certain parts of a library? Say....I only want the colours and icons....and I don't need text styles...to be imported to my new project? And I want the colours and icons to be connected to the parent library all the time, so that the changes there will be reflected in my new file as well? is there a way to do that? TIA, and love all your videos

  • @marwamostafa1739
    @marwamostafa1739 Před 4 dny

    You can select them all now on Figma just click on them all and right click then deselect the scope you like it will be applied on them all

  • @whyzytcg8873
    @whyzytcg8873 Před 4 dny

    Out of so many tutorial out there, I started re-working mine at work using your method and honestly your tutorial are the clearest I ever watched. Subscribe!!

  • @hardboiled2000
    @hardboiled2000 Před 4 dny

    Thanks, this was really helpful

  • @DeathGripper1337
    @DeathGripper1337 Před 4 dny

    n1 on CZcams by far 🙏🤝

  • @samduss4193
    @samduss4193 Před 5 dny

    Love your explanation thanks

  • @tejiriadjogbe2063
    @tejiriadjogbe2063 Před 5 dny

    As an iOS developer just getting into designing ui for iOS, I find this super helpful. Thanks a lot.

  • @alimo-studios
    @alimo-studios Před 5 dny

    how are you getting to the appearance and the layout tab? I've tried everything, even in the beta app and cannot figure out how you got to see that in the tab. I'm on pro and enterprise. any ideas?

  • @Charliebishop83
    @Charliebishop83 Před 5 dny

    One of the best Figma channels. I know it's not exclusive to Figma, but You know what I mean teacher Sunshine 💯❤👏

  • @andreeatheodora4329

    Hi! Great video - I have a question: been watching all of your videos in this series and I've been wondering why did you create the 05 Component Tokens for Input Field, Checkbox, Radio and now Avatar separately in Local variables? Isn't it more simple to just assign all radiuses/spacing/padding from the Number scale of 2's directly? I guess there is a reason for this but I can't find it myself - probably you explained it already in the videos but it didn't stick with me. Hope I made sense and you can clarify. Thanks.

  • @Bar_t
    @Bar_t Před 6 dny

    it's a mountain creating a simple responsive card!

  • @Bar_t
    @Bar_t Před 6 dny

    yes, it's chilled

  • @andreeatheodora4329

    Hi! Love your series! One question tho: Where do you get your icons from? Did you make a video in which you showed how to add the icons to the design system that I missed? Thank you.

    • @TDSunshine
      @TDSunshine Před 6 dny

      Thanks! These are icons I made myself in this video (czcams.com/video/8V3LMRq5cEs/video.html) and you can also find them on my Etsy page (www.etsy.com/uk/listing/1486198103/360-digital-icon-stickers-clear-stickers) ☀️🙏🏻💛

    • @andreeatheodora4329
      @andreeatheodora4329 Před 5 dny

      @@TDSunshine Thanks for the fast reply! I checked it out and I loved it! I was a bit confused why you didn’t include this in the series but now I get it! Appreciate your help. ❤

  • @AbeerAbedElkareemElsharif

    we need more video for creative components

    • @TDSunshine
      @TDSunshine Před 6 dny

      What do you mean by creative components? ☀️🙏🏻

  • @AbeerAbedElkareemElsharif

    Thank you :)

    • @TDSunshine
      @TDSunshine Před 6 dny

      You're welcome! ☀️🙏🏻💛

  • @Amrdys
    @Amrdys Před 7 dny

    18:24 That was the funniest moment of truth I've seen in a while :D Thanks for the fantastic tutorial Tair

    • @TDSunshine
      @TDSunshine Před 6 dny

      haha thanks! ☀️🙏🏻💛

  • @Itsmekriish
    @Itsmekriish Před 7 dny

    not showing constraint in 08:31 Responsive cards please explain indetail responsive cards

  • @duyhuynh6816
    @duyhuynh6816 Před 7 dny

    nice, clearly. I have a question: How using Text stype variable on local variable? How to use match ?

    • @TDSunshine
      @TDSunshine Před 6 dny

      Thanks! I have a video about type variables here ☀️🙏🏻💛 - *Type and Gradient Variables* - czcams.com/video/2DpDh1CyzPg/video.html

  • @HumaIshtiaqHuma
    @HumaIshtiaqHuma Před 7 dny

    your videos are very informative ❣

  • @KaliLamyx
    @KaliLamyx Před 7 dny

    You have no idea how much your tutorial helps me. I'm actually learning to become UX-Designer ! I struggled so much with responsivity ! And suddenly ! All so easy ! Thank you x 1000 🙏

    • @TDSunshine
      @TDSunshine Před 6 dny

      yay! Im glad yo found it helpful ☀️🙏🏻💛

  • @samduss4193
    @samduss4193 Před 8 dny

    I do not have the paid version so i have not been able to follow here :(,, if someone with not paid version was able to follow all those move let me know cause i struggle lol

    • @TDSunshine
      @TDSunshine Před 6 dny

      You can still use variables and just swap them all manually between screen sizes. I would recommend grouping them to make it easier to tell between them ☀️🙏🏻💛

  • @samduss4193
    @samduss4193 Před 8 dny

    To be honest great step by step explanation.. i try to get a roadmap to learn i run into your video issue is that i do not know where to start and where to finish lol ... the quality is great tho ;) I sent you a like :)

    • @TDSunshine
      @TDSunshine Před 6 dny

      Thanks! I have a long Figma 101 (czcams.com/video/BPbJx9H4voM/video.html) video which is a great starting point for a beginner ☀️🙏🏻💛

  • @samduss4193
    @samduss4193 Před 8 dny

    a little bit too fast to me lol

  • @edriasalsa9262
    @edriasalsa9262 Před 8 dny

    Thank you for this tutorial! but i wanna ask after making this button components and adding it to the design for the prototype, why aren’t there any actions like hover or selected? do i need to prototype it again? if so, is there a tutorial for it?

    • @TDSunshine
      @TDSunshine Před 6 dny

      Yes! I put all the prototyping into a different video because it was too long ☀️🙏🏻 - czcams.com/video/to8ZXM1HFJU/video.html

  • @SimpleOkon
    @SimpleOkon Před 8 dny

    I will like u to be my mentor

  • @douglaskaburu8384
    @douglaskaburu8384 Před 8 dny

    Thank you for your great design.

    • @TDSunshine
      @TDSunshine Před 6 dny

      You are welcome ☀️🙏🏻💛

  • @petryyy333
    @petryyy333 Před 8 dny

    Your whole channel is so helpful! Thank you.

  • @iamshazam6113
    @iamshazam6113 Před 9 dny

    You are awesome Bae ❤

  • @djashawe88923
    @djashawe88923 Před 10 dny

    Hi. Thanks a lot for great tutorial! Quick question: Why use both variables and styles in Figma? It seems a bit redundant to me. Any reason or benefit in using both?

    • @TDSunshine
      @TDSunshine Před 6 dny

      Variables are still a bit limited when it comes to colours. For example, styles can store images, gradients or multiple colour layers in one, and variables can not. ☀️🙏🏻

  • @javadsaberi_afroo
    @javadsaberi_afroo Před 10 dny

    How interesting it was, my friend. Thank you for your explanation. Do you have a tutorial on exporting variables and importing them into another file?

    • @TDSunshine
      @TDSunshine Před 6 dny

      Thanks! I don't but thats a great idea! will add to my list ☀️🙏🏻

  • @whyisitsohardtochangethis

    This series is amazing. Is trully helping me in my work. Wish you the best from Brazil!

  • @UXMAN-s4y
    @UXMAN-s4y Před 11 dny

    Hey! Thanks for the tutorial. I hope you can help me out because i just cannot understand why its not working for me. I am litteraly doing the exact same thing as you but my prototype only works one way. So if I click on the toggle button, it changes the button variant itself and the variable. BUT then I cannot go back. It stays in this mode and i cannot click it again to turn it off. So weird pls help me <3

  • @fifimacp3
    @fifimacp3 Před 11 dny

    Super clear description that makes sense to me - THANKYOU

    • @TDSunshine
      @TDSunshine Před 6 dny

      You're welcome! ☀️🙏🏻💛