Figma Carousel Animation in 8 Minutes
In this video, I'm going to show you how to design and animate the material design carousel component in Figma using Auto Layout and Interactive Components.
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.
Пікірлер: 97
👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons): bit.ly/43v79vX
this is literally the only video tutorial for material 3 carousel out there. Thank you man thanks alot
@DesignWithArash
3 ай бұрын
No problem.
I love your videos, you make it seem really easy, love that, thanks!!
@DesignWithArash
9 ай бұрын
Glad you like them! Thank you.
I love it thank yoooou ❤️❤️ love to see more 👏🏻👏🏻👏🏻
@DesignWithArash
Жыл бұрын
Thank you so much.
This is so insightful. Appreciate you bro.
@DesignWithArash
Жыл бұрын
Thanks.
this is so amazing and it works perfectly, thank you so much :)
@DesignWithArash
8 ай бұрын
You're welcome!
Very cool way of using components!
@DesignWithArash
Жыл бұрын
Thanks.
thanks mate for this wonderful lesson, now im going to use it onto my project
@DesignWithArash
6 ай бұрын
No problem. Glad it helped!
Today I read material design this new features and how it actually design in figma from your channel awesome bro this is valuable thing for us.
@DesignWithArash
11 ай бұрын
Glad to hear that.
I really like the way you explain things. It is simple and easy to understand. Thank you!
@DesignWithArash
Ай бұрын
Happy to hear that! Thank you.
your videos are very helpful & I'm really inspired by your work. thank you Arash
@DesignWithArash
Жыл бұрын
My pleasure 😊
As expected, this is op 🎉🎉🎉🙌🙌
@DesignWithArash
Жыл бұрын
Thanks.
Thank you 🙏🏽 you just saved my life 😂
Hi Arash your videos has helped me a lot in design thank you so much
@DesignWithArash
7 ай бұрын
Hi. No problem. Glad to hear that.
thank you for sharing!!!
@DesignWithArash
4 ай бұрын
No problem.
Can you please show how you added more than three images to the carousel like the example at the beginning of the video?
@jimenadiazguzman2045
Ай бұрын
i was wondering the same!
It was a good one. I am trying it to replicate the style myself.
@DesignWithArash
9 ай бұрын
Thanks.
Starting to learn UI/UX design. To get inspiration, watch this video. I don't understand what he's doing 😄.
I want this effect in after delay, is it possible ?
Thank you so much ☺
@DesignWithArash
6 ай бұрын
No problem.
when you add text in the frame you say to add another auto layout what is the first auto layout?
amazing
@DesignWithArash
Жыл бұрын
Thanks.
Ti amo❤
@DesignWithArash
11 ай бұрын
Thank you.
Thank yoou!!
@DesignWithArash
5 ай бұрын
No problem.
Thanks Bro.
@DesignWithArash
8 ай бұрын
No problem.
This is so insightful. Thank you arash🎉🎉 Please how can I apply for your live animations master class
@DesignWithArash
Жыл бұрын
No problem. Do you mean my Prototyping course?
@omoteniola9764
Жыл бұрын
I just want to learn more animations and be good at it. So i want to know if you have a live class for it
@gauravrokade4027
Жыл бұрын
@@DesignWithArash can I get ur ui ux design course link
Great
@DesignWithArash
Жыл бұрын
Thanks.
how do you make the horizontal navigation?
Quick question, why do you utilize frames over actual shapes inside a frame? I've noticed you tend to use them over shapes and was curious if it helps with the clipping, animations, or if there's some other reason.
@DesignWithArash
Жыл бұрын
That's a great question. For a variety of reasons. Frames are more flexible. They give you more options in terms of constraints. There are other reasons that are too technical to explain here but I may create a video about it.
@carlosmed_
Жыл бұрын
@@DesignWithArash Ahhh ok! Idk why i was always under the assumption that frames were just used to frame devices. Now I'm realizing that they have more of a universal aspect of it. A video would definitely be cool as to when to use frames vs shapes. I have a basic understanding but would be cooled regardless. Thanks again for the awesome videos.
thank youuuuuuuuuuuuuuuuuuuu
@DesignWithArash
Жыл бұрын
No problem.
can you make one with more than 3 pictures?
Sir you video was very good and I have tried it also but I would like to say that please say slowly while explaining the prototype part 😅 it was bit confusing and I have to rewatch the part relativity... Other than that thanks 🙏
@DesignWithArash
Жыл бұрын
No problem. Thanks.
Merci
@DesignWithArash
Жыл бұрын
No problem.
Hi Arash, can you make an infinite scrolling video please? One for text and One for the brand logos that scroll at the bottom of a page that shows the websites clients. I hope that makes sense! Thank you in advance! :)
@DesignWithArash
Жыл бұрын
Hi. Sure.
مرسی
@DesignWithArash
7 ай бұрын
خواهش میکنم.
How to add more images in that carousel.
but what if i want to put my pics in the same form but instead of 3 I have more than 8 pics, max to max 10 pics, I want to show them in the same way you shown in the video sir, how will I do that for multiple pics
@pakaradeek
6 ай бұрын
U can do so by putting extra frame behind the component
Hello can you plz tell me how to prototype video export in figma full hd quality?
@DesignWithArash
10 ай бұрын
Hi. You can just record your screen.
Did you ever actually code it, it is beautiful but i have a hard time putting it into code 😛
ببخشید یک سئوال دیگه ، اگر تعداد تصویرها بیشتر بود مثلا شش عدد پروتوتایپ را چطور بدیم که همه تصاویر هر شش حالت ( سایز ) را داشه باشند ؟ اصولا لینک این شش تصویر باید با قاعده ای انجام بشه یا اینکه میتوان رندم به هم وصل کرد ؟ سپاس
@DesignWithArash
Жыл бұрын
در اون صورت باید تصویر ها از فریم اصلی خارج بشن و تصویر های جدید بیان که یک مقدار پیچیده تر میشه. یک ویدیو در این رابطه دارم. لطف کنید لینک زیر رو چک کنید. kzread.info/dash/bejne/lIVtprVtd5yscps.html
its the persian accent thats killen me man. hahahah
Is this possible for the developers ?
@DesignWithArash
Жыл бұрын
Yes, it is.
why theres no resize option after i created variants?
@DesignWithArash
Жыл бұрын
Did you use Auto Layout?
if i want to make this carousal for more than 3 images, then what should i need to do??
@DesignWithArash
6 ай бұрын
You just need to make the frame bigger and duplicate one of the slides and adjust its size.
@abhidraws
5 ай бұрын
@@DesignWithArash with all of them being fixed width? or fill container? and should the last frame be the largest??
سلام ، در قسمت پروتوتایپ نمیشه از حالت افتر دیلی استفاده کرد ؟ سپاس
@DesignWithArash
Жыл бұрын
نه برای این کرسل چون برای این کرسل باید بتونین عکس هارو خودتون حرکت بدین.
how to add multiple pics like in the beginning of the video?
@DesignWithArash
Жыл бұрын
You just need to add more frames to it with different sizes.
@psyntist5620
Жыл бұрын
@@DesignWithArash Yes I tried and found myself in a very messy situation😂
Hey I tried your Prototype was 90%Done🎉but last corousal item was not that fluid 🤗
@DesignWithArash
Жыл бұрын
Hey. Check the resizing option of your items.
I dont get ti... why Material Design is not ready for this?
It is nothing like the example. It would be better to teach what you show in the example.
@AdorableEbony
8 ай бұрын
It's the exact thing he demonstrated. Just take enough time to view and practice as you're viewing it
@amangadpale9284
8 ай бұрын
Sorry I went deep into your account, you like 90s rock?
its no work brouh
NO WORK
Can you please show how you added more than three images to the carousel like the example at the beginning of the video?
@malejarivera1029
8 ай бұрын
Yes! I couldn't make it work!