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

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ก.พ. 2025

ความคิดเห็น • 607

  • @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 ปีที่แล้ว +204

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

    • @DesignWithArash
      @DesignWithArash  ปีที่แล้ว +2

      Thank you so much.

    • @bagwellgaming3979
      @bagwellgaming3979 ปีที่แล้ว

      Indeed

    • @laracassardelia9178
      @laracassardelia9178 ปีที่แล้ว +1

      Agree! thanks so much!

    • @Joe-Ferris
      @Joe-Ferris 11 หลายเดือนก่อน +1

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

    • @sulaimandamilola
      @sulaimandamilola 9 หลายเดือนก่อน

      Agreed!

  • @samkapoor5529
    @samkapoor5529 ปีที่แล้ว +129

    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
      @DesignWithArash  ปีที่แล้ว +2

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

  • @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 TH-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 28 วันที่ผ่านมา

    This is literally and hands down the best variables tutorial I've seen on TH-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 :)

    • @DesignWithArash
      @DesignWithArash  ปีที่แล้ว

      Thank you very much. Glad you found it helpful.

  • @Samibravo832
    @Samibravo832 ปีที่แล้ว +2

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

    • @DesignWithArash
      @DesignWithArash  ปีที่แล้ว +1

      Thanks. Glad it helped. Welcome aboard.

  • @jsonastar3677
    @jsonastar3677 5 วันที่ผ่านมา

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

  • @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.

  • @arinakutai6136
    @arinakutai6136 ปีที่แล้ว +2

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

  • @KathBorup
    @KathBorup 2 หลายเดือนก่อน +1

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

  • @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 !!

  • @JinaaKarbasi
    @JinaaKarbasi 15 วันที่ผ่านมา

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

  • @ArifMahabub-pl2sh
    @ArifMahabub-pl2sh 9 หลายเดือนก่อน

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

  • @markhamilton8765
    @markhamilton8765 2 วันที่ผ่านมา

    Great tutorial! Very clear and extremely well presented. Thanks very much.

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

    • @DesignWithArash
      @DesignWithArash  ปีที่แล้ว

      Glad you enjoyed it! Thank you very much.

  • @mostafaabdolreza2829
    @mostafaabdolreza2829 19 วันที่ผ่านมา

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

  • @mortezaajidanpour9381
    @mortezaajidanpour9381 ปีที่แล้ว

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

  • @euginrobinson
    @euginrobinson ปีที่แล้ว

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

  • @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

  • @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

  • @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❤

  • @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.

  • @IRS320
    @IRS320 2 หลายเดือนก่อน

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

  • @illiavybornov
    @illiavybornov ปีที่แล้ว

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

  • @abdul-UIUX
    @abdul-UIUX 11 หลายเดือนก่อน

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

  • @josephczyz9824
    @josephczyz9824 ปีที่แล้ว

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

  • @nemocreativestudio
    @nemocreativestudio ปีที่แล้ว +1

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

  • @NicoleUXplorer
    @NicoleUXplorer ปีที่แล้ว

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

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

  • @dsouzaedson
    @dsouzaedson 4 หลายเดือนก่อน

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

  • @SrinisPhotography
    @SrinisPhotography 11 หลายเดือนก่อน

    One of the best video about Variables and Tokens on youtube

  • @jovenfabuloso
    @jovenfabuloso ปีที่แล้ว

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

    • @DesignWithArash
      @DesignWithArash  ปีที่แล้ว

      Thank you so much. Glad you found it helpful.

  • @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.

  • @alono4473
    @alono4473 ปีที่แล้ว +1

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

  • @Programming-es5tp
    @Programming-es5tp ปีที่แล้ว +1

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

  • @rominarezazadeh634
    @rominarezazadeh634 ปีที่แล้ว

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

    • @DesignWithArash
      @DesignWithArash  ปีที่แล้ว

      No problem Romina. Glad you found it helpful.

  • @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.

  • @shrutigee
    @shrutigee 2 หลายเดือนก่อน

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

  • @Nioudor
    @Nioudor ปีที่แล้ว

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

  • @juliasolnechnaya7468
    @juliasolnechnaya7468 ปีที่แล้ว

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

  • @michaelng1990
    @michaelng1990 ปีที่แล้ว +1

    love the way you present, so well organized and understandable

  • @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!

  • @sofianyyssonen828
    @sofianyyssonen828 ปีที่แล้ว

    Thanks

    • @DesignWithArash
      @DesignWithArash  ปีที่แล้ว

      Thank you so much for the Super Thanks.

  • @naufeevoice
    @naufeevoice ปีที่แล้ว

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

  • @hibahasan9627
    @hibahasan9627 ปีที่แล้ว

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

  • @furiusliber
    @furiusliber ปีที่แล้ว

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

  • @Kimtend0
    @Kimtend0 4 หลายเดือนก่อน

    Absolutely rocked this explanation. Very hyped about this

  • @syfyninjah
    @syfyninjah ปีที่แล้ว

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

    • @DesignWithArash
      @DesignWithArash  ปีที่แล้ว

      Thank you so much. Welcome to the channel.

  • @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!!!

    • @DesignWithArash
      @DesignWithArash  9 หลายเดือนก่อน

      No problem. Glad it helped!

  • @hibahasan9627
    @hibahasan9627 ปีที่แล้ว

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

  • @kishorekumarseenivasan
    @kishorekumarseenivasan ปีที่แล้ว

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

  • @Hamdan-u1d
    @Hamdan-u1d ปีที่แล้ว

    Best variable tutorial ever.
    Thank you so much Arash!

  • @Comewithme4446
    @Comewithme4446 2 หลายเดือนก่อน

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

  • @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

    • @DesignWithArash
      @DesignWithArash  9 หลายเดือนก่อน +1

      No problem. Glad it helped.

  • @zivariely
    @zivariely 3 หลายเดือนก่อน

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

  • @elinbonab
    @elinbonab ปีที่แล้ว +5

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

  • @sreyashinag4201
    @sreyashinag4201 2 หลายเดือนก่อน

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

  • @bharatht2514
    @bharatht2514 3 หลายเดือนก่อน

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

  • @MildLifeCrisis
    @MildLifeCrisis 8 หลายเดือนก่อน

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

  • @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.

  • @PrajwalNegii
    @PrajwalNegii ปีที่แล้ว

    Hands-down man you deserve more ..

  • @rehyanassasin
    @rehyanassasin ปีที่แล้ว

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

  • @hosseinbavafa216
    @hosseinbavafa216 หลายเดือนก่อน

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

  • @kevinorock
    @kevinorock 2 หลายเดือนก่อน

    Excellent tutorial! I love how you teach 🙂

  • @carolinanoir3260
    @carolinanoir3260 8 หลายเดือนก่อน

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

  • @Annika-c4v
    @Annika-c4v ปีที่แล้ว +1

    Wow, thanks for the tutorial. This was really well explained and helpful.
    One question: What other use cases besides localization would you use text variables for?

    • @DesignWithArash
      @DesignWithArash  ปีที่แล้ว

      No problem. Glad you liked it.
      It's quite useful for advanced prototyping. I'll create a video on that soon.

  • @AmeliaLeason
    @AmeliaLeason 2 หลายเดือนก่อน

    What an incredible tutorial. THANK YOU.

  • @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!

  • @k15gg74
    @k15gg74 ปีที่แล้ว

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

  • @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?

  • @mariabrunalopes
    @mariabrunalopes 11 หลายเดือนก่อน

    Omg, this class is just amazing. Thank you!

    • @DesignWithArash
      @DesignWithArash  11 หลายเดือนก่อน

      No problem. Glad you liked it.

  • @subhrobikashdas6944
    @subhrobikashdas6944 ปีที่แล้ว

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

  • @Prithviraj-sj7op
    @Prithviraj-sj7op ปีที่แล้ว

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

  • @yogesh459
    @yogesh459 ปีที่แล้ว

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

  • @Oleksandr-snk
    @Oleksandr-snk ปีที่แล้ว

    Wow that is the best tutorial about variables!

  • @oartsoares
    @oartsoares ปีที่แล้ว

    What a great video dude!!
    Greetings from Brazil.

  • @murunwamasibigiri5799
    @murunwamasibigiri5799 ปีที่แล้ว

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

  • @mrair8259
    @mrair8259 ปีที่แล้ว +2

    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
      @DesignWithArash  ปีที่แล้ว +2

      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.

  • @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

  • @mochammadrizkiekowaluyo9256
    @mochammadrizkiekowaluyo9256 ปีที่แล้ว

    thanks for explanation! deserve more views.

  • @alexching1914
    @alexching1914 ปีที่แล้ว

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

  • @fegorclintonb.3537
    @fegorclintonb.3537 ปีที่แล้ว

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

  • @exodusdesign5047
    @exodusdesign5047 8 หลายเดือนก่อน

    Brilliant stuff !! Arsh really helpful, But my question regarding variables and tokens is it needed for a small informative website?

  • @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 :/

  • @hannatusaidubalarabe6319
    @hannatusaidubalarabe6319 ปีที่แล้ว

    Arash makes design super easy

  • @analinalino
    @analinalino 7 หลายเดือนก่อน

    Bro, this video is insane, thank you so much

    • @DesignWithArash
      @DesignWithArash  7 หลายเดือนก่อน

      No problem. Glad you liked it!

  • @yukarikoyushito5525
    @yukarikoyushito5525 ปีที่แล้ว

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

  • @heznadastudios
    @heznadastudios ปีที่แล้ว

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

  • @aaftabkhan1051
    @aaftabkhan1051 4 หลายเดือนก่อน

    Very well explained Arash

  • @tivenk
    @tivenk 8 หลายเดือนก่อน

    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.

  • @nandalopesalves
    @nandalopesalves 7 หลายเดือนก่อน

    Increadible! Thank you for this amazing class!

  • @eliyasster
    @eliyasster ปีที่แล้ว

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

  • @tehreemfatima7850
    @tehreemfatima7850 4 หลายเดือนก่อน

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

  • @yoshithakuntumalla7614
    @yoshithakuntumalla7614 10 หลายเดือนก่อน

    Just wow. Such a simple explanation. ❤❤❤

  • @DubbelDutch1
    @DubbelDutch1 ปีที่แล้ว

    Excellent and explained is the best way. Thanks Arash!