![TD Sunshine](/img/default-banner.jpg)
- 84
- 379 856
TD Sunshine
United Kingdom
Registrace 13. 03. 2023
TD Sunshine is a channel dedicated to helping you learn Figma and UX design in a fun and engaging way. I'm Tair, your host and expert instructor, I will guide you through the ins and outs of using Figma to create stunning user interfaces and experiences.
Whether you're new to Figma or an experienced designer looking to expand your skill set, TD Sunshine has something for you. My tutorials are designed to be easy to follow, with step-by-step instructions and clear explanations of key concepts.
💎 CHANNEL MILESTONES 🪬
☆ Published my first video - Mar 19, 2023
☆ 100 subscribers - May 11, 2023
★ 1000 subscribers - Jul 23, 2023
★ 4000 watch hours - Nov 9, 2023
☆ 5000 subscribers - Apr 4, 2024
Whether you're new to Figma or an experienced designer looking to expand your skill set, TD Sunshine has something for you. My tutorials are designed to be easy to follow, with step-by-step instructions and clear explanations of key concepts.
💎 CHANNEL MILESTONES 🪬
☆ Published my first video - Mar 19, 2023
☆ 100 subscribers - May 11, 2023
★ 1000 subscribers - Jul 23, 2023
★ 4000 watch hours - Nov 9, 2023
☆ 5000 subscribers - Apr 4, 2024
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
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
Also, 7:35 . They listened :)
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?
Thank youuuuu! 🌿
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?
Thank you!
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!
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?
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.
You are smart, and you know how to teach. I hope you grow fast. Thank you!
This is the most clear and useful Figma video I've ever seen!
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
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! 😃
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!
Little do you know how much training I get from these videos you make. Thanks a huge for the education, TD!
your videos are absolutely amazing!
The copy in principal 3 was nothing but straight facts
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.
Ī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
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
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!!
Thanks, this was really helpful
n1 on CZcams by far 🙏🤝
Love your explanation thanks
As an iOS developer just getting into designing ui for iOS, I find this super helpful. Thanks a lot.
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?
One of the best Figma channels. I know it's not exclusive to Figma, but You know what I mean teacher Sunshine 💯❤👏
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.
it's a mountain creating a simple responsive card!
yes, it's chilled
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.
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) ☀️🙏🏻💛
@@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. ❤
we need more video for creative components
What do you mean by creative components? ☀️🙏🏻
Thank you :)
You're welcome! ☀️🙏🏻💛
18:24 That was the funniest moment of truth I've seen in a while :D Thanks for the fantastic tutorial Tair
haha thanks! ☀️🙏🏻💛
not showing constraint in 08:31 Responsive cards please explain indetail responsive cards
nice, clearly. I have a question: How using Text stype variable on local variable? How to use match ?
Thanks! I have a video about type variables here ☀️🙏🏻💛 - *Type and Gradient Variables* - czcams.com/video/2DpDh1CyzPg/video.html
your videos are very informative ❣
Thanks! ☀️🙏🏻💛
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 🙏
yay! Im glad yo found it helpful ☀️🙏🏻💛
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
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 ☀️🙏🏻💛
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 :)
Thanks! I have a long Figma 101 (czcams.com/video/BPbJx9H4voM/video.html) video which is a great starting point for a beginner ☀️🙏🏻💛
a little bit too fast to me lol
🙈☀️🙏🏻
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?
Yes! I put all the prototyping into a different video because it was too long ☀️🙏🏻 - czcams.com/video/to8ZXM1HFJU/video.html
I will like u to be my mentor
Thank you for your great design.
You are welcome ☀️🙏🏻💛
Your whole channel is so helpful! Thank you.
Thanks! ☀️🙏🏻💛
You are awesome Bae ❤
Thanks! ☀️🙏🏻
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?
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. ☀️🙏🏻
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?
Thanks! I don't but thats a great idea! will add to my list ☀️🙏🏻
This series is amazing. Is trully helping me in my work. Wish you the best from Brazil!
Obrigado!☀️🙏🏻💛
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
Super clear description that makes sense to me - THANKYOU
You're welcome! ☀️🙏🏻💛