Figma Tutorial: Use Figma Variables Like a Pro (+ Practice File)
HTML-код
- Опубликовано: 5 июн 2024
- In this video, I'm going to show you everything you need to know about Figma's newest feature - Variables.
Download the practice file from here (copy the frames and paste them into a new file)👇:
bit.ly/3D64zBY
👉 Become a UI Designer with my UI Design & Figma Mastery course:
bit.ly/43v79vX
📸 Instagram: / uiux.arash
Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 7+ years of experience, and I teach people how to design great user interfaces and experiences. I've helped over 30,000 students become UI/UX designers from scratch worldwide.
👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons):
bit.ly/43v79vX
Thank you so much for your content and hard work. You make it so easy to learn. I saw that your course syllabus contains a section on variables. Is the knowledge/use of variables intertwined throughout the entire course or just added separate due to the recent Figma update?
OH you did a great job to explain this tokens 😮 thanks for the time
Honestly you explain the local variable better than Figma did themselves. Thank you!
Thank you so much.
Indeed
Agree! thanks so much!
Agreed. I couldn't wrap my head around the Figma videos. This already makes much more sense. Thanks!
Agreed!
You must be given award for explaining this. The way and tonal and speed quality you kept throughout the video made easy for even beginners.
That's so kind of you, Thank you so much.
Arash, your teaching style is "GOLD"! Thank you so much, this couldn't have come at a better time.
Thank you very much. Glad it helped.
One of the simplest videos and most explanatory videos about variables on RUclips. I like how you simplified the whole process, great work. I can now confidently start using variables in my project.
Thank you so much. Glad it helped.
how is this simple???? he created too many variables just to explain how styles can be saved into variables
Out of all the tutorials i've watched around this area, this is the most comprehensive and clearest i've come across. Thank you! Greatly appreciated! Please keep up the hard work - we all appreciate this.
No problem. Glad it helped.
Hands-down the best explanation I have seen so far.
You made it look so simple as if we can start right away, now the hard reality is to put it into practise and realise how much difficult it would have been for you to make it look so simple.
Thank you so much :)
Thank you very much. Glad you found it helpful.
Nobody could ever explain these features this well! Thank you so much!! 🔥🔥👏🏻👏🏻👏🏻
Thank you so much.
Hi Arash, thank you for your video! It was very clear, and got me up and running with variables faster than the overview video from Figma. I've subscribed! Looking forward to checking out your other content on variables as this feature evolves. 🙂
Hi. Glad it helped. Welcome to the channel.
struggling with variable last few days but now it's clear, thanks to you man. Keep doing the good work.
You made it so easy to understand on how variables works and how it will be applied. A great tutorial, Arash 🔥
Thank you so much.
That's a awesome tutorial on variables, I have learned so many things after entirely watching and practising this. Loved it❤
Great to hear! Thank you.
love the way you present, so well organized and understandable
Thanks a lot.
Wow Arash this video is amazing! You explained everything so clearly! Thank you so much for teaching us! 👏🏼
Thank you so mcuh.
That was the best video I've watched on this subject! - Fantastic tutorial, thanks so much :)
Glad to hear that. Thank you so much.
Your videos are great Arash, thanks for sharing your knowledge!
Thank you so much for your precious time Arash. Love from Turkey.
This is fantastic learning experience. You explained clearly the entire way through, expounding on the steps as you completed them. Your voice pitch and pacing is pleasurable. A+++
Glad you enjoyed it! Thank you very much.
This is by far the best variable tutorial ever! Kudos, you earned a loyal subscriber!
Thanks. Glad it helped. Welcome aboard.
This is the best Figma Tutorial I've ever watched. I felt drowned with the variable thing and you really made it look so clear! Thanks
Fantastic Explanation, Thank you! Further to add in 5:24 (Creating color variables), you can also duplicate the color branch by right clicking the "blue" and click "duplicate group". In that way you can speed up things. cheers!
for me really the best video about variables!! i was so afraid of learning this topic bc it seemed so difficult but now i understand everything!! thanks for explaning even the simplest and obviuos things
Glad to hear that. Thank you.
Thank you so much, Arash! I have learned so many things from your videos... keep up the good work 🙂
You are very welcome, dear Elnaz. Glad you found them helpful.
Bro, this tutorial is gold! Best explanation of the variables I have seen so far! Thanks!
Thank you. Glad it was helpful!
This was the video that made it click for me, big TY for the clarity and thorough articulation.
No problem. Glad it helped!
Amazing! Thank you so much for explaining that. I'm learning so much!
This is the best explanation of variable and tokens I have found. Thank you for such a clear and thorough video!
Thank you so much. Glad it helped.
Definitely the best video on Variable. Love your way of teaching. Subscribed!!!
Thank you so much. Welcome to the channel.
I love your content Arash!❤ You are really an amazing teacher. You never disappoint us. With your detailed way of teaching it is always easy to understand. Really Thank you.😊
Thank you so much. Glad it helped.
Awesome, you made it so simple to grasp :) thanks a million
Professional and valuable content, as always! Thank you 🙂
Thank you.
Short and clear. Thank you for making videos!
No problem. Thanks.
I really got it all... Thanks for simple explanation
Thank you so much for making this tutorial.Professional and valuable content, as always! Thank you 🙂
No problem. Glad you liked it.
I've been debating whether to continue with Adobe XD or make the switch to Figma. Honestly, I didn't see a reason to transition until I watched this video. The instruction was clear, the purpose was well-defined, and it brilliantly showcased one of Figma's strong features. Thank you for the excellent work. I'll certainly explore your course and hope to enroll soon.
Thank you. Glad it was helpful!
So good. Thanks for such a thorough explanation. Love your videos.
Thank you. Glad you liked it.
Super Like as usual! Brilliant one! Thank you, Arash!
Thank you.
I watched the tutorial on variables from Figma itself, but you tell much better! Thank you for your content
Thank you so much. Glad it helped.
Best variable tutorial ever.
Thank you so much Arash!
Thanks. Glad it helped.
Thank you so much, you are the only person who explained it to me as easy as possible!!!
No problem. Glad it helped!
Valuable turorial Arash, I’m forever grateful and in debt to your kindness
Thank you so much. Glad you found it helpful.
By far, the best tutorial on tokens and variables! Thank you Arash jan 😍
Thank you so much, Niousha jan.
This is one of the BEST EVER TUTORIAL VIDEO!! Thanks a lot mate.
Glad it helped! Thanks.
I really enjoyed every minute of the video, love it! THANKS A LOTTTTTTT!!
Glad to hear that. No problem.
Bro, this video is better than the official Figma video about variables. Awesome !!
Thanks a lot.
Kudos, for the best RUclips tutorial I have ever seen on Figma Variables.🤩
Glad you think so!
this is so sick! thanks Arash ❤🔥
No problem.
Omg, this class is just amazing. Thank you!
No problem. Glad you liked it.
Excellent and explained is the best way. Thanks Arash!
Thanks. No problem.
This video is brilliant!
Thanks a lot Arash for explaining variables in an simple understandable manner, god bless you 💐👏
No problem. Thank you.
Perfect Explanation! Thank you!
No problem.
Thank you so much. I spent 1 week looking for an explanation like this
No problem. Glad it helped!
Excellent Tutorials, Thank You Arash!
No problem. Glad you liked them.
The way you explained that was amazing
Thank you.
Great as always!🔥
Thanks.
Thank you for your service!
Thank you so much for making this tutorial✨
You’re welcome.
This was explained so well, thank you!! Would love to see a video on how to use variables to change an image ie. Click a button and it swaps from one image to a different one
Thank you. Sure, stay tuned for it.
Thanks brother. You simplified my life.
No problem.
These variables are much better than styles we used to use before.
Yes.
Just wow. Such a simple explanation. ❤❤❤
Glad you liked it
Awesome, well explained, really clear. And very good that you zoom in on the interface elements so it is bigger and we don't have to zoom ourselves on the video :). Just a comment about the token "surface-primary" which you linked to the value "Color/Base/White". Shouldn't the token be named "surface-base-white"? Same goes for "button-background-primary". Thanks again and keep up the good work :D
Thank you so much.
The naming convention you choose is totally up to you and your organization but when it comes to tokens, it's better to define names clearly. I prefer not to use the primitives' name in the tokens' name. So base, doesn't serve a purpose there but we can have primary, secondary, or even tertiary surfaces.
Now, it becomes so easy for me. Thank you so much ❤
No problem. Glad it helped.
Finally I've got this haha. Thank you very much!!
No problem. Glad it helped.
Your channel deserves more traction, what an amazing tutorial..
Thanks a lot.
Thank you brother, this was well presented and thought. I'm grateful 🙌✨
No problem. Glad it helped!
Amazing tutorial!!! thank you so much!
No problem. Glad you liked it!!
You are simply the best!
Simply Awesome
Very well explained. Thank you!!
No problem.
Wonderful work
One of the best video about Variables and Tokens on youtube
Thank you.
Your explanation is very easy to understand, keep up, mate!
Thank you so much.
Thanks for such a great explanation!!
No problem. Thank you.
This is how an expert would teach variables in a nutshell. Amazing work dear Arash ✌🏻😎
Thanks Morteza.
Thanks a lot. You are the best educators which have clearest explanation which i know❤❤
You are very welcome. Thank you so much.
amazing video!
Thanks for this tutorial, it's well explanatory
No problem.
Mad respect! Figma gonna update these variables soon. I'm waiting for your next video
Thanks. Sure.
What a great video dude!!
Greetings from Brazil.
Glad you enjoyed it! Thanks.
Great Video!
Thank you so much!!! it's really helpful to me! I love your video⭐
No problem. Glad it was helpful!
although someone was able to explain this in simple language, everyone who tried to explain it before could not connect two words and give a normal explanation. Thank you
No problem. Glad it helped.
thanks you so much for this very detailed video, btw, the plugin is such a livesaver!
No problem. Glad it was helpful!
Nice tutorial. I want to know which plugin did you use to generate the colors already with the scale and the value of it?
thanks aarsh your contents are so clear explaining than others keep doing
No problem. Glad you liked it.
Thanks arash for this awesome video. I was totally confused with them even when I watched figma RUclips page 😂 this course was ace job done. Keep up the good work.☺️
No problem Romina. Glad you found it helpful.
thanks, good explanation Arash
No problem.
Wow that is the best tutorial about variables!
Thanks. Glad it helped.
I didn't have a choice but to subsribe :) Amazingly explained. Danke!!!
Welcome aboard! Thank you.
Such a good tutor: Thank you so much!
Thanks a lot.
Absolute golden content. Thanks!
Thank you.
Great very simple and detailed explanation ❤
Glad you liked it!
I really appreciate your effort, you explained it very well.
You are very welcome. Thank you so much.
Thankyou so much for this awesome tutorial 🙏
No problem. Glad it was helpful!
Awesome 👏 wonderful job, very easy to learn from it. Thanks a lot for this video ❤
No problem. Glad you liked it.
thank you so much, your lesson was very helpful.
No problem. Glad it helped.
It's amazing feature, thankyou Arash
No problem.
It was very helpful thank you so much ✨❤️
No problem.