Figma VARIABLES BEST PRACTICE | Figma Variables Step-by-step | Config 2023 update | Tokens tutorial
Вставка
- Опубліковано 9 лип 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. Variable Modes | Config Updates - • Figma VARIABLE MODES |...
2. Prototype with Variables | Config Update - • Figma PROTOTYPE with V...
3. Auto Layout | Config Update - • Figma AUTO LAYOUT UPDA...
👋🏼 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 Best Practice Guide
02:03 Our Buttons
02:43 Primitive Colour Variables
04:18 Semantic Colour Variables
05:07 Calling an Alias
06:45 Assigning the Colour Variables
07:40 Changing Variable Modes
08:14 Number Variables
08:48 Primitive Number Variables
09:19 Variable Scoping
10:04 Element-Specific Variables
11:08 Assigning the Number Variables
11:39 Final Buttons!
13:21 Summary!
🤗 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 - Навчання та стиль
![Dark And Light Modes Using Color Variables | Figma Tutorial [CONFIG 2023]](http://i.ytimg.com/vi/KzLlAAWfyTE/mqdefault.jpg)
Yes to all of this. Anything on variables is so helpful
☀️🙏🏼
Simply amazing, thank you very much! 💯
🙏🏼☀️
Your videos are fantastic! Thank you for sharing your knowledge
Thank you! ☀️☀️
OMG, this is so helpful. I was afraid about give it a try to this, but thank you for doing this tutorial and make a digerible video, I will try it know. I became a subscriber since now.
Aww yay! I’m glad it was helpful ☀️🙏🏼
Insightful. Thanks
☀️🙏🏼
Thank you :)
No problem 😊
I'm a newbie designer. I'm glad to say I get it. Information overload but I'll get there!
Glad it’s helpful! 🙏🏼☀️
💙💙
☀️🙏🏼
Hello, can you please create a video on responsive/fluid grid with variables and max/min width feature? Please take an example like dribbble where you have cards. Size and number of cards per row keeps changing based on screen size. That will be really helpful.
By the way you're explaining really well, UA-cam is the place for you. Just a suggestion to slow it down a bit while explaining. 🙏
I have a video one responsive design and those features coming up ! So keep a look out 👀👀
thank you so much for your video!!!
I've working with Design Tokens for a while and this is a great step for Figma to finally integrate variables that work similarly as tokens.
Just one question, did you manage to implement icons inside of your buttons and jump between the sizes with the different modes? I'm stuck on this one... I would really like to reduce the amount of variants on my button component, and to do so, I need to jump from my medium size button with a 24px leading icon, to my small size button with a 16px leading icon. I tried with boolean but I was unsuccessful :( . Any tips? thank you in advance!!
If you put the two icons sizes as 1 component with two variants “24px” and “16px”. Then create a text variable with those same names in the correct modes. Then you can connect the variable to the component so essentially the variable selects which variant to use. I go through something similar in this video at 4:52 -> ua-cam.com/video/fB-4ikrt3mk/v-deo.html
@@TDSunshine omg thank you much for the quick reply! I'll give it a try and let you know how it goes ☺
A bit random, but does anyone know the name of the script font used for the chapter titles in this video, like at 04:18 "Creating Semantic Colour Variables". I would love to find it.
Hey ! The font is called bellaboo 🤗☀️
@@TDSunshine Thank you so much! GREAT tutorial by the way! ☺🙌
Hi @TD Sunshine,
Could you help me, when I use the variable prototype in multiple inputs increment, at the same time when I click I work all the same time? How could I fix this? Thanks in advance.
Hey! Sorry could you explain your issue again? I don't think I understand 🙈
@@TDSunshine In my increment component I use prototype variable #Count 1. I use those component all across my form layout. In view prototype, when I click increase 1 or decrease 1 the other component that I don't click also work at the same time (It suppose not to work when we don't click). Hope you get it!
@@thearaav6670 ahh ok! So you need a different variable for each text box. Basically if they are all connected to #count then when you change one , they all change. Each input in your form should be connected to a different variable and then when you prototype you initiate change to the appropriate variable alone ☀️
That's very helpful, thanks
@@TDSunshine
Thank you for your video. I was wondering how to use variables in a design system or a library situation. I have a library which contains a lot of components for my projects but as soon as is pull a component from assets into another project the variables are missing I think this is not supported yet, is it ? Or am I missing somthing here ?
Variables can be published just like other reusable assets so make sure to publish them and update the files that’s use that library and it should carry across! ☀️
@@TDSunshine They are published, hmm. My first thought was, that this isn't possible at the current state of figma but i guess i'll have to check my files again. thanks for your reply.
This is basic of button components (States and sizings) but what about other component properties like layers, icon off/on etc.. Variables are not working for these. We still need components for these properties. isn't it?
Correct! ☀️ You will still need to use variants and component properties to control certain things in components. It all depends on what you need in your system. There is a great video from Figma that helps to clarify this a bit -> ua-cam.com/video/RXQ8XVirzjs/v-deo.htmlsi=nP7ToHrIeF4BsyBr
thanks for explaining, I got lost
Glad I could help! ☀️
Thank you so much for this!
Yes you can! I have a video about responsive design coming soon 👀👀
@@TDSunshine oh my, yes! so exicted to see that
hi :) great video! Quick question why did you call it semantic and not TOKENS! I am crying to understand the differences (feel a bit embarrassed) :)
I would really recommend watching this session from config where they discuss tokens vs variables ! ua-cam.com/video/M0NU5QFLCl4/v-deo.html
@@TDSunshine thank you. Have you tested if the variables that you create in a Figma file can be used across multiple figma files? Like if you have design system that is linked with different figma files (hope it makes sense)
@@AUDIORESETROCK Yes I have! It worked well :) just remember to publish the variables from your design system and update the file that's using the design system
If you had created component variants, you could animate between the states via Prototype and "Change". This is not possible with variables, is it? :o
You could set it up but it’s not as simple as dragging a noodle between variants. You could say on tap set variable X to variable Y and that could swap colour or text for example or even the variant that being used
@@TDSunshine Thx for your response :) I have to tried it
This is what ive been thinking
@@TDSunshinethat's more complex than nodding things 😅
Can we make it to components ? So we can use it from the asset panel ??
The button? Sure you can! ☀️
I don't think it's best practice to use modes to control variants... I don't think that's what modes are for...
They can be used in whichever way suits your designs and your design process best 🙏🏼☀️
You're fantastic designer I've ever seen! Thank you so much!🤍
aww thanks! 🙏☀️
Cool but Im wondering one thing. How about the styles? Figma still keeps the styles because we can’t use viariables for everything. In terms of colours we can’t make for example a gradient variable, etc. But they will develop variables so the variables will becoming more and more powerful. Thus why do we need styles? You think that Figma will delete styles feature in the future?
To be honest it’s getting more and more confusing and chaotic and I feel like they're slowly losing control of those features.
But anyway, the question is simple . Should we reject our styles and change everything to variables? 😂🫣
Hahaha Kamil I am with you in this vortex of confusion don’t worry! I think it’s all about balance. As you said variables can be a bit extra so in some cases you might not want to get to that granular level and only need some quick styles to make your design process more quick and simple. I think styles will stick around for a long time and once the excitement over variables dies down a bit then we will all kind of figure out where and when to actually use them 🙏🏼☀️
I asked Figma about this specifically - they essentially said "we're not sure how they'll work together in the future". My impression is these will eventually be deprecated in place of variables once they support gradients, image fills etc.
@@TDSunshine Thanks for reply :) Yeah, I think you are right, for now we meet excitement because it’s a fresh topic 😊
@@jordan_hughes Oh really? That’s interesting but it makes sense in a long perspective, of course! Thanks :)