Figma Variables Dark And Light Modes | How to use variables in Figma for Colour Modes

Figma Variables Dark And Light Modes | How to use variables in Figma for Colour Modes | Figma 2023

Рет қаралды 1,423

Күн бұрын

🚨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. Prototype with Variables | Config Update - • Figma PROTOTYPE with V...
3. Figma Components - • Figma Components | Mas...
👋🏼 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 Our File
00:43 Create variables
02:27 Apply variables
05:15 Change variable mode
05:52 Auto variable mode
07:48 Up 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 #variablemodes

Пікірлер: 25

6 ай бұрын

I probably saw ten of videos about light/dark modes, as well other dozens topics as Variables, Tokens, etc. and I have to say your videos are the most clear, easy, super quick (but not so fast!) to understend and learn. I found in your channel a great balance of splendid explanations and methods to organize Figma use. I devoutly recommend your videos. Cheers from Bariloche, Argentina.

@TDSunshine 6 ай бұрын

Aww thank you so much! I really appreciate your kind words 💛🙏🏻☀️

@gonzalo3553 9 ай бұрын

Tair your videos are simply amazing, thanks for all your efforts! 💯🙌🏽

@TDSunshine 9 ай бұрын

Awww thanks! I appreciate it!☀️🙏🏼

@jesshurf 3 ай бұрын

Very concise - I also watched a few others before coming to this video about dark and light mode variables, and this one breaks it down really nicely. Especially the bit at the end explaining auto-mode. Thank you!!!!

@TDSunshine 3 ай бұрын

Awww thanks! 🙏🏼☀️💛

@jovannibasilisco6414 4 ай бұрын

Having fun watching all your tutorials 😊. Thanks for sharing. From Philippines with 😍

@TDSunshine 4 ай бұрын

You're welcome! ☀️🙏🏻💛

@insiyamithaiwala8314 4 ай бұрын

i like the way you explain it, not too layman not too pro! keep it up.

@TDSunshine 4 ай бұрын

thanks! 🙏🏻☀️💛

@jollygood25 4 ай бұрын

This was really helpful and simple example with explanation. Thanks

@TDSunshine 4 ай бұрын

You're welcome! I'm glad it was helpful! ☀️🙏🏻

@jennyk299 5 ай бұрын

Hi again! Thanks for another great video on variables. I'm still learning them myself but getting stronger by the day! One downside I've noticed about variables is they don't have animated transitions like having pointing interactions has. I can see why they don't for a vast majority of variable usages but I wish there was a way to incorporate it in things like toggling something off and on or switching variant states with variables. As of now, is there a way to have have light and dark mode as variables fade/dissolve into one another when switching back and forth? Maybe this will be something they'll come out with in the future if it's not possible already.

@TDSunshine 5 ай бұрын

You’re welcome 🤗 I know exactly what you mean! It’s really jumpy and instant right now there is no way to control the animation 😩 if you want a smoother transition you can still utilise variable to create a faster and easier design system for yourself but then use normal prototyping to connect different screens with animation 🤷🏽‍♀️I hope that helps! 🙏🏼☀️

@Mr_Sin99 9 ай бұрын

Great Video.

@TDSunshine 9 ай бұрын

Thanks!☀️

@bignose.vincent 9 ай бұрын

Still awesome as always

@TDSunshine 9 ай бұрын

Thanks! ☀️

@user-ke1jb5fz6g 2 ай бұрын

Hi, could you please make a video on the tools you use for video editing?

@TDSunshine 2 ай бұрын

Great idea! adding to my list ☀️🙏🏻

@the_infinity_channel 2 ай бұрын

Is there a way to do this in free version?

@TDSunshine 2 ай бұрын

you can create them as different variants and then just change the variant. Its not as quick but it works! ☀️🙏🏻💛

@the_infinity_channel 2 ай бұрын

@@TDSunshine Thank you for respond. I believe so it is long way.

@platinoir 9 ай бұрын

Amazing content as always 🫶 initially I made the mistake of creating a variable for each component element so I can customize the light dark mode in detail but I ended up with a lot of duplicate variables and it became extremely overwhelming Since then, I have learned from my mistake & try as much as possible to create variables for themes mainly, that way I only have the variables I need for fill, border, content, etc...

@TDSunshine 9 ай бұрын

Thanks! Iv'e found variables need a bit of trail and error as well! Its great you are learning and adapting your systems to fit your design purposes! ☀️🤗