Master Figma Variants | The Complete Guide (2024)

Подписаться 115 тыс.

Просмотров 160 тыс.

50% 1

In this video, I'm going to show you how to use Figma Variants and Interactive Components efficiently and let you know when you should use and not use them in your projects.
Try Figma for free:
bit.ly/3LiRVEF
👉 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.

Опубликовано:

9 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 321

@DesignWithArash Год назад

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

@khanone3829 28 дней назад

i am yuose faigma 🧐

@exegesis67 6 месяцев назад

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 5 месяцев назад

Thank you so much. Glad it helped.

@Kj-gr9fv Час назад

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!

@rmalsen3052 Год назад

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 Год назад

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

@christinagillam7365 7 месяцев назад

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!

@DesignWithArash 7 месяцев назад

Thank you so much. Glad you liked it.

@joyhappiness26 Год назад

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

@DesignWithArash Год назад

No problem. Glad you liked the channel.

@sakibrahman8225 Год назад

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 Год назад

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 Год назад

Where can i find WebFlow tutorial?

@Georgelikestodesign 11 месяцев назад

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

@DesignWithArash 11 месяцев назад

No problem. Welcome aboard!

@khyerinkim 4 месяца назад

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.

@DesignWithArash 3 месяца назад

No problem. Glad you found it helpful.

@poncardas 8 месяцев назад

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

@leilagoles Год назад

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!

@DesignWithArash Год назад

Hi. Thank you. Glad you enjoyed my content.

@yuting386 Год назад

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

@DesignWithArash Год назад

No problem. Glad it helped.

@IZKOTECH 10 дней назад

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

@kynx_designs Год назад

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

@DesignWithArash Год назад

Thank you so much. Welcome to the channel.

@user-td4wu2ge1z Год назад

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

@DesignWithArash Год назад

Glad you liked it!

@onr5196 7 месяцев назад

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

@DesignWithArash 6 месяцев назад

Thank you. Glad you liked it.

@michb6074 Год назад

The best tutorial on RU-vid. 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 Год назад

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

@sharikapathirana 2 месяца назад

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 2 месяца назад

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

@idgyek Месяц назад

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

@anandravi2028 Год назад

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

@DesignWithArash Год назад

You are most welcome. Glad you found it helpful.

@gianlucacaredda5202 Год назад

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 Год назад

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

@juderohith9901 Год назад

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.

@DesignWithArash Год назад

Glad it helped!

@dobelem 6 месяцев назад

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 6 месяцев назад

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

@karthikeyana35 Год назад

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

@DesignWithArash Год назад

Thank you so much. Glad it was helpful.

@jetmartin9501 Год назад

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 Год назад

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

@cjohnny2802 9 месяцев назад

真的很有帮助 tks for everything mate

@DesignWithArash 9 месяцев назад

No problem.

@masterloot 10 месяцев назад

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.

@DesignWithArash 10 месяцев назад

Thank you very much. So glad to hear that.

@jimmaccormaic6689 5 месяцев назад

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

@DesignWithArash 4 месяца назад

Thank you so much.

@mariamhambardzumyan8134 11 месяцев назад

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

@DesignWithArash 11 месяцев назад

No problem. Glad you found it helpful.

@mihiriprabashwari8031 Год назад

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

@DesignWithArash Год назад

Thank you.

@simonsd6066 Год назад

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

@DesignWithArash Год назад

Thanks.

@uix_mo Год назад

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

@DesignWithArash Год назад

Thank you. Glad it helped.

@astoncheguevara4034 9 месяцев назад

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

@DesignWithArash 9 месяцев назад

No problem. Thank you so much.

@oggy_997 Год назад

Thanks man your videos are really interesting and informative!

@DesignWithArash Год назад

Glad you liked them!

@sketchybears 7 месяцев назад

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

@DesignWithArash 6 месяцев назад

No problem.

@DubbelDutch1 Год назад

The best tutorial on the subject, many thanks!

@DesignWithArash Год назад

Thank you so much.

@user-hs9sh7gi6f 11 месяцев назад

Amazing video! Well explained 🙌🏼

@DesignWithArash 11 месяцев назад

Glad you liked it!

@yutubsanyaa 7 месяцев назад

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

@DesignWithArash 7 месяцев назад

No problem. Glad it helped.

@farwakazmi7388 19 дней назад

Phenomenal instructor, never ever had one before

@misso5514 12 дней назад

So useful. Thank you! 😊

@aaftabkhan1051 8 месяцев назад

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

@DesignWithArash 7 месяцев назад

Glad to hear that. No problem.

@michaeldavis4483 Год назад

Awesome class. Complicated subject to simplify. Thumbs up, yes.

@DesignWithArash Год назад

Thank you.

@hamidhanif1447 9 месяцев назад

Thanks so much that was perfect and really useful 👏🏼

@DesignWithArash 9 месяцев назад

No problem. Glad it was helpful!

@sofia.koletzaki 7 месяцев назад

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

@DesignWithArash 6 месяцев назад

Glad you like them! Thank you.

@sadafzahirshah3905 4 месяца назад

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

@DesignWithArash 3 месяца назад

Glad it helped! Thanks.

@subhrobikashdas6944 10 месяцев назад

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.

@DesignWithArash 10 месяцев назад

No problem. Thanks.

@dagspk 19 дней назад

Amazing class right here

@behnammemar1180 Год назад

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

@DesignWithArash Год назад

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

@danielandriytw 11 месяцев назад

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

@DesignWithArash 11 месяцев назад

Glad you liked it!

@eceoner6765 3 месяца назад

amazing, so clear, best figma class on youtube

@DesignWithArash 3 месяца назад

Thank you.

@vkstory7375 Год назад

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

@DesignWithArash Год назад

No problem. Glad it helped.

@Bhuvana2020 5 месяцев назад

What a fantastic tutorial! Thank you!

@DesignWithArash 5 месяцев назад

No problem.

@lachocolatada 3 месяца назад

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 3 месяца назад

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

@lachocolatada 3 месяца назад

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

@EiasTasmeemSyria 11 месяцев назад

It’s just amazing 😊

@DesignWithArash 11 месяцев назад

Thank you.

@daferichards 5 месяцев назад

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

@DesignWithArash 4 месяца назад

No problem. Glad it was helpful!

@rogersegu1053 4 месяца назад

Thanks, Arash!! This tutorial is pure gold

@DesignWithArash 4 месяца назад

Glad you liked it

@flima.visuals 6 месяцев назад

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

@DesignWithArash 5 месяцев назад

Thank you so much. Glad it helped.

@raku.aladdin Год назад

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

@DesignWithArash Год назад

Glad to hear that.

@Miraki8238 Год назад

Literally the best video on figma variants on RU-vid.

@DesignWithArash Год назад

Thanks a lot. Glad you think so.

@Mason-2012 2 месяца назад

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.

@DesignWithArash 2 месяца назад

Glad it was helpful.

@maherjaloudi7560 10 месяцев назад

Finally! someone explains Variants step by step

@DesignWithArash 9 месяцев назад

Thanks.

@AlishaNayakCSE 7 месяцев назад

This was helpful thank you ❤

@DesignWithArash 7 месяцев назад

Glad it helped. No problem.

@favourani8287 12 дней назад

Thank you so much for this video

@rajasubburaman2635 10 месяцев назад

Good and Neat Explanation👏👏👏

@DesignWithArash 10 месяцев назад

Thank you.

@user-sv7tb7em7f 3 месяца назад

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

@DesignWithArash 3 месяца назад

No problem. Glad it helped.

@VinodNanaiah 7 месяцев назад

Excellent tutorial!

@DesignWithArash 6 месяцев назад

Glad you liked it!

@mary.b92 10 месяцев назад

Thanks a lot ❤️

@DesignWithArash 10 месяцев назад

No problem.

@zubairhanif6554 Год назад

Thanks for sharing your knowledge with us.

@DesignWithArash Год назад

My pleasure.

@user-bg3wc5jz2s 6 месяцев назад

Great video. Thanks

@DesignWithArash 6 месяцев назад

Glad you liked it!

@smjrk 7 месяцев назад

Hi, Really helpful, Thanks a lot. :)

@DesignWithArash 6 месяцев назад

Hi. Glad it was helpful!

@maulanafatullah 3 месяца назад

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

@DesignWithArash 3 месяца назад

Glad it was helpful!

@Nootlest 11 месяцев назад

Thank you for going step by step very slowly

@DesignWithArash 11 месяцев назад

You’re welcome 😊

@faateme_fr 11 месяцев назад

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

@DesignWithArash 11 месяцев назад

Hi Fateme, That's so nice of you. Thanks a lot.

@ladyj3474 11 месяцев назад

Thanks!

@DesignWithArash 11 месяцев назад

No problem. Thank you for the Super Thanks.

@suniljadhav1889 6 месяцев назад

Really Great tutorial..Thanx

@DesignWithArash 5 месяцев назад

Glad you liked it!

@farwakazmi7388 19 дней назад

Mind blowing, thank you

@user-yc2xl8hv2i Год назад

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!

@DesignWithArash Год назад

Hi. Thank you so much. It's very nice of you.

@Design.DepotGLA 5 месяцев назад

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

@DesignWithArash 4 месяца назад

Thank you.

@okongwuugochukwu7889 5 месяцев назад

This is really helpful, thank you ❤

@DesignWithArash 4 месяца назад

No problem. Glad it helped!

@marcelo-larrosa 3 месяца назад

My favourite explanation so far.

@DesignWithArash 3 месяца назад

Glad to hear that.

@hadicheraghi4504 7 месяцев назад

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?

@paraggawade3231 3 месяца назад

Best Video.. Very useful. Thank You 🥰

@DesignWithArash 3 месяца назад

Glad it was helpful!

@rachaelbolarinwa741 8 месяцев назад

You are THE BEST 👍🏼

@DesignWithArash 7 месяцев назад

Thank you. So are you.

@user-bu8ie9km6p Год назад

Thank You!!

@DesignWithArash Год назад

No problem.

@user-zo3ce6eu1w 9 месяцев назад

This so good

@DesignWithArash 9 месяцев назад

Thank you.

@felixenemuo 7 месяцев назад

Great teacher

@DesignWithArash 6 месяцев назад

Thank you so much.

@artankohan9863 10 месяцев назад

damet garm alie ❤❤❤❤

@DesignWithArash 9 месяцев назад

Ghorboonet.❤❤

@deja00 Год назад

You are piece of design yourself! I am digesting your Figma Variants tutorial with pleasure!

@DesignWithArash Год назад

Thank you so much for your kind words. I appreciate it.

@joymosebolatan3718 Год назад

Thank you so much.

@DesignWithArash Год назад

You're welcome!

@minkeydamonkey Год назад

Great video! 👌

@DesignWithArash Год назад

Thank you.

@samhiggins512 8 месяцев назад

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

@DesignWithArash 8 месяцев назад

Oh, thanks. Glad to hear that.

@ambalikaguha6589 6 месяцев назад

Thank you sir

@DesignWithArash 6 месяцев назад

No problem.

@afafatulla3078 11 месяцев назад

super thanks

@DesignWithArash 10 месяцев назад

No problem.

@imca-b-10rajwanijatishmano4 Год назад

Thank you so much for this wonderful explanation! You really cleared a lot of questions and that too, with such calmness! Also, was there a specific reason you chose to create "with icon" variants? As that could have been done with the Boolean property also🤔

@DesignWithArash Год назад

You are very welcome. Nope, there was no specific reason for that. In fact it's better to use the Boolean property for that but I just wanted to show that it's possible using variants as well. As you noticed I didn't cover all the Component properties.

@imca-b-10rajwanijatishmano4 Год назад

@@DesignWithArash Oh okay now I understood.. thank you once again!😁

@Pixelco 4 месяца назад

Perfect, you're the best techer!!!

@DesignWithArash 4 месяца назад

Thank you.

@muratawga Год назад

Amazing video!

@DesignWithArash Год назад

Thanks.

@zeeshanshaikh9565 7 месяцев назад

Superb explanation

@DesignWithArash 7 месяцев назад

Thank you.

@maratsadovnikov 11 месяцев назад

You BEST !!!!

@DesignWithArash 11 месяцев назад

Thank you so much.

@tatianaavaev7487 6 месяцев назад

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?