Figma Carousel Animation in 8 Minutes
HTML-код
- Опубликовано: 7 июн 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.
I really like the way you explain things. It is simple and easy to understand. Thank you!
This is so insightful. Appreciate you bro.
Thanks.
I love it thank yoooou ❤️❤️ love to see more 👏🏻👏🏻👏🏻
Thank you so much.
I love your videos, you make it seem really easy, love that, thanks!!
Glad you like them! Thank you.
your videos are very helpful & I'm really inspired by your work. thank you Arash
My pleasure 😊
this is so amazing and it works perfectly, thank you so much :)
You're welcome!
Can you please show how you added more than three images to the carousel like the example at the beginning of the video?
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.
Very cool way of using components!
Thanks.
thanks mate for this wonderful lesson, now im going to use it onto my project
No problem. Glad it helped!
As expected, this is op 🎉🎉🎉🙌🙌
Thanks.
Thank you 🙏🏽 you just saved my life 😂
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?
thank you for sharing!!!
No problem.
I want this effect in after delay, is it possible ?
It was a good one. I am trying it to replicate the style myself.
Thanks.
amazing
Thanks.
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
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.
Ti amo❤
Thank you.
Thank you so much ☺
No problem.
Thank yoou!!
No problem.
Starting to learn UI/UX design. To get inspiration, watch this video. I don't understand what he's doing 😄.
Thanks Bro.
No problem.
مرسی
خواهش میکنم.
Great
Thanks.
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.
Merci
No problem.
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
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.
How to add more images in that carousel.
Hello can you plz tell me how to prototype video export in figma full hd quality?
Hi. You can just record your screen.
thank youuuuuuuuuuuuuuuuuuuu
No problem.
سلام ، در قسمت پروتوتایپ نمیشه از حالت افتر دیلی استفاده کرد ؟ سپاس
نه برای این کرسل چون برای این کرسل باید بتونین عکس هارو خودتون حرکت بدین.
why theres no resize option after i created variants?
Did you use Auto Layout?
Did you ever actually code it, it is beautiful but i have a hard time putting it into code 😛
ببخشید یک سئوال دیگه ، اگر تعداد تصویرها بیشتر بود مثلا شش عدد پروتوتایپ را چطور بدیم که همه تصاویر هر شش حالت ( سایز ) را داشه باشند ؟ اصولا لینک این شش تصویر باید با قاعده ای انجام بشه یا اینکه میتوان رندم به هم وصل کرد ؟ سپاس
در اون صورت باید تصویر ها از فریم اصلی خارج بشن و تصویر های جدید بیان که یک مقدار پیچیده تر میشه. یک ویدیو در این رابطه دارم. لطف کنید لینک زیر رو چک کنید.
ruclips.net/video/bQ9DS4G9FB8/видео.html
Is this possible for the developers ?
Yes, it is.
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??
its the persian accent thats killen me man. hahahah
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😂
I dont get ti... why Material Design is not ready for this?
Hey I tried your Prototype was 90%Done🎉but last corousal item was not that fluid 🤗
Hey. Check the resizing option of your items.
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!