Figma Carousel Animation in 8 Minutes

[@DesignWithArash]

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

[@Alikk784]

this is literally the only video tutorial for material 3 carousel out there. Thank you man thanks alot

[@DesignWithArash]

No problem.

[@Mandeepsingh-mh1lc]

Starting to learn UI/UX design. To get inspiration, watch this video. I don't understand what he's doing 😄.

[@davidkunugi5607]

Can you please show how you added more than three images to the carousel like the example at the beginning of the video?

[@malejarivera1029]

Yes! I couldn't make it work!

[@omoteniola9764]

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

[@bangmihon]

This is so insightful. Appreciate you bro.

[@DesignWithArash]

Thanks.

[@paulinenguyen6755]

can you make one with more than 3 pictures?

[@mohadesehnabizadeh5491]

your videos are very helpful & I'm really inspired by your work. thank you Arash

[@DesignWithArash]

My pleasure 😊

[@dorianneetive8726]

I really like the way you explain things. It is simple and easy to understand. Thank you!

[@DesignWithArash]

Happy to hear that! Thank you.

[@tayyabsohail8823]

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]

Glad to hear that.

[@ParthLohomi]

Thank you -- this is very very helpful!

[@shaysframe1472]

Thank you you're a legend!

[@PrasadVarshanMusic]

thanks mate for this wonderful lesson, now im going to use it onto my project

[@DesignWithArash]

No problem. Glad it helped!

[@carlosmed_]

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.

[@emanhamed3855]

I love it thank yoooou ❤️❤️ love to see more 👏🏻👏🏻👏🏻

[@DesignWithArash]

Thank you so much.

[@ahumblerequest5222]

I want this effect in after delay, is it possible ?

[@k.kaiserahmed8013]

As expected, this is op 🎉🎉🎉🙌🙌

[@DesignWithArash]

Thanks.

[@MssJenfe]

MY HERO

[@Trina18]

this is so amazing and it works perfectly, thank you so much :)

[@DesignWithArash]

You're welcome!

[@chekwubeokonkwo1543]

Hi Arash your videos has helped me a lot in design thank you so much

[@DesignWithArash]

Hi. No problem. Glad to hear that.

[@BeatrizMarques80]

I love your videos, you make it seem really easy, love that, thanks!!

[@DesignWithArash]

Glad you like them! Thank you.

[@A_sudden_stranger]

Damnnnnnnn!!!!!!!!!!!!!!!! it's so helpful

[@nigarjabrayilova8064]

when you add text in the frame you say to add another auto layout what is the first auto layout?

[@jimenadiazguzman2045]

how do you make the horizontal navigation?

[@TheBatman_101]

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]

U can do so by putting extra frame behind the component

[@lionelmourya]

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.

[@Tarek_sky]

It was a good one. I am trying it to replicate the style myself.

[@DesignWithArash]

Thanks.

[@alexeytretina]

Very cool way of using components!

[@DesignWithArash]

Thanks.

[@chimmy3035]

How to add more images in that carousel.

[@JolandaRizzi]

Thank you 🙏🏽 you just saved my life 😂

[@fauzannadeem1569]

Is this possible for the developers ?

[@DesignWithArash]

Yes, it is.

[@mahmoudrezamohammadnejad8286]

ببخشید یک سئوال دیگه ، اگر تعداد تصویرها بیشتر بود مثلا شش عدد پروتوتایپ را چطور بدیم که همه تصاویر هر شش حالت ( سایز ) را داشه باشند ؟ اصولا لینک این شش تصویر باید با قاعده ای انجام بشه یا اینکه میتوان رندم به هم وصل کرد ؟ سپاس

[@DesignWithArash]

در اون صورت باید تصویر ها از فریم اصلی خارج بشن و تصویر های جدید بیان که یک مقدار پیچیده تر میشه. یک ویدیو در این رابطه دارم. لطف کنید لینک زیر رو چک کنید. kzbin.info/www/bejne/mIKcdYZqfJ55eJo

[@melquizedec]

I dont get ti... why Material Design is not ready for this?

[@Hustl3rGame]

Great

[@MacarenaGuzmán-l6e]

thank you for sharing!!!

[@DesignWithArash]

No problem.

[@alyonastepanova8627]

Thank you so much ☺

[@DesignWithArash]

No problem.

[@hellomovies1456]

Hello can you plz tell me how to prototype video export in figma full hd quality?

[@DesignWithArash]

Hi. You can just record your screen.

[@Dhiiraj0408]

amazing

[@DesignWithArash]

Thanks.

[@PrasadVarshanMusic]

if i want to make this carousal for more than 3 images, then what should i need to do??

[@DesignWithArash]

You just need to make the frame bigger and duplicate one of the slides and adjust its size.

[@abhidraws]

@@DesignWithArash with all of them being fixed width? or fill container? and should the last frame be the largest??

[@mahmoudrezamohammadnejad8286]

سلام ، در قسمت پروتوتایپ نمیشه از حالت افتر دیلی استفاده کرد ؟ سپاس

[@DesignWithArash]

نه برای این کرسل چون برای این کرسل باید بتونین عکس هارو خودتون حرکت بدین.

[@abhinavpawar6794]

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.

[@bellanight96]

Ti amo❤

[@DesignWithArash]

Thank you.

[@jeppe7275]

Did you ever actually code it, it is beautiful but i have a hard time putting it into code 😛

[@rp.azarias]

why theres no resize option after i created variants?

[@DesignWithArash]

Did you use Auto Layout?

[@xxtankiesharpxx-gaming7334]

Thanks Bro.

[@DesignWithArash]

No problem.

[@psyntist5620]

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😂

[@MichelleMachado-f2q]

Thank yoou!!

[@DesignWithArash]

No problem.

[@carotina1986]

thank youuuuuuuuuuuuuuuuuuuu

[@DesignWithArash]

No problem.

[@didiademoroti3897]

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.

[@MayurCreativeStudio]

The Tutorial is Really Good But It is Very Tough

[@mahmoudrezamohammadnejad8286]

Great

[@DesignWithArash]

Thanks.

[@lilou8711]

Merci

[@DesignWithArash]

No problem.

[@malejarivera1029]

It is nothing like the example. It would be better to teach what you show in the example.

[@AdorableEbony]

It's the exact thing he demonstrated. Just take enough time to view and practice as you're viewing it

[@amangadpale9284]

Sorry I went deep into your account, you like 90s rock?

[@TahaKargozar-g6q]

مرسی

[@DesignWithArash]

خواهش میکنم.

[@mohebanwari1832]

its the persian accent thats killen me man. hahahah

[@YoLoSiH]

its no work brouh

[@nicolasbrun9795]

NO WORK

[@malejarivera1029]

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!