Create an Animated Image Carousel | Figma Tutorial
Вставка
- Опубліковано 13 лют 2023
- In this video, I'm going to show you how to create a modern animated image carousel in Figma using interactive components.
Try Figma for free:
bit.ly/3LiRVEF
👉 Become a UI Designer with my UI Design & Figma Mastery course:
bit.ly/43v79vX
👉 Get my FREE UI/UX Design e-book here:
bit.ly/45KHoKJ
📸 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.
Thank you so much! Your recommendation to move the items with the arrow keys was a complete game changer - so easy to get everything in the right position and keep them nested. You made my workflow so much better!🎉
Arash, thank you so much for your tutorials! So clear and understandable!
Glad you liked them.
perfect, thanks Arash to helping us. no one explain so clear like you. well done buddy
No problem. Thank you.
Your videos are always helpful. Thank you very much for these tutorials.
Glad you like them! Thanks.
Thanks for this! I especially liked the clear explanation of the common prototyping mistake - I was doing this as well!
Glad it was helpful!
Thank you so much for your amazing tutorials , it so easy to understand, thank you so much
No problem. Thanks.
Hi Arash, thanks for a well detailed tutorial.
This was very clear and understandable.👍
Hi. Thank you.
What a legend! Best tutorial
Thanks.
Where do you get this kind of images
Arash that is perfect thank you
No problem.
thank you so much ! legend!
No problem. Hope you liked it.
Your way of teaching really amazing it's nice ❤
Thanks a lot 😊
Hi, your tutorials are fantastic! I have a question: is it possible to add a button to each card and then link it to different pages of the prototype?
Hi. Thank you. Yes, it is.
thank you bro
No problem.
grreat sir appreciate you
No problem.
Very nice sir now new learn ui ux
No problem.
i have a problem at Variant 2 When i prototype at image 2 have 2 drag (to 1 and to 3) so it doesn't understand direction to 1 or to 3. i can't move like you did.
It was super helpful! thank you so much! I have a question though, I want to add the component to an existing frame and the component is too small, how could I make it bigger? thanks in advance
No problem. You can scale it up. Select the component, hit K to select the Scale tool and then scale it up.
Why u didn't convert 3 watches images to auto lay out?
Anda sangat hebat. Tetap rendah hati, karena orang membutuhkanmu.
Thank you for your video, Arash! Would it be possible to share the file with these assets? I like to follow along and practice :)
No problem. Sure. You can open the following project and copy everything and paste them in a new design file.
www.figma.com/file/fatYjfeDjX8kgogCMF4UdU/Image-Carousel?node-id=0%3A1&t=8C1hLW3EPKpHmQoe-1
@@DesignWithArash where to get these watch images ??
arash hi ,i have doubt in figma if we created design system , how the design system import or use it a project, copy from another file or how we can use practically in each single project ??
Hi. If you have a paid account you can head over to the Assets tab and you'll see a Book icon. In the Library window you can publish your design system and whenever you create a new project you can just import it in the same section.
Is there any way to export this animation in Vsc code. I mean animmation, like javascript?
Nope.
I have 10 icons in total and at any point I'm only able to display 8 icons (2 rows X 4 icons) so that means I need to drag to page 2. I tried your tutorial but so far only the indicator works like your tutorial and when I tried dragging, the icons simply fades in and out unlike yours that gets pushed out of the screen. Please advise what went wrong?
EDIT: Managed to figure out all the icons needs to be detached.
Glad you resolved the issue,
Nice one...where did you get the images please
Thank you. From the Apple's website and then I removed the background.
@@DesignWithArash but how'd you keep the resolution so high
Gud one. Can u pls make video on masks ? Thank u.
Thanks. Sure.
Hello Sir, I've created this but now how can Ishare this to instagram and on other social media platforms? Can u pls help me with that?
Hi. You can just use a screen recorder to record your screen.
@@DesignWithArash Thank u so much Sir!
HOW WE CAN INDICATE YOU CAN SHOW DIRECTLY IF YOU CAN STEPBY STEP WE CAN BETTER UNDERSTAND THANKS
I can not slide all 3 image to left after make variants
Please double check your connections.
درود بزرگوار عالی بود . شما دوره های اموزشی به ربان فارسی هم دارید ؟ سپاس
سلام. ممنونم از لطفتون. متاسفانه خیر.
@@DesignWithArash آموزش هاتون فوق العاده است ، اما برای آموزش ترتیب ویدیوهاتون را نمیدونم
Hey, do you ever check your Gmail messages?
Hi. Yes, I do. Did you send me an email?
Thank you for give this video very useful to me 😊
You are welcome. Glad it helped.