Figma Carousel Animation in 8 Minutes
Вставка
- Опубліковано 28 чер 2024
- 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.
👉 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
No problem.
This is so insightful. Appreciate you bro.
Thanks.
I love your videos, you make it seem really easy, love that, thanks!!
Glad you like them! Thank you.
Very cool way of using components!
Thanks.
I love it thank yoooou ❤️❤️ love to see more 👏🏻👏🏻👏🏻
Thank you so much.
your videos are very helpful & I'm really inspired by your work. thank you Arash
My pleasure 😊
thanks mate for this wonderful lesson, now im going to use it onto my project
No problem. Glad it helped!
this is so amazing and it works perfectly, thank you so much :)
You're welcome!
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.
Glad to hear that.
I really like the way you explain things. It is simple and easy to understand. Thank you!
Happy to hear that! Thank you.
Can you please show how you added more than three images to the carousel like the example at the beginning of the video?
i was wondering the same!
Hi Arash your videos has helped me a lot in design thank you so much
Hi. No problem. Glad to hear that.
when you add text in the frame you say to add another auto layout what is the first auto layout?
As expected, this is op 🎉🎉🎉🙌🙌
Thanks.
I want this effect in after delay, is it possible ?
Thank you 🙏🏽 you just saved my life 😂
It was a good one. I am trying it to replicate the style myself.
Thanks.
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.
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.
@@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 you for sharing!!!
No problem.
This is so insightful. Thank you arash🎉🎉 Please how can I apply for your live animations master class
No problem. Do you mean my Prototyping course?
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
@@DesignWithArash can I get ur ui ux design course link
Starting to learn UI/UX design. To get inspiration, watch this video. I don't understand what he's doing 😄.
how do you make the horizontal navigation?
Thank you so much ☺
No problem.
amazing
Thanks.
How to add more images in that carousel.
Ti amo❤
Thank you.
Merci
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! :)
Hi. Sure.
Thank yoou!!
No problem.
Thanks Bro.
No problem.
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 🙏
No problem. Thanks.
Hello can you plz tell me how to prototype video export in figma full hd quality?
Hi. You can just record your screen.
مرسی
خواهش میکنم.
Great
Thanks.
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
U can do so by putting extra frame behind the component
why theres no resize option after i created variants?
Did you use Auto Layout?
سلام ، در قسمت پروتوتایپ نمیشه از حالت افتر دیلی استفاده کرد ؟ سپاس
نه برای این کرسل چون برای این کرسل باید بتونین عکس هارو خودتون حرکت بدین.
Is this possible for the developers ?
Yes, it is.
how to add multiple pics like in the beginning of the video?
You just need to add more frames to it with different sizes.
@@DesignWithArash Yes I tried and found myself in a very messy situation😂
thank youuuuuuuuuuuuuuuuuuuu
No problem.
ببخشید یک سئوال دیگه ، اگر تعداد تصویرها بیشتر بود مثلا شش عدد پروتوتایپ را چطور بدیم که همه تصاویر هر شش حالت ( سایز ) را داشه باشند ؟ اصولا لینک این شش تصویر باید با قاعده ای انجام بشه یا اینکه میتوان رندم به هم وصل کرد ؟ سپاس
در اون صورت باید تصویر ها از فریم اصلی خارج بشن و تصویر های جدید بیان که یک مقدار پیچیده تر میشه. یک ویدیو در این رابطه دارم. لطف کنید لینک زیر رو چک کنید.
ua-cam.com/video/bQ9DS4G9FB8/v-deo.html
Did you ever actually code it, it is beautiful but i have a hard time putting it into code 😛
if i want to make this carousal for more than 3 images, then what should i need to do??
You just need to make the frame bigger and duplicate one of the slides and adjust its size.
@@DesignWithArash with all of them being fixed width? or fill container? and should the last frame be the largest??
Hey I tried your Prototype was 90%Done🎉but last corousal item was not that fluid 🤗
Hey. Check the resizing option of your items.
I dont get ti... why Material Design is not ready for this?
its the persian accent thats killen me man. hahahah
It is nothing like the example. It would be better to teach what you show in the example.
It's the exact thing he demonstrated. Just take enough time to view and practice as you're viewing it
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?
Yes! I couldn't make it work!