Figma Tutorial: Use Figma Variables Like a Pro (+ Practice File)

Рет қаралды 271,644

Күн бұрын

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.

Пікірлер: 549

@DesignWithArash 11 ай бұрын

👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons): bit.ly/43v79vX

@abzkilla9411 10 ай бұрын

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?

@CARMARCUSO 6 ай бұрын

OH you did a great job to explain this tokens 😮 thanks for the time

@urbuffbaby4438 10 ай бұрын

Honestly you explain the local variable better than Figma did themselves. Thank you!

@DesignWithArash 10 ай бұрын

Thank you so much.

@bagwellgaming3979 6 ай бұрын

Indeed

@laracassardelia9178 5 ай бұрын

Agree! thanks so much!

@Sys-Op 4 ай бұрын

Agreed. I couldn't wrap my head around the Figma videos. This already makes much more sense. Thanks!

@sulaimandamilola Ай бұрын

Agreed!

@samkapoor5529 11 ай бұрын

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.

@DesignWithArash 10 ай бұрын

That's so kind of you, Thank you so much.

@binatitus6518 11 ай бұрын

Arash, your teaching style is "GOLD"! Thank you so much, this couldn't have come at a better time.

@DesignWithArash 11 ай бұрын

Thank you very much. Glad it helped.

@domenicobuonocore1502 6 ай бұрын

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.

@DesignWithArash 6 ай бұрын

No problem. Glad it helped.

@princhipehdesigns5922 11 ай бұрын

One of the simplest videos and most explanatory videos about variables on KZfaq. I like how you simplified the whole process, great work. I can now confidently start using variables in my project.

@DesignWithArash 11 ай бұрын

Thank you so much. Glad it helped.

@minerva646 6 ай бұрын

how is this simple???? he created too many variables just to explain how styles can be saved into variables

@user-sn4rn5jt9f 10 ай бұрын

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 :)

@DesignWithArash 10 ай бұрын

Thank you very much. Glad you found it helpful.

@elinbonab 9 ай бұрын

Nobody could ever explain these features this well! Thank you so much!! 🔥🔥👏🏻👏🏻👏🏻

@DesignWithArash 9 ай бұрын

Thank you so much.

@ArifMahabub-pl2sh Ай бұрын

struggling with variable last few days but now it's clear, thanks to you man. Keep doing the good work.

@AsiaHoe 9 ай бұрын

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. 🙂

@DesignWithArash 9 ай бұрын

Hi. Glad it helped. Welcome to the channel.

@AshishMishra-cm1bi 11 ай бұрын

That's a awesome tutorial on variables, I have learned so many things after entirely watching and practising this. Loved it❤

@DesignWithArash 10 ай бұрын

Great to hear! Thank you.

@michaelng1990 11 ай бұрын

love the way you present, so well organized and understandable

@DesignWithArash 11 ай бұрын

Thanks a lot.

@nemocreativestudio 10 ай бұрын

You made it so easy to understand on how variables works and how it will be applied. A great tutorial, Arash 🔥

@DesignWithArash 10 ай бұрын

Thank you so much.

@alono4473 11 ай бұрын

Wow Arash this video is amazing! You explained everything so clearly! Thank you so much for teaching us! 👏🏼

@DesignWithArash 11 ай бұрын

Thank you so mcuh.

@Samibravo832 6 ай бұрын

This is by far the best variable tutorial ever! Kudos, you earned a loyal subscriber!

@DesignWithArash 6 ай бұрын

Thanks. Glad it helped. Welcome aboard.

@johanguams6619 Ай бұрын

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

@nathong3229 3 ай бұрын

That was the best video I've watched on this subject! - Fantastic tutorial, thanks so much :)

@DesignWithArash 2 ай бұрын

Glad to hear that. Thank you so much.

@elnaznikbin 11 ай бұрын

Thank you so much, Arash! I have learned so many things from your videos... keep up the good work 🙂

@DesignWithArash 10 ай бұрын

You are very welcome, dear Elnaz. Glad you found them helpful.

@abdulrehmanismail9001 10 ай бұрын

Definitely the best video on Variable. Love your way of teaching. Subscribed!!!

@DesignWithArash 10 ай бұрын

Thank you so much. Welcome to the channel.

@illiavybornov 9 ай бұрын

Bro, this tutorial is gold! Best explanation of the variables I have seen so far! Thanks!

@DesignWithArash 8 ай бұрын

Thank you. Glad it was helpful!

@jeremiahharemza1235 7 ай бұрын

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+++

@DesignWithArash 7 ай бұрын

Glad you enjoyed it! Thank you very much.

@frailita 11 ай бұрын

Professional and valuable content, as always! Thank you 🙂

@DesignWithArash 11 ай бұрын

Thank you.

@RiLemios 9 ай бұрын

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

@DesignWithArash 9 ай бұрын

Glad to hear that. Thank you.

@shrutipatil3827 7 ай бұрын

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.😊

@DesignWithArash 6 ай бұрын

Thank you so much. Glad it helped.

@josephczyz9824 5 ай бұрын

This was the video that made it click for me, big TY for the clarity and thorough articulation.

@DesignWithArash 4 ай бұрын

No problem. Glad it helped!

@hodamira80 Ай бұрын

Awesome, you made it so simple to grasp :) thanks a million

@minhanhpham2508 11 ай бұрын

Short and clear. Thank you for making videos!

@DesignWithArash 10 ай бұрын

No problem. Thanks.

@NicoleUXplorer 7 ай бұрын

This is the best explanation of variable and tokens I have found. Thank you for such a clear and thorough video!

@DesignWithArash 6 ай бұрын

Thank you so much. Glad it helped.

@alexching1914 10 ай бұрын

So good. Thanks for such a thorough explanation. Love your videos.

@DesignWithArash 10 ай бұрын

Thank you. Glad you liked it.

@user-yk7xd4ct3l 6 ай бұрын

Best variable tutorial ever. Thank you so much Arash!

@DesignWithArash 6 ай бұрын

Thanks. Glad it helped.

@subhrobikashdas6944 9 ай бұрын

Super Like as usual! Brilliant one! Thank you, Arash!

@DesignWithArash 9 ай бұрын

Thank you.

@diogofigueira5236 11 ай бұрын

Bro, this video is better than the official Figma video about variables. Awesome !!

@DesignWithArash 11 ай бұрын

Thanks a lot.

@jovenfabuloso 11 ай бұрын

Valuable turorial Arash, I’m forever grateful and in debt to your kindness

@DesignWithArash 10 ай бұрын

Thank you so much. Glad you found it helpful.

@abdul-UIUX 4 ай бұрын

Kudos, for the best KZfaq tutorial I have ever seen on Figma Variables.🤩

@DesignWithArash 4 ай бұрын

Glad you think so!

@miroslavpetrovic3713 10 ай бұрын

Thank you so much for making this tutorial.Professional and valuable content, as always! Thank you 🙂

@DesignWithArash 10 ай бұрын

No problem. Glad you liked it.

@hibahasan9627 5 ай бұрын

I really enjoyed every minute of the video, love it! THANKS A LOTTTTTTT!!

@DesignWithArash 5 ай бұрын

Glad to hear that. No problem.

@Nioudor 9 ай бұрын

By far, the best tutorial on tokens and variables! Thank you Arash jan 😍

@DesignWithArash 9 ай бұрын

Thank you so much, Niousha jan.

@naufeevoice 8 ай бұрын

This is one of the BEST EVER TUTORIAL VIDEO!! Thanks a lot mate.

@DesignWithArash 8 ай бұрын

Glad it helped! Thanks.

@user-ty5wr4nc4p 10 ай бұрын

Excellent Tutorials, Thank You Arash!

@DesignWithArash 10 ай бұрын

No problem. Glad you liked them.

@berceste80 28 күн бұрын

Thank you so much for your precious time Arash. Love from Turkey.

@DesignWithArash 2 күн бұрын

No problem.

@DubbelDutch1 11 ай бұрын

Excellent and explained is the best way. Thanks Arash!

@DesignWithArash 11 ай бұрын

Thanks. No problem.

@mariabrunalopes 4 ай бұрын

Omg, this class is just amazing. Thank you!

@DesignWithArash 4 ай бұрын

No problem. Glad you liked it.

@juliasolnechnaya7468 6 ай бұрын

I watched the tutorial on variables from Figma itself, but you tell much better! Thank you for your content

@DesignWithArash 6 ай бұрын

Thank you so much. Glad it helped.

@MuhammadArif-kj6qe 7 ай бұрын

Thanks brother. You simplified my life.

@DesignWithArash 7 ай бұрын

No problem.

@euginrobinson 6 ай бұрын

Your channel deserves more traction, what an amazing tutorial..

@DesignWithArash 5 ай бұрын

Thanks a lot.

@Pahadi_Culture1 11 ай бұрын

The way you explained that was amazing

@DesignWithArash 11 ай бұрын

Thank you.

@furiusliber 5 ай бұрын

Thank you so much. I spent 1 week looking for an explanation like this

@DesignWithArash 5 ай бұрын

No problem. Glad it helped!

@jedi8533 2 ай бұрын

Thank you so much, you are the only person who explained it to me as easy as possible!!!

@DesignWithArash Ай бұрын

No problem. Glad it helped!

@reckaws 11 ай бұрын

Thank you so much for making this tutorial✨

@DesignWithArash 11 ай бұрын

You’re welcome.

@oartsoares 9 ай бұрын

What a great video dude!! Greetings from Brazil.

@DesignWithArash 8 ай бұрын

Glad you enjoyed it! Thanks.

@mohadesehnabizadeh5491 11 ай бұрын

Great as always!🔥

@DesignWithArash 10 ай бұрын

Thanks.

@carolinanoir3260 22 күн бұрын

Your videos are great Arash, thanks for sharing your knowledge!

@DesignWithArash 2 күн бұрын

Thank you so much.

@SrinisPhotography 3 ай бұрын

One of the best video about Variables and Tokens on youtube

@DesignWithArash 3 ай бұрын

Thank you.

@LeoPereiraAlves-nw2co 8 ай бұрын

Finally I've got this haha. Thank you very much!!

@DesignWithArash 7 ай бұрын

No problem. Glad it helped.

@nehagupta7343 10 ай бұрын

Very well explained. Thank you!!

@DesignWithArash 9 ай бұрын

No problem.

@LaertaaPremto Ай бұрын

Amazing! Thank you so much for explaining that. I'm learning so much!

@DesignWithArash 2 күн бұрын

No problem. Glad you liked it.

@analinalino 5 күн бұрын

Bro, this video is insane, thank you so much

@DesignWithArash 2 күн бұрын

No problem. Glad you liked it!

@user-ue7br5pr1z 5 ай бұрын

Now, it becomes so easy for me. Thank you so much ❤

@DesignWithArash 5 ай бұрын

No problem. Glad it helped.

@arro665 9 ай бұрын

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.

@DesignWithArash 8 ай бұрын

Thank you. Glad it was helpful!

@yoshithakuntumalla7614 3 ай бұрын

Just wow. Such a simple explanation. ❤❤❤

@DesignWithArash 3 ай бұрын

Glad you liked it

@k15gg74 6 ай бұрын

Mad respect! Figma gonna update these variables soon. I'm waiting for your next video

@DesignWithArash 6 ай бұрын

Thanks. Sure.

@eliyasster 8 ай бұрын

I didn't have a choice but to subsribe :) Amazingly explained. Danke!!!

@DesignWithArash 8 ай бұрын

Welcome aboard! Thank you.

@olgakozlova1981 7 ай бұрын

Perfect Explanation! Thank you!

@DesignWithArash 7 ай бұрын

No problem.

@kishorekumar8216 6 ай бұрын

Thanks a lot Arash for explaining variables in an simple understandable manner, god bless you 💐👏

@DesignWithArash 5 ай бұрын

No problem. Thank you.

@fegorclintonb.3537 5 ай бұрын

Thank you brother, this was well presented and thought. I'm grateful 🙌✨

@DesignWithArash 4 ай бұрын

No problem. Glad it helped!

@Mandoovlog 16 күн бұрын

This is really helpful tutorial. Thank you Arash

@DesignWithArash 2 күн бұрын

My pleasure

@johnpaulachas5575 5 ай бұрын

this is so sick! thanks Arash ❤‍🔥

@DesignWithArash 4 ай бұрын

No problem.

@lateefabiodun2216 11 ай бұрын

Thanks for this tutorial, it's well explanatory

@DesignWithArash 11 ай бұрын

No problem.

@Oleksandr-snk 6 ай бұрын

Wow that is the best tutorial about variables!

@DesignWithArash 6 ай бұрын

Thanks. Glad it helped.

@rashikkenn8798 11 ай бұрын

Wonderful work

@turalpasayev5832 4 ай бұрын

Thanks a lot. You are the best educators which have clearest explanation which i know❤❤

@DesignWithArash 4 ай бұрын

You are very welcome. Thank you so much.

@anatganot6629 4 ай бұрын

Amazing tutorial!!! thank you so much!

@DesignWithArash 4 ай бұрын

No problem. Glad you liked it!!

@rehyanassasin 6 ай бұрын

Your explanation is very easy to understand, keep up, mate!

@DesignWithArash 5 ай бұрын

Thank you so much.

@alinashchebetun1000 2 ай бұрын

Thanks for such a great explanation!!

@DesignWithArash 2 ай бұрын

No problem. Thank you.

@thiagodmxtube 10 ай бұрын

Absolute golden content. Thanks!

@DesignWithArash 9 ай бұрын

Thank you.

@mortezaajidanpour9381 11 ай бұрын

This is how an expert would teach variables in a nutshell. Amazing work dear Arash ✌🏻😎

@DesignWithArash 11 ай бұрын

Thanks Morteza.

@farshadamirshoghi9323 11 ай бұрын

It's amazing feature, thankyou Arash

@DesignWithArash 11 ай бұрын

No problem.

@Programming-es5tp 9 ай бұрын

These variables are much better than styles we used to use before.

@DesignWithArash 9 ай бұрын

Yes.

@elazaryoo7521 8 ай бұрын

Thank you so much!!! it's really helpful to me! I love your video⭐

@DesignWithArash 8 ай бұрын

No problem. Glad it was helpful!

@Prithviraj-sj7op 7 ай бұрын

thanks aarsh your contents are so clear explaining than others keep doing

@DesignWithArash 6 ай бұрын

No problem. Glad you liked it.

@imranch999 10 ай бұрын

Great very simple and detailed explanation ❤

@DesignWithArash 9 ай бұрын

Glad you liked it!

@khobbyjunior1806 10 ай бұрын

I love this guy 🙌 Great Job

@DesignWithArash 10 ай бұрын

Thank you.

@Goose-wedding 23 күн бұрын

Thank you for your service!

@rominarezazadeh634 8 ай бұрын

Thanks arash for this awesome video. I was totally confused with them even when I watched figma KZfaq page 😂 this course was ace job done. Keep up the good work.☺️

@DesignWithArash 8 ай бұрын

No problem Romina. Glad you found it helpful.

@hibahasan9627 5 ай бұрын

so so so useful! really your video is more helpful than the Figma's official tutorials! Thanks so much :)

@DesignWithArash 5 ай бұрын

Thanks a lot.

@yukarikoyushito5525 9 ай бұрын

thanks you so much for this very detailed video, btw, the plugin is such a livesaver!

@DesignWithArash 8 ай бұрын

No problem. Glad it was helpful!

@abhisheksrivastava8341 Ай бұрын

Simply Awesome

@mochammadrizkiekowaluyo9256 11 ай бұрын

thanks for explanation! deserve more views.

@DesignWithArash 11 ай бұрын

No problem. Thanks.

@telagathotiveeraiah8805 10 ай бұрын

thanks, good explanation Arash

@DesignWithArash 10 ай бұрын

No problem.

@user-dk3lh9xo3g 5 ай бұрын

Hands-down man you deserve more ..

@DesignWithArash 4 ай бұрын

Thank you.

@tietienne82 8 ай бұрын

Such a good tutor: Thank you so much!

@DesignWithArash 8 ай бұрын

Thanks a lot.

@sethupathyj64 28 күн бұрын

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!

@usm4you 9 ай бұрын

Awesome 👏 wonderful job, very easy to learn from it. Thanks a lot for this video ❤

@DesignWithArash 9 ай бұрын

No problem. Glad you liked it.

@AbhishekKumar-wt6kn 8 ай бұрын

I really appreciate your effort, you explained it very well.

@DesignWithArash 8 ай бұрын

You are very welcome. Thank you so much.

@athulphilip8828 Ай бұрын

Great Video!

@hannatusaidubalarabe6319 11 ай бұрын

Arash makes design super easy

@DesignWithArash 11 ай бұрын

Glad to hear that.

@RahulKumar-sw9gg 2 ай бұрын

Thankyou so much for this awesome tutorial 🙏

@DesignWithArash 2 ай бұрын

No problem. Glad it was helpful!

@fajarhidayah187 6 ай бұрын

thank you so much, your lesson was very helpful.

@DesignWithArash 6 ай бұрын

No problem. Glad it helped.

@mrair8259 11 ай бұрын

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

@DesignWithArash 11 ай бұрын

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.