AirPods Pro Animation in Figma | Beginner Tutorial
Вставка
- Опубліковано 1 тра 2023
- In this video, I'm going to show you how to create an advanced scroll animation in Figma using variants and Smart Animate.
Try Figma for free:
bit.ly/3LiRVEF
👉 Become a UI Designer with my UI Design & Figma Mastery course:
bit.ly/43v79vX
👉 Get my FREE UI/UX Design e-book here:
bit.ly/45KHoKJ
📸 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.
yes please to the home animation, ive really been enjoying watching your easy to absorb tutorials
Sure. Thanks.
Thank you Arash for breaking these into simple steps.
No problem.
helpful I will use this in my next project.
Hi Arash,
Your video tutorials are super easy to understand. Thank you.
Hi. Glad to hear that.
i love you arash for helping people like me who are a beginner
Thank you. Happy to help.
I always anticipate your videos. Great job bro
Thank you so much.
Definitely going to try it!! Thanks Arash :)
No problem.
Will love to see the hero section! Love your videos.
Thanks. Sure.
Inspiring 💯 thank you!!
Thank you.
This was really great, thank u!
No problem. Glad you liked it.
Hi Arash, have been going through the complete playlist and it's really helpful, Thank you so much for it. Can I add these animations to my portfolio post practice?
No problem. Sure, go ahead.
Thank you mate, for being so clear and butter smooth explanation cheers!!
No problem. Thanks.
@@DesignWithArash Also love to see the hero section video awaitnggggg! :)
You're sooo good at designs bro. Keep the great work going bro 🎉
Thank you so much.
You are a great Teacher, Thank you so much…
Thank you so much.
It works. I did it. Thank you Arash.
No problem.
It's a great tutorial, Bro. Take Love.
Thanks.
I was curious to see how (or if) this could be done, as I thought it would be one continuous drag effect. Unfortunatley it's too 'stop and start' in comparison to the original smooth reveal animation.
Unfortunately, since the earbuds should fade in one by one it wasn't possible to create a continuous scroll. You can however, get rid of the scroll bar and connect the frames to each other and set the trigger to After Delay with 500ms delay. You won't get the scroll interaction but they appear continuously.
@@DesignWithArash Yeah, that is what I have been currently doing for these type of effects within my prototypes as I couldn't think of a way to do it through a continouse drag solution without it stuttering (or through the use of going outside of Figma i.e: Principle or AE).
Really appreciate all your video tips and insights into your design and problem solving approach.
Awesome keep it up.
I would like to see how to animate a hero section.
Thank you. Sure, I will make a tutorial about that.
i would like to see how to animate hero section.🪄
Amazing
I'll love to see the hero section animation too
Thank you. Sure,.
Thanks for sharing ☺️
No problem.
Please can you tell me why your track is so fluid as it is at the beginning of your video ? mine is not, like 10:55, and can you tell me how you can scroll with your mouse ? Great video !
Wow dude, in minutes!😍 and yes, please make a video on airpods moving animation☺💝
Glad you liked it. I already did. Check out the channel please.
Thanks for sharing 😊
No problem.
thank you so much for this great learning☺
No problem.
Sir, Can you make a full tutorial on Complete Apple Airpods (2nd Generation) , with these skills, I'm so much curious for my Figma journey. I've started it from your first tutorial on making a dashboard and that was so easy to make, adaptable and elegant too.
Thank you. Sure.
Awesome…it will be helpful for my project work…i am waiting for hero section video..
No problem. Sure.
awesome tutorial, yes excited to watch ow the airpods tutorial will be, please make a tutorial for us
Thank you.
thank you bro....
No problem.
wow! thx :)
No problem.
Would be nice to see hero section too ❤
Sure.
Wow🎉❤
Hey! Your tutorials are awesome, but I'm having a little trouble with the scroll back. Any idea why? Keep up the great work!
Hey. Thank you. Please check all your frame connections.
The hero section pls
Sure. I’ll create a tutorial on that.
video was very good as well very informative plz make hero section animation
Glad you liked it. Sure.
its awesome.Thanks Arash. But please describe your next tutorial to make the interaction with mouse scrolling "not mouse click and Drag". That would be great.
No problem. Unfortunately, Figma doesn’t support that trigger yet but as soon as it does I will create a video about it.
@@DesignWithArash - Absolutely amazing! You're a great teacher. It was easy to follow along AND it actually worked for me the first time. I'll be taking your course(s) for sure. Quick question: can you think of any way to allow the end user to scroll (drag the Thumb) all the way instead of having to drag the Thumb 180px five times? Just curios. ☮
On the Apple website, we can go through the animations using the mouse scroll button. Is it possible to do the same, in Figma, using the scroll button? Or do I need another tool for this?
Unfortunately, Figma doesn't have such a trigger but you can create the exact interaction using No-code tools like Webflow or Framer.
Thanku sir
No problem.
Hi Arash , Great .
Hi Mahmoudreza. Thanks.
I would like to see how to animate a hero section.
Sure. I’ll create a tutorial on that.
Awesome
Thanks.
can you make the animation of ps 5 controller in playstation website
Nice Sir
Thanks.
Laptop Specifications / Requirements to Learn UI / UX Design.
yeah hero sections as well
Sure.
Could you please add this animation to full page of website
Sure. I'll see how it can be implemented.
Also want Hero section
Sure. I’ll create a tutorial on that.
yah...
Plz make toturial on hero section fast.
clever!!!!!!
Thanks,
Hi, so I tried making this , came out pretty well, but idk the scroll back option, from bottom to up, dont seem to be working! Please help!
Hi. There must be an issue with your connections. Please check all your interactions and also check the trigger.
I face the same issue but the connections are perfect.@@DesignWithArash
this file link ?
I don't understand how do you move the elements by 16 pixels. There is no ruler in my menu
Just use the arrow keys on your keyboard.
how to save this as video
can any one say
You cannot, but you can record your screen.
When I am placing my image..they are becoming zoom and when I am making it of proper size ..the image is shrinking...like the parts of airpods are disappearing ..it's not making the whole picture small..please help
Make sure not to place your image inside another frame. I guess that's what's happening in your case.
Yes be good to see hero section, don’t you think it’s annoying how figma isn’t offering the drag option? Even Dora are doing this figma will be left behind if they don’t step up their game
Yes, it is. I hope they also implement it very soon.
How to become a ui and ux designer ?
Start by mastering the design principles and then master Figma.
0:48 “first we need to have our asses ready”
Was there any legal consequences for using the images that you got from apple website? if I make this I plan to showcase it on LinkedIn, so any legalities I have to check first?
Since, it was for educational purposes, no but you cannot use it in your commercial projects.
you have picked the one you can do that's funny this didn't need to be taught this one's the easy one
You can check the other one here.
ua-cam.com/video/NTyNvaKOcpE/v-deo.html
That video was very awesome ❤️❤️❤️. We need you to do another one on the animation at the hero section 🤌🏽🔥
Thank you. Glad you liked it. Sure.
@@DesignWithArash y're welcome dear Arash 😁, i can't wait to see next one 🔥
yes please to the home animation, ive really been enjoying watching your easy to absorb tutorials
Sure. Thanks.