Master Figma Variants | The Complete Guide (2024)

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

КОМЕНТАРІ • 377

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

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

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

      i am yuose faigma 🧐

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

      Arash - I'm going to purchase this today for my team, are you the instructor on all the videos? Because I think you're great. 🙂

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

      @@RebeccaPerryLasVegas That’s so nice of you. Yes, I am.

  • @maduokafor
    @maduokafor Місяць тому +3

    I rank this as one of the best tutorial because of the patience you have to explain every step and their purposes. Thank you. You just earned a subscription!

  • @rmalsen3052
    @rmalsen3052 2 роки тому +57

    Thank you for not being so hyper but explaining it in a calm manner, and also explaining what you do! And thank god for no music. I'll give you a like and a positive comment :)

    • @DesignWithArash
      @DesignWithArash  2 роки тому +2

      Thank you so much. I’m glad you enjoyed it. Thanks for the positive feedback.😊

  • @michb6074
    @michb6074 2 роки тому +6

    The best tutorial on UA-cam. Some people move their mouse cursor faster than speech or vice versa. 70% of people don't communicate well. Knowing is one thing and teaching is another.
    Thanks for teaching on here. 🙌

    • @DesignWithArash
      @DesignWithArash  2 роки тому

      Thank you very much. It's so kind of you. Glad you liked my content.

  • @CJSDelaCruz
    @CJSDelaCruz День тому

    Man, this is such a crystal clear explanation. Better than what Figma has. Very friendly to different levels of users. Highly Recommended Figma instructor!!

  • @exegesis67
    @exegesis67 Рік тому +62

    This is probably the clearest, most straightforward explainer I’ve watched for figma but still gives you everything you need to know. Great job.

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

      Thank you so much. Glad it helped.

    • @fate-k9j
      @fate-k9j 7 місяців тому

      ​@@DesignWithArash HI CAN YOU MAKE A VIDEO SHOW THAT FIGMA CAAN BE USED TO MAKE MONEY

  • @sakibrahman8225
    @sakibrahman8225 2 роки тому +16

    Hi, Arash; good to see you here. I have completed your entire course on both Figma and Webflow. That was great, learned a lot from you. I hope on this channel, you will update us on the latest features that have already come or will come in the future.

    • @DesignWithArash
      @DesignWithArash  2 роки тому +2

      Hi Sakib,
      Thank you so much for your comment. I'm glad you found my courses helpful. I hope you enjoy the content of this channel as well.

    • @michb6074
      @michb6074 2 роки тому

      Where can i find WebFlow tutorial?

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

    I subscribed earlier coz I didn’t want to lose your account… you are the best…you literally take a topic and teach it really extensively…Thank you so much, You’re the BESTTTTT

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

    Thanks!

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

    I’ve been watching so many videos for variant. I could say this is definitely the clearest tutorial for variant I’ve watched. Thanks a lot.

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

    Thanks!

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

    You're really good at what you do! This was laid out calmly and logically, and I feel way more confident now. All the best on your work!

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

    Dude thank you so much for explaining this in a clear, concise way! You just earned yourself another follower! Cheers from Denver brother
    !

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

    Arash is the only guy on youtube UI/UX sphere I can learn from and understand. We have the same "frequency" of teaching / learning dynamic. I like exploring and branching out learning. Basically quality of a lesson can be determined whether you're looking for another video on the topic after watching one video or not. Arash doesn't leave stone unturned.

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

    Thanks!

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

    this is the best tutorial for someone who is new to figma that i've watched so far. concise, precise, well explained. auto-subscribed.

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

    just binge watched your videos, you helped me so much! thank you!!

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

    You make the learning process much productive because of the way you presenting the information. Not any unbearable accents, overactings but simply always to the point. Thank you so much for the amazing effort you put here to make sure that everyone would be able to get the best out of it. ❤

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

      Thank you so much. It's so nice of you. Glad you liked it.

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

    I discovered today your tutorials and they are truly amazing ! I discovered a lot of things I never saw on other youtube channels. It is now very clear ! Thank you so much !!

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

    You're probably one of the best tutorial makers I've watched, and I've watched a lot 😊 Your way of explaining is so clear and understandable!

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

    Completely loved it! And I want to see more about animating components. Do you have another video continuing this? I enjoy your way of teaching and as many say, you are a true teacher.

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

      Thank you so much. I suggest you see the videos regarding animations and prototyping on my channel.

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

      I totally will! Thank you so much. Your videos are the best. 😊❤ Cheers from Alicante, Spain. 👋

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

    Thanks for covering both the design and prototype aspects of variants! 😀

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

    The most excellent explanation about Variants and propieties, even the official figma tutorial about this don`t explain with this clarity. So, I`m glad to find this video and congrats because this awsome contribution.

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

      Thank you very much. I'm glad you found it helpful.

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

    What a wonderful video! It definitely deserves to be described as 'the complete guide', I cannot imagine it being done any better,

  • @victoriamaldonadopasten1685
    @victoriamaldonadopasten1685 5 місяців тому

    Not only am I learning Figma, but I'm also practicing English listening without subtitles because you speak so well and clearly. I love it.

  • @promiseigbosonu1455
    @promiseigbosonu1455 5 місяців тому

    Subscribed to a course wasnt flowing with it but watching this? The manner you took out time to gently point at every drawing tool is marvelous.. now I can completely say I have a good understanding of this.. off to practice it

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

    Big thumbs up for you🎉. Thank you for letting me understand this. I love the way you took your time to explain as well

  • @jaiadityasethi2096
    @jaiadityasethi2096 6 місяців тому

    Your explanations were very crisp and easy to understand. I struggled with component properties a bit, this helped me out a lot. Thanks!

  • @Kj-gr9fv
    @Kj-gr9fv 8 місяців тому

    The update with the icon library as separate components is great! I have a full system of buttons and have been wanting a solution for an easy way to update the icon without starting over and this will be perfect. Thank you so much!

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

    Arash, you have been so helpful in many ways with your videos. Thank you so much for the seemless presentation!

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

    Well explained! OMG! I was trying to refresh my Figma skills and I stumbled upon this video. Keep it up! 👏

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

    This is the best tutorial I have found after looking for something like this for a few months omg thanks

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

    You made it vert easy more than any other tutor here on youtube, Thank you so much

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

    The best video have watched so far, no music no noise just easy explanation

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

    Thank u very much! Your video is really helpful, i understand everything cz you make it all in practice. God bless you

  • @user-ma1so2ns12on
    @user-ma1so2ns12on 10 місяців тому

    I think this video clip is the best video of the lectures. I have been just understood the variants concept by this lecture video. thank you for the teaching video.

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

    Thank you so much.I have been studing UI by myself but I have many question & problem because I do not have oportunity to take courses.I found you by chance & you solve my long term problem.Thanks alot

  • @mahsa4244
    @mahsa4244 6 місяців тому

    Arash you did a great job explaining variants😍
    I understood everything i needed
    Thanks a lot❤

  • @solar.elixir
    @solar.elixir 2 роки тому +1

    Video quality and all the steps in scenario including the animation are awesome. Thank u!

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

    Thank you very much for this video! I finally mastered the properties and now I can freely create two-dimensional variants.

  • @flima.visuals
    @flima.visuals Рік тому

    Best Figma tutorial maker of the planet! Thanks Arash! Love from Brazil

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

    Arash, thanks to your help I have been able to understand this software in more detail. I have purchased your Figma course on Udemy also and I am finding it easy to understand, well-explained and fun.
    Thank you so much for your help. Keep up the good work.

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

      You are welcome! I’m glad you found my Figma course helpful. Thank you so much.

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

    Really helpful, Arash. Very simple and easiest way to create a variant. This video has cleared all my doubts. Thank you bruh

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

    Finally a perfectly explained video for buttons and components! :D thank you. Subscribed!

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

    Hi Arash! You are teaching perfectly well! All your videos are adorable! Good Job.😍🥰😇

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

    Arash, you are an amazing teacher. I am a teacher myself (of English) and I can see you have a gift, man! Thanks for that!

  • @Miraki8238
    @Miraki8238 2 роки тому

    Literally the best video on figma variants on UA-cam.

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

    You have explained it in a clear way. Thanks 👍

  • @sofia.koletzaki
    @sofia.koletzaki Рік тому

    You are amazing. Your videos are so valuable. I truly thank you so much 💓

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

    Excellent video men, I appreciate it so much! It was very helpful (Most, if you're a beginner)

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

    This was the first video where I understood, even though I watched a few. Thank you very much

  • @juderohith9901
    @juderohith9901 2 роки тому

    Thanks a lot for explaining it very well Arash, I was finding it difficult to make my filter chips interactive, this helped me so much, thanks a ton.

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

    Thanks a ton Arash ! You made me to look figma easier. I have never seen this kind of precise explanation from anyone.

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

    Finally! someone explains Variants step by step

  • @rakeshghimire944
    @rakeshghimire944 2 роки тому +1

    You teach so well you should upload more of these types of videos. You'll definitely earn many subscribers.

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

    clean and clear explanation in calm manner all the time...

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

    Really clearly explained, so easy to follow. Thank you!

  • @Design.DepotGLA
    @Design.DepotGLA Рік тому

    One of the most easy to follow Figma tutorials. Cheers!

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

    Hi, thank you for sharing such wonderful content. I thoroughly enjoy your tutorials and appreciate the calm and detailed explanations you provide. Please keep going, and continue creating more tutorials. Good luck!

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

    Thanks for a great video. Is it possible in Figma to make a create checkboxes that will make a button be disabled or enabled perhaps using variants?

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

      No problem. Yes, it is possible. I will make a video about that.

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

      @@DesignWithArash I have the same question

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

    Thanks, Arash!! This tutorial is pure gold

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

    great tutorial. I'm new to Figma, coming in from Adobe XD. Very comprehensive, thank you so much.

  • @karthikeyana35
    @karthikeyana35 2 роки тому

    This is gold Arash. Wish you put more content like this which will help others understand easy

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

    Fantastic Figma videos...Love the fact that you should show best practices and explain what you are doing as you do.. Keep doing what you are doing...it's pretty much perfect....and I don't say that often. PS. I subscribed.

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

      Thank you so much. Glad you found it helpful. Welcome aboard.

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

    Thanks so much that was perfect and really useful 👏🏼

  • @raku.aladdin
    @raku.aladdin 2 роки тому

    After watching many videos this video solve my problems. Thanks brother keep uploading this type of content more.

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

    真的很有帮助 tks for everything mate

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

    the best! I’ve been searching for this exact video

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

    This is so straightforward and helpful. Thank you, Arash.

  • @ece_öner
    @ece_öner 11 місяців тому

    amazing, so clear, best figma class on youtube

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

    Learning lot from your tutorials. Keep it up your good work!

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

    Thanks for this video, it really helped me a lot after so complicated explanations.

  • @KrutiVora-l7x
    @KrutiVora-l7x Рік тому

    Amazing video! Well explained 🙌🏼

  • @behnammemar1180
    @behnammemar1180 2 роки тому

    Hi Arash your content is so perfect and your channel is usable for learning Figma and practising a listening skills for the language😉

    • @DesignWithArash
      @DesignWithArash  2 роки тому

      Hi Behnam. Thanks a lot. Glad you found the channel helpful.😉

  • @MAwaisSEO
    @MAwaisSEO 5 місяців тому

    Thanks for making it SO SIMPLE ❤

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

    Hi Arash, thank you so much for the clear tutorial! One question... I know that you had home + icon into a variant of the main "home" button component. What if the text was different, for instance Sign up and Sign in. Would I need to make Sign up and Sign up into separate components with their respective variants that shows different modes of interaction (hover/pressed etc). Hope that question makes sense haha

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

    This video is great. I was able to follow and create all the elements. However, when I pressed Play, I did not get the same results. I saw a frame of the iPhone for some reason and no buttons there. Or if there was a button it was not interactive at all. Suggestions?

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

    Hi
    Awesome
    I have a question
    Sometimes we set colors for background and foreground in variables.
    I know about the background, but in which places and elements should we use the foreground colors that we made in the variables?

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

    Awesome way to explain! Thanks for posting such an informative video. Really helped to clear my concepts a lot. Also would like to see how to animate radio buttons.

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

    thank you for making the video it's very helpful full and you are very easily explaining the process

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

    The best tutorial on the subject, many thanks!

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

    Thanks man your videos are really interesting and informative!

  • @marcelo-larrosa
    @marcelo-larrosa 11 місяців тому

    My favourite explanation so far.

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

    Good and Neat Explanation👏👏👏

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

    Thank you for going step by step very slowly

  • @Hi-heyu
    @Hi-heyu 7 місяців тому

    It's really really useful for me. Thank you a lot. ♥

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

    Thanks so much, this was way easier to follow than the official Figma content

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

    Phenomenal instructor, never ever had one before

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

    What a fantastic tutorial! Thank you!

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

    How about we use the “swap instance” feature instead of that “icon” property you created at the end? Will that work too?

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

      Yes, it would. In fact, it's better to do that that's why I mentioned in the video that if you want to change the icon it's better not to use variants and use the other component properties instead.

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

    Thank you, I'm grateful to have found this video.

  • @AlishaNayak123-i8k
    @AlishaNayak123-i8k Рік тому

    This was helpful thank you ❤

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

    Again great video! Finally had a chance to go back and watch it again and follow along with it in Figma. The only problem I had was getting the animation to work. When ever I hovered over the button it would disappear completely (vanish).
    Made sure I created the animations for the "Enabled" button in the Component List without icons, and made sure that the animations was using "While hovering" "Changed to" "Hovered" state and 'Smart Animation" (300ms).
    Not sure why the button is disappearing on Hover? Any thoughts?
    Tried this on the local app and on the web version same issue. Maybe a bug in Figma?
    Also should mention that I'm using the Free version.

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

      Thanks. That’s strange. Could you please create the buttons from scratch and this time only create two states for it not more.

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

    Really Great tutorial..Thanx

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

    Wow your camera is so crisp! what is it?

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

    thank youuu Arash!!

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

    Hi Arash! Thank you for this amazing tutorial, it is helping me a lot to understand figma. I have one question from the prototype section. My onClick state isn't working with hovering at a time. While testing it is saying " this interaction will not be triggered as another will be triggered first ". Please reply! Thank you

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

      Hi. No problem.
      You should just connect the default to hover and then connect the hover to onClick. It will work then.

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

    Hi arash can you please explain how to create the calendar in variants in application

  • @shresthasil
    @shresthasil 6 місяців тому

    Great video....totally understood 😊

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

    It’s just amazing 😊