3D Carousel in Figma Using Smart Animate | Prototyping Tutorial
Vložit
- čas přidán 22. 08. 2024
- Welcome to our Figma tutorial where we dive into the creation of a captivating 3D carousel using Figma's Smart Animate feature! If you've ever wanted to elevate your web design skills and create eye-catching, interactive elements, this tutorial is perfect for you.
In this step-by-step guide, we'll walk you through the process of designing a 3D carousel from scratch. You'll learn how to craft a visually stunning carousel of smoothie bowls, with a seamless flow of changing visuals that is sure to engage any viewer.
Don't forget to hit the subscribe button for more design tutorials and inspiration. Happy designing!
Join our community
Instagram - / uxpeak_
Twitter - / uxpeak_
Linkedin - / uxpeak
#Figma #prototyping #animation #uidesign
This tutorial is amazing! I'm a data scientist who recently trying to get into the world of UX/UI and your videos are exactly what i need! Thank you so much!! Keep up with the good work!
Hi there! 😊 Wow, your words truly made our day! It's so exciting to hear that a data scientist like you is venturing into the world of UX/UI and finding our tutorials useful. Stay tuned for more.
@@uxpeak you should share your images that your use your project . Pls share it in the video description
Wow, this tutorial was super helpful and interesting. Absolutely love the animation!
Thanks a lot! I didn't even expect this tutorial to be so detailed and helpful! Thousands thanks :)
"Wow, this design is absolutely breathtaking!
Thank you! Really appreciate it.
Amazing! Thank you for sharing. I think It might work for a donut website i wanted to build. Can't wait to practice it this afternoon.
Junior Developer crying in the corner
😂😂😂😂
😂
LMAOO
😂😂
For real. 😅
This was the best tutorial ! Love from India😃
Thank you very much. We are very happy to hear that you liked i! ☺
Fantastic tutorial! The carousel looks amazing!
Thank you for your kind words! We're delighted to hear that you like the carousel animation. Stay tuned for more! Happy designing!
That is amazing. But I have a question, How can we have the images?
Its ammaaazzinnggg❤❤❤ great work you are awsomee
Happy to hear that you liked it :)
I loved this tutorial. Thank you so much!
❤
Excellent tutorial 👍
Glad you liked it!
Love this tutorial ❤❤❤ Thank you so much
We're glad to hear that you loved the tutorial! 💜
@@uxpeak where you get these pic
What a video man! Thanks a lot 🙏
This tutorial is amazing and I'm improving my figma skill thank you so much ❤
I love this thank you!
We're thrilled to hear that you loved the tutorial! Stay tuned for more insightful tutorials and thank you for your support!
thank you, that was helpful🙏
Glad it was helpful 🙂
i loved it, but i don't understand how the bowls were spinning and how the background fruits were fading when switching can you demonstrate that please? thanx in advance
amazing tutorial . so fun to design it .thank you
Amazing
Thank you! Stay tuned for more exciting and informative content.
I loved the design what u have done. Pls make more videos like this
Very nice sir🎉
Very happy to hear that you liked it :)
Wow' interesting .it's helpful for every designer.Thanks lot.
amazing tutorial.. can i embedded this in a website?
simple and useful, thanks !
this is so cool, I hope to see more of your videos :))
Super! ✨
So Amazing technique!
and then how to publish it and how to tranfer them into framer to finish full site to add some links and staff like thet, cause when i transfer them into framer the animation doesnt work anymore, plss some advices. Thanks :)!
Good bro it's very useful for practice do some more projects keep it up ❤🎉
I love the design, but as a programmer i would hate to create it ^^
Really good
Appreciate your efforts.
😄
Hello, I followed the tutorial step by step and it worked out well, my question is, how do I export all the frames together as HTML, or better, how can I export this animated banner to WordPress using Elementor?
Clean tutorial but hope for full tutorial videos in future.
This is nice. ❤🎉
Thank you so much!😍😍😍😍😍
Where do you get the images of smoothie bowl i need that
Why he would tell you that.. They are clever. They don't want you to make the same design 😂
Hello! Unfortunately, we don't have the rights to distribute some of the assets we used in this video.
Don't worry, you can find similar images for your own project! You can check out freepik.com and search for "smoothie bowl" and "fruit on white background" to find very similar images.
Once you've got your images, you can use a background removal tool to isolate the objects. This way, you can recreate the designs with your own unique twist!
Happy designing!
Thank you! So simple and easy to understand, even tho im not an English speaker hehe Thank you! Finally I did it! Yahoo
its Amazing bro ❤
Thank you!!!!
Thank you so much❤❤
i did the same thing but my product doesn't move it only changes
plz image name or link,,?
Thanks for sharing
Great
thank you i learn new one>
hi im gonna try this for my college project , could you please clarify if It is possible to transport this carousel to Webflow along with its animations? please let me know and thank you for this wonderful tutorial!!!!!
this was so easy to follow. Thank you so much. However my question is does it just work for a landing page? i tried it for a complete homepage and the prototype just moves to the next frame that i prototyped it with, how can i design it to still show the same homepage with all the other elements?
Same problem here
Mind blowing, Wow this is super helpful thank you so much❤❤❤ i was wondering if it’s possible that you add the items in the video as in an exercise file for beginners to rehearse and apply with you everything?
Thank you :)
Amazing 😍
WOW, I wonder how you put that prototype into a running laptop screen?
We used After Effects. 🙂
Hi awesome tutorial, could you please tell from where did you get those fruit and bowls pictures? I search mine from google but not able to find any kind of picturr this beautiful and clear.
Plz reply
Same issue bruh, did you find anything helpful?
@@designverseofsaloni naaah!
Hola, se podria realizar la primera sección como un componente, y los demas como variantes? Asi lo instancio en un wireframe por ejemplo
subscriiiiibe🥰 tnx for sharing this awesome video❣
nice
We are delighted to hear that you like the carousel animation. :)
Very Nice
Okay I got it but something is off, when I press on each one, they go by to fast when you select a different one
Good jobs
Thank you for your tutorial first. After done this design how to download and how to use this video? How to share in social networks? Where will use this video
Excellent Design..!! PLease provide the project files or the assets you used.
Would you be able to send the link to the website where you downloaded the images with the food dish?
Nice! How do you export the prototype video from figma to put it into Aftereffects?
cool
Amazing job 👏 where can I get files used to exercise?
Sir the left portion smoothie curve design how to do sir kindly tell me sir
you can use Pen tool in figma to make any kind of shapes
Bro, what if i want to add more than 4 products like 10 or 15 products. Can i do it in a single eclipse ?
yess you can
this looks awesome! How can this be converted into a website from figma?
what abou the programmer
Hey, you can make videos with subtle in Spanish please, great job; from colombia ❤
Hello! Thank you so much for your support all the way from Colombia. ❤️ We're considering adding subtitles in various languages, including Spanish, to make our content more accessible. We'll certainly take your suggestion into account. Stay tuned and thanks again for your feedback!
Just honestly curious, whats the point of creating these designs if they are able to be translated directly to actual code that can be used in a real website? Unless you can with a plugin and I'm missing something... Like, is this just for design concept purposes?
It makes the development process easier since you already know all the properties of each element on the page.
Can you code something like that without a prototype ? 😮
@@fayaz4663 Oh yeah I can see how it's easier for planning purposes
Have a nice day 🍪💐.
It doesn't rotate from the 1st plate to the second, I only see a transition in dissolving, but from the 2nd to the end and the options are all the same...help please!!
thankyou sir
And that’s how you get a sub
Thanks....
A designer's dream is a developer's nightmare indeed
I tried the same but my bowl is not rotating :((((((99
it works but when i put them into new web frame it stopped working what should i do
SINCE THIS IS NOT A COMPONENET HOW TO ADD THIS TO MY WHOLE PAGE WITHOUT HAVING TO CREATE THE WHOLE PAGE WITHOUT HAVING TO DUPLICATE 4 PAGES EACH FOR THE INDIVIDUAL FRUITS
translator how to export this carousel to elementor?
😍😘
I added a carousel like this in the second part of the page for showing categories. However it seems to scroll up when the next button is clicked. How do I prevent that?
😍😍
It will be a headache for developers 😅
Is it possible to insert 8 smoothie balls in that circle?
Nice! But may I know after having this animated frame done, how do we export it into HTML package? Appreciate if you can help. cause I having an issues of after animated into few frame it seem I can't export it into a HTML package through anima to my developer.:(
If I want to practice how I am going to get that image of the cereal can you give us the link of downloading the image??
It will help a lot !!
what do do after making this design i mean we need to add plugin in wordpress for this design help please
it can be done with wordpress elementor? or thru code only? thanks for cool tutorials bro.
I know how to prototype but how to export this prototype in framer
Can i ask a question are this design live on the internet working with a backend also . Can
ui awesome design be connected with the backend also ? Please i need to know this
I want to code it, can i have assets ?
Ooook.. But where did you get the images from???
Which plugin you used to export this design??
Yoo can you share the design file please
From where we can collect images ....
Please give link or else please explain how did u got those images
waaaawwwww
Can i make this responsive for my website?
yes you can use figma auto layout and constraint to make responsive design
where did you get the mockups
Do you have any video teaching how to create this in Html and css ?
Can we see it in HTML, CSS, and JavaScript!!!! Anyone have any links?