Master Figma Variants | The Complete Guide (2024)
HTML-код
- Опубликовано: 5 июн 2024
- 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.
![Oscar Maydon x Junior H - Volver Al Futuro [Official Video]](http://i.ytimg.com/vi/sa52xabMSB8/mqdefault.jpg)
👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons):
bit.ly/43v79vX
i am yuose faigma 🧐
This is probably the clearest, most straightforward explainer I’ve watched for figma but still gives you everything you need to know. Great job.
Thank you so much. Glad it helped.
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.
No problem. Glad you found it helpful.
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!
Thank you so much. Glad you liked it.
Thanks for covering both the design and prototype aspects of variants! 😀
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 :)
Thank you so much. I’m glad you enjoyed it. Thanks for the positive feedback.😊
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 !!
No problem. Glad you liked the channel.
The best video have watched so far, no music no noise just easy explanation
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.
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.
Where can i find WebFlow tutorial?
Dude thank you so much for explaining this in a clear, concise way! You just earned yourself another follower! Cheers from Denver brother
!
No problem. Welcome aboard!
Finally a perfectly explained video for buttons and components! :D thank you. Subscribed!
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. ❤
Thank you so much. It's so nice of you. Glad you liked it.
this is the best tutorial for someone who is new to figma that i've watched so far. concise, precise, well explained. auto-subscribed.
Thank you. Glad you liked it.
just binge watched your videos, you helped me so much! thank you!!
No problem. Glad it helped.
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!
Hi. Thank you. Glad you enjoyed my content.
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.
Thank you very much. So glad to hear that.
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
Thank you so much. Welcome to the channel.
Video quality and all the steps in scenario including the animation are awesome. Thank u!
Glad you liked it!
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.
Thank you very much. I'm glad you found it helpful.
What a wonderful video! It definitely deserves to be described as 'the complete guide', I cannot imagine it being done any better,
Thank you so much.
Thanks a ton Arash ! You made me to look figma easier. I have never seen this kind of precise explanation from anyone.
You are most welcome. Glad you found it helpful.
Thank you very much for this video! I finally mastered the properties and now I can freely create two-dimensional variants.
No problem. Glad you found it helpful.
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.
You are welcome! I’m glad you found my Figma course helpful. Thank you so much.
The best tutorial on RUclips. 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. 🙌
Thank you very much. It's so kind of you. Glad you liked my content.
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.
Glad it helped!
This is gold Arash. Wish you put more content like this which will help others understand easy
Thank you so much. Glad it was helpful.
This is the best tutorial I have found after looking for something like this for a few months omg thanks
Glad it helped! Thanks.
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.
Thank you so much. Glad you found it helpful. Welcome aboard.
You made it vert easy more than any other tutor here on youtube, Thank you so much
No problem. Thank you so much.
Really helpful, Arash. Very simple and easiest way to create a variant. This video has cleared all my doubts. Thank you bruh
Glad to hear that. No problem.
Phenomenal instructor, never ever had one before
真的很有帮助 tks for everything mate
No problem.
the best! I’ve been searching for this exact video
Thank you. Glad it helped.
Learning lot from your tutorials. Keep it up your good work!
Thank you.
Hi Arash your content is so perfect and your channel is usable for learning Figma and practising a listening skills for the language😉
Hi Behnam. Thanks a lot. Glad you found the channel helpful.😉
Really clearly explained, so easy to follow. Thank you!
No problem.
Thank u very much! Your video is really helpful, i understand everything cz you make it all in practice. God bless you
No problem. Glad it helped.
Thanks man your videos are really interesting and informative!
Glad you liked them!
After watching many videos this video solve my problems. Thanks brother keep uploading this type of content more.
Glad to hear that.
Best Figma tutorial maker of the planet! Thanks Arash! Love from Brazil
Thank you so much. Glad it helped.
Excellent video men, I appreciate it so much! It was very helpful (Most, if you're a beginner)
Glad you liked it!
clean and clear explanation in calm manner all the time...
Thanks.
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.
Glad it was helpful.
Thanks, Arash!! This tutorial is pure gold
Glad you liked it
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!
Hi. Thank you so much. It's very nice of you.
Amazing video! Well explained 🙌🏼
Glad you liked it!
This is so straightforward and helpful. Thank you, Arash.
No problem. Glad it was helpful!
The best tutorial on the subject, many thanks!
Thank you so much.
Thanks so much that was perfect and really useful 👏🏼
No problem. Glad it was helpful!
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.
No problem. Thanks.
Awesome class. Complicated subject to simplify. Thumbs up, yes.
Thank you.
You are amazing. Your videos are so valuable. I truly thank you so much 💓
Glad you like them! Thank you.
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.
Thank you so much. I suggest you see the videos regarding animations and prototyping on my channel.
I totally will! Thank you so much. Your videos are the best. 😊❤ Cheers from Alicante, Spain. 👋
amazing, so clear, best figma class on youtube
Thank you.
Literally the best video on figma variants on RUclips.
Thanks a lot. Glad you think so.
You are piece of design yourself! I am digesting your Figma Variants tutorial with pleasure!
Thank you so much for your kind words. I appreciate it.
Hi Arash! You are teaching perfectly well! All your videos are adorable! Good Job.😍🥰😇
Hi Fateme,
That's so nice of you. Thanks a lot.
One of the most easy to follow Figma tutorials. Cheers!
Thank you.
Amazing class right here
Finally! someone explains Variants step by step
Thanks.
So useful. Thank you! 😊
Thanks so much, this was way easier to follow than the official Figma content
Oh, thanks. Glad to hear that.
Thanks for this video, it really helped me a lot after so complicated explanations.
No problem. Glad it helped.
Thank you, I'm grateful to have found this video.
Glad it was helpful!
thank you for making the video it's very helpful full and you are very easily explaining the process
No problem. Glad it helped.
What a fantastic tutorial! Thank you!
No problem.
damet garm alie ❤❤❤❤
Ghorboonet.❤❤
My favourite explanation so far.
Glad to hear that.
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?
Thanks for sharing your knowledge with us.
My pleasure.
It’s just amazing 😊
Thank you.
Hi,
Really helpful, Thanks a lot. :)
Hi. Glad it was helpful!
Good and Neat Explanation👏👏👏
Thank you.
Excellent tutorial!
Glad you liked it!
This was helpful thank you ❤
Glad it helped. No problem.
Best Video.. Very useful. Thank You 🥰
Glad it was helpful!
Perfect, you're the best techer!!!
Thank you.
This is really helpful, thank you ❤
No problem. Glad it helped!
Great video. Thanks
Glad you liked it!
Thank you so much for this video
Thank you for going step by step very slowly
You’re welcome 😊
You teach so well you should upload more of these types of videos. You'll definitely earn many subscribers.
I appreciate that! Sure, that's the plan.😍
Really Great tutorial..Thanx
Glad you liked it!
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.
Thanks. That’s strange. Could you please create the buttons from scratch and this time only create two states for it not more.
You are THE BEST 👍🏼
Thank you. So are you.
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🤔
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.
@@DesignWithArash Oh okay now I understood.. thank you once again!😁
The only thing I'd like to mention is that when you put 2 interactions on the button, the first one (on click) doesn't work (20:59 the "!" sign appears). Usually, I put the "on click" interaction on the "hover" state. This way when I'm hovering on the "default" one, it changes to the "hover" state, and when I click on it, it changes to "pressed", e.g. the prototype works correctly.
Yes, you are right. That's how they should be connected in order for the On Click trigger to work properly.
Mind blowing, thank you
Superb explanation
Thank you.
Great teacher
Thank you so much.
Thanks a lot ❤️
No problem.
Your video quality is very rich, You will grow very fast.
Thanks a lot. I appreciate your encouragement.
Great video! 👌
Thank you.
The best youtuber on the figma topic
Thanks a lot.
Arash, thank you so much, you literally saved my ass today :) Next time I need a Figma tutorial, I will go straight to your channel. Thank you for sharing your knowledge in super comprehensible way :) May I ask you, please: do you think it makes sense to create variants, if the only aspect that differ is size, or size+font?
No problem. Glad it helped. Yes, it makes sense because it helps you keep everything organized and in case you want to make your components interactive, that's a must.
Hi Arash! Love your content! Keep up the good work :) I do have a question tho, and was wondering if you knew the answer. I don't know if it's due to a new update or something, but when I duplicate components inside a component set, figma changes their name to a new state. It doesn't keep the state name they're duplicating from, and I have to manually change each one to their corresponding state in order for the processes to work. Do you know if I'm doing something wrong? Again, love your content! You're helping lots of us :)
Hi Santiago. Thank you. That's how it works, it will give the property a new value but it doesn't duplicate the property.
This so good
Thank you.
Amazing video!
Thanks.
You BEST !!!!
Thank you so much.
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?
No problem. Yes, it is possible. I will make a video about that.
@@DesignWithArash I have the same question