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

  • @DesignWithArash
    @DesignWithArash11 ай бұрын

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

  • @Alikk784
    @Alikk7843 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    3 ай бұрын

    No problem.

  • @BeatrizMarques80
    @BeatrizMarques809 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    9 ай бұрын

    Glad you like them! Thank you.

  • @emanhamed3855
    @emanhamed3855 Жыл бұрын

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

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    Thank you so much.

  • @bangmihon
    @bangmihon Жыл бұрын

    This is so insightful. Appreciate you bro.

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    Thanks.

  • @Trina18
    @Trina189 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    8 ай бұрын

    You're welcome!

  • @alexeytretina
    @alexeytretina Жыл бұрын

    Very cool way of using components!

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    Thanks.

  • @PrasadVarshanMusic
    @PrasadVarshanMusic7 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    6 ай бұрын

    No problem. Glad it helped!

  • @tayyabsohail8823
    @tayyabsohail882311 ай бұрын

    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

    @DesignWithArash

    11 ай бұрын

    Glad to hear that.

  • @dorianneetive8726
    @dorianneetive87262 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    Ай бұрын

    Happy to hear that! Thank you.

  • @mohadesehnabizadeh5491
    @mohadesehnabizadeh5491 Жыл бұрын

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

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    My pleasure 😊

  • @k.kaiserahmed8013
    @k.kaiserahmed8013 Жыл бұрын

    As expected, this is op 🎉🎉🎉🙌🙌

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    Thanks.

  • @JolandaRizzi
    @JolandaRizzi3 ай бұрын

    Thank you 🙏🏽 you just saved my life 😂

  • @chekwubeokonkwo1543
    @chekwubeokonkwo15438 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    7 ай бұрын

    Hi. No problem. Glad to hear that.

  • @user-ou4ts2tb6h
    @user-ou4ts2tb6h5 ай бұрын

    thank you for sharing!!!

  • @DesignWithArash

    @DesignWithArash

    4 ай бұрын

    No problem.

  • @malejarivera1029
    @malejarivera10298 ай бұрын

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

  • @jimenadiazguzman2045

    @jimenadiazguzman2045

    Ай бұрын

    i was wondering the same!

  • @Tarek_sky
    @Tarek_sky9 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    9 ай бұрын

    Thanks.

  • @Mandeepsingh-mh1lc
    @Mandeepsingh-mh1lc4 ай бұрын

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

  • @ahumblerequest5222
    @ahumblerequest522210 ай бұрын

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

  • @alyonastepanova8627
    @alyonastepanova86276 ай бұрын

    Thank you so much ☺

  • @DesignWithArash

    @DesignWithArash

    6 ай бұрын

    No problem.

  • @nigarjabrayilova8064
    @nigarjabrayilova80649 ай бұрын

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

  • @dhiiraj4ux
    @dhiiraj4ux Жыл бұрын

    amazing

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    Thanks.

  • @bellanight96
    @bellanight9611 ай бұрын

    Ti amo❤

  • @DesignWithArash

    @DesignWithArash

    11 ай бұрын

    Thank you.

  • @user-zh1un9xb1g
    @user-zh1un9xb1g6 ай бұрын

    Thank yoou!!

  • @DesignWithArash

    @DesignWithArash

    5 ай бұрын

    No problem.

  • @xxtankiesharpxx-gaming7334
    @xxtankiesharpxx-gaming73349 ай бұрын

    Thanks Bro.

  • @DesignWithArash

    @DesignWithArash

    8 ай бұрын

    No problem.

  • @omoteniola9764
    @omoteniola9764 Жыл бұрын

    This is so insightful. Thank you arash🎉🎉 Please how can I apply for your live animations master class

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    No problem. Do you mean my Prototyping course?

  • @omoteniola9764

    @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

    @gauravrokade4027

    Жыл бұрын

    ​@@DesignWithArash can I get ur ui ux design course link

  • @mahmoudrezamohammadnejad8286
    @mahmoudrezamohammadnejad8286 Жыл бұрын

    Great

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    Thanks.

  • @jimenadiazguzman2045
    @jimenadiazguzman2045Ай бұрын

    how do you make the horizontal navigation?

  • @carlosmed_
    @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

    @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_

    @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.

  • @carotina1986
    @carotina1986 Жыл бұрын

    thank youuuuuuuuuuuuuuuuuuuu

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    No problem.

  • @paulinenguyen6755
    @paulinenguyen67555 күн бұрын

    can you make one with more than 3 pictures?

  • @lionelmourya
    @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

    @DesignWithArash

    Жыл бұрын

    No problem. Thanks.

  • @lilou8711
    @lilou8711 Жыл бұрын

    Merci

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    No problem.

  • @didiademoroti3897
    @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

    @DesignWithArash

    Жыл бұрын

    Hi. Sure.

  • @user-zo6xr1dq2r
    @user-zo6xr1dq2r7 ай бұрын

    مرسی

  • @DesignWithArash

    @DesignWithArash

    7 ай бұрын

    خواهش میکنم.

  • @chimmy3035
    @chimmy3035 Жыл бұрын

    How to add more images in that carousel.

  • @TheBatman_101
    @TheBatman_10110 ай бұрын

    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

    @pakaradeek

    6 ай бұрын

    U can do so by putting extra frame behind the component

  • @hellomovies1456
    @hellomovies145610 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    10 ай бұрын

    Hi. You can just record your screen.

  • @jeppe7275
    @jeppe727510 ай бұрын

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

  • @mahmoudrezamohammadnejad8286
    @mahmoudrezamohammadnejad8286 Жыл бұрын

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

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    در اون صورت باید تصویر ها از فریم اصلی خارج بشن و تصویر های جدید بیان که یک مقدار پیچیده تر میشه. یک ویدیو در این رابطه دارم. لطف کنید لینک زیر رو چک کنید. kzread.info/dash/bejne/lIVtprVtd5yscps.html

  • @mohebanwari1832
    @mohebanwari1832 Жыл бұрын

    its the persian accent thats killen me man. hahahah

  • @fauzannadeem1569
    @fauzannadeem1569 Жыл бұрын

    Is this possible for the developers ?

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    Yes, it is.

  • @rp.azarias
    @rp.azarias Жыл бұрын

    why theres no resize option after i created variants?

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    Did you use Auto Layout?

  • @PrasadVarshanMusic
    @PrasadVarshanMusic7 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    6 ай бұрын

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

  • @abhidraws

    @abhidraws

    5 ай бұрын

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

  • @mahmoudrezamohammadnejad8286
    @mahmoudrezamohammadnejad8286 Жыл бұрын

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

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

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

  • @psyntist5620
    @psyntist5620 Жыл бұрын

    how to add multiple pics like in the beginning of the video?

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    You just need to add more frames to it with different sizes.

  • @psyntist5620

    @psyntist5620

    Жыл бұрын

    @@DesignWithArash Yes I tried and found myself in a very messy situation😂

  • @abhinavpawar6794
    @abhinavpawar6794 Жыл бұрын

    Hey I tried your Prototype was 90%Done🎉but last corousal item was not that fluid 🤗

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    Hey. Check the resizing option of your items.

  • @melquizedec
    @melquizedec2 ай бұрын

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

  • @malejarivera1029
    @malejarivera10298 ай бұрын

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

  • @AdorableEbony

    @AdorableEbony

    8 ай бұрын

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

  • @amangadpale9284

    @amangadpale9284

    8 ай бұрын

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

  • @YoLoSiH
    @YoLoSiH Жыл бұрын

    its no work brouh

  • @nicolasbrun9795
    @nicolasbrun97955 ай бұрын

    NO WORK

  • @davidkunugi5607
    @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

    @malejarivera1029

    8 ай бұрын

    Yes! I couldn't make it work!