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

Поділитися
Вставка
  • Опубліковано 29 січ 2025

КОМЕНТАРІ • 606

  • @DesignWithArash
    @DesignWithArash  Рік тому +21

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

    • @abzkilla9411
      @abzkilla9411 Рік тому

      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
      @CARMARCUSO Рік тому

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

  • @urbuffbaby4438
    @urbuffbaby4438 Рік тому +203

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

  • @samkapoor5529
    @samkapoor5529 Рік тому +127

    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.

  • @domenicobuonocore1502
    @domenicobuonocore1502 Рік тому +11

    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.

  • @princhipehdesigns5922
    @princhipehdesigns5922 Рік тому +29

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

    • @DesignWithArash
      @DesignWithArash  Рік тому +3

      Thank you so much. Glad it helped.

    • @minerva646
      @minerva646 Рік тому

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

  • @binatitus6518
    @binatitus6518 Рік тому +15

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

  • @Ajoke-h6s
    @Ajoke-h6s 25 днів тому

    This is literally and hands down the best variables tutorial I've seen on UA-cam. I had been running mad looking for the very basics and how it works and this was my "Ah! That's it." moment. Thank you so so much for this video.

  • @JobyVarghese-y7m
    @JobyVarghese-y7m Рік тому +7

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

  • @Samibravo832
    @Samibravo832 Рік тому +2

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

  • @nathong3229
    @nathong3229 10 місяців тому +2

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

    • @DesignWithArash
      @DesignWithArash  10 місяців тому +1

      Glad to hear that. Thank you so much.

  • @KathBorup
    @KathBorup 2 місяці тому +1

    I get the feeling Arash's tutorials are the tutorials other teachers watch before they create theirs! 😂
    The best! 🙏

  • @jsonastar3677
    @jsonastar3677 2 дні тому

    Short but easy to understand. It's so clear! Cool work!

  • @arinakutai6136
    @arinakutai6136 Рік тому +2

    This video is pure treasure to all confused souls lost in the realms of figma

  • @sethupathyj64
    @sethupathyj64 8 місяців тому +1

    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!

  • @diogofigueira5236
    @diogofigueira5236 Рік тому +1

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

  • @mostafaabdolreza2829
    @mostafaabdolreza2829 16 днів тому

    by far....you can magically teach anything that is incomprehensible

  • @fexgib2842
    @fexgib2842 4 місяці тому

    This is the most best tutorial videos about variables very clear instructions, step by steps process and easy to understand the terms and techniques.

  • @marceloalmeida2268
    @marceloalmeida2268 2 місяці тому

    Cara, que vídeo sensacional, muito completo e bem explicado, não havia entendido até agora como funcionavam as variáveis e como usar na prática. Obrigado pelo conteúdo!

  • @JinaaKarbasi
    @JinaaKarbasi 12 днів тому

    Thank you, actually you teach variable better than the Figma tutorial. You're the best.

  • @juliasolnechnaya7468
    @juliasolnechnaya7468 Рік тому

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

  • @shrutigee
    @shrutigee 2 місяці тому

    Agree with everyone, really well explained, pace was perfect! Thank you so much 🙏🏽

  • @AshishMishra-cm1bi
    @AshishMishra-cm1bi Рік тому +3

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

  • @elnaznikbin
    @elnaznikbin Рік тому +1

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

    • @DesignWithArash
      @DesignWithArash  Рік тому

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

  • @jovenfabuloso
    @jovenfabuloso Рік тому

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

  • @sofianyyssonen828
    @sofianyyssonen828 Рік тому

    Thanks

  • @shrutipatil3827
    @shrutipatil3827 Рік тому +1

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

  • @johanguams6619
    @johanguams6619 8 місяців тому

    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

  • @RiLemios
    @RiLemios Рік тому

    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

  • @ArifMahabub-pl2sh
    @ArifMahabub-pl2sh 8 місяців тому

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

  • @abdul-UIUX
    @abdul-UIUX 11 місяців тому

    Kudos, for the best UA-cam tutorial I have ever seen on Figma Variables.🤩

  • @NicoleUXplorer
    @NicoleUXplorer Рік тому

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

  • @jeremiahharemza1235
    @jeremiahharemza1235 Рік тому

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

  • @euginrobinson
    @euginrobinson Рік тому

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

  • @mortezaajidanpour9381
    @mortezaajidanpour9381 Рік тому

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

  • @dsouzaedson
    @dsouzaedson 4 місяці тому

    Amazing video. You explained the variable concept in easy to understand form. Thank you Arash

  • @josephczyz9824
    @josephczyz9824 Рік тому

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

  • @rominarezazadeh634
    @rominarezazadeh634 Рік тому

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

  • @davidpicarazzi
    @davidpicarazzi 10 місяців тому +2

    Would it make sense to turn off ‘Show in all supported properties’ for your primitive colours once you make them so that they don’t appear anywhere, forcing you to create semantic colours?

  • @illiavybornov
    @illiavybornov Рік тому

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

  • @Nioudor
    @Nioudor Рік тому

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

  • @kishorekumarseenivasan
    @kishorekumarseenivasan Рік тому

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

  • @IRS320
    @IRS320 2 місяці тому

    I'm 4 mins in and this has been super helpful so far, thank you!

  • @michaelng1990
    @michaelng1990 Рік тому +1

    love the way you present, so well organized and understandable

  • @nemocreativestudio
    @nemocreativestudio Рік тому +1

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

  • @sreyashinag4201
    @sreyashinag4201 Місяць тому

    I'm finally cleared on the variables and its usage. Thanks a ton

  • @alono4473
    @alono4473 Рік тому +1

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

  • @SrinisPhotography
    @SrinisPhotography 11 місяців тому

    One of the best video about Variables and Tokens on youtube

  • @furiusliber
    @furiusliber Рік тому

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

  • @zivariely
    @zivariely 2 місяці тому

    This was super clear and very well explained. Thank you for sharing!

  • @arro665
    @arro665 Рік тому

    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.

  • @Kimtend0
    @Kimtend0 4 місяці тому

    Absolutely rocked this explanation. Very hyped about this

  • @Programming-es5tp
    @Programming-es5tp Рік тому +1

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

  • @Comewithme4446
    @Comewithme4446 2 місяці тому

    This should be a hit! Thank you very much.♥

  • @bharatht2514
    @bharatht2514 3 місяці тому

    Such educational, valuable content. Thank you so much, arash!

  • @kevinorock
    @kevinorock 2 місяці тому

    Excellent tutorial! I love how you teach 🙂

  • @turalpasayev5832
    @turalpasayev5832 11 місяців тому

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

    • @DesignWithArash
      @DesignWithArash  11 місяців тому

      You are very welcome. Thank you so much.

  • @Hamdan-u1d
    @Hamdan-u1d Рік тому

    Best variable tutorial ever.
    Thank you so much Arash!

  • @jasongoldstein5189
    @jasongoldstein5189 Місяць тому

    I got a lot out of this. It is way more useful than Figma's official video on this.

  • @jedi8533
    @jedi8533 9 місяців тому

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

  • @naufeevoice
    @naufeevoice Рік тому

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

  • @hosseinbavafa216
    @hosseinbavafa216 Місяць тому

    this video opened a new door to designing for me 😍😂

  • @nicolotommasi4811
    @nicolotommasi4811 11 місяців тому

    thank you so much for this video: especially for the slow paced explanation and for the total lack of music, which usually only annoys and deconcentrates me.

    • @DesignWithArash
      @DesignWithArash  11 місяців тому

      You are very welcome. Glad you enjoyed it!

  • @MildLifeCrisis
    @MildLifeCrisis 8 місяців тому

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

  • @rehyanassasin
    @rehyanassasin Рік тому

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

  • @syfyninjah
    @syfyninjah Рік тому

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

  • @harmanabiwardani5568
    @harmanabiwardani5568 Рік тому +1

    29:35 i think it's not "how", but "why"?
    other than gradients, is there any practical example of using both variables & color styles together?

  • @hibahasan9627
    @hibahasan9627 Рік тому

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

  • @hibahasan9627
    @hibahasan9627 Рік тому

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

  • @AmeliaLeason
    @AmeliaLeason 2 місяці тому

    What an incredible tutorial. THANK YOU.

  • @timurislakaev-uiuxwebdesign
    @timurislakaev-uiuxwebdesign 9 місяців тому

    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

  • @elinbonab
    @elinbonab Рік тому +5

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

  • @Prithviraj-sj7op
    @Prithviraj-sj7op Рік тому

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

  • @carolinanoir3260
    @carolinanoir3260 7 місяців тому

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

  • @CParsow
    @CParsow 10 місяців тому +1

    Hey Arash.
    Love your content and way you are explaining things. I have a big problem in my design system you maybe can help with. I have two collections with colors in my variables, but it only shows one of them in "Layer - Local Variables" button. I have tried a lot of different things, and watch so many youtube videos, but nothing change :/

  • @yogesh459
    @yogesh459 Рік тому

    Your teaching style is so awesome, Thanks Brother (Love from india)

  • @fegorclintonb.3537
    @fegorclintonb.3537 Рік тому

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

  • @mariabrunalopes
    @mariabrunalopes 11 місяців тому

    Omg, this class is just amazing. Thank you!

  • @subhrobikashdas6944
    @subhrobikashdas6944 Рік тому

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

  • @Zoe-qs7uo
    @Zoe-qs7uo Рік тому

    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

  • @k15gg74
    @k15gg74 Рік тому

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

  • @PrajwalNegii
    @PrajwalNegii Рік тому

    Hands-down man you deserve more ..

  • @HeidiMerscher
    @HeidiMerscher Рік тому

    Excellent Tutorials, Thank You Arash!

  • @nandalopesalves
    @nandalopesalves 7 місяців тому

    Increadible! Thank you for this amazing class!

  • @yoshithakuntumalla7614
    @yoshithakuntumalla7614 10 місяців тому

    Just wow. Such a simple explanation. ❤❤❤

  • @heznadastudios
    @heznadastudios Рік тому

    This is simply firefull man. You made it simplier. God’s blessings

  • @tehreemfatima7850
    @tehreemfatima7850 3 місяці тому

    Hi, Arash. Could you please elaborate that what's the benefit of linking color styles to variables, and why and where are they used?

  • @tivenk
    @tivenk 7 місяців тому

    Thank you for the video. It provided very useful information. I just downloaded the file and followed the steps. The color styles in my opinion are now redundant, except for the gradients.

  • @mochammadrizkiekowaluyo9256

    thanks for explanation! deserve more views.

  • @Pahadi_Culture1
    @Pahadi_Culture1 Рік тому

    The way you explained that was amazing

  • @Mandoovlog
    @Mandoovlog 7 місяців тому

    This is really helpful tutorial. Thank you Arash

  • @hodamira80
    @hodamira80 8 місяців тому

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

  • @thaole-cv6qb
    @thaole-cv6qb 8 місяців тому

    On 4:02 did you use any shortcut key or any way to rename all the color variables too quickly?

  • @Joe-Ferris
    @Joe-Ferris 10 місяців тому

    Question, what if you have instances where there's an outline version of a button, and the colors of the font and button outline will always be the same as the primary button background. Would you create additional tokens for the label and outline or use the primary button background token?

  • @aaftabkhan1051
    @aaftabkhan1051 4 місяці тому

    Very well explained Arash

  • @oartsoares
    @oartsoares Рік тому

    What a great video dude!!
    Greetings from Brazil.

  • @alexching1914
    @alexching1914 Рік тому

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

  • @arifyilmaz3297
    @arifyilmaz3297 Рік тому

    Hi, how can I create a color palette that you have used in your work? What do values such as 50-100-200-300 mean?

  • @murunwamasibigiri5799
    @murunwamasibigiri5799 Рік тому

    You are absolulty amazing thank you so much.. your tutorials are the best.

  • @Oleksandr-snk
    @Oleksandr-snk Рік тому

    Wow that is the best tutorial about variables!

  • @funwave7748
    @funwave7748 Рік тому

    Thank you buddy. It is one of the best tutorial on Variable and tokens ever me🥰😍🥰😍🥰😍