3D Carousel in Figma Using Smart Animate | Prototyping Tutorial
Вставка
- Опубліковано 27 вер 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
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.
This was the best tutorial ! Love from India😃
Thank you very much. We are very happy to hear that you liked i! ☺
I loved this tutorial. Thank you so much!
❤
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
Love this tutorial ❤❤❤ Thank you so much
We're glad to hear that you loved the tutorial! 💜
@@uxpeak where you get these pic
This tutorial is amazing and I'm improving my figma skill thank you so much ❤
Excellent tutorial 👍
Glad you liked it!
amazing tutorial . so fun to design it .thank you
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!
Junior Developer crying in the corner
😂😂😂😂
😂
LMAOO
😂😂
For real. 😅
I loved the design what u have done. Pls make more videos like this
Wow' interesting .it's helpful for every designer.Thanks lot.
simple and useful, thanks !
Wow, this tutorial was super helpful and interesting. Absolutely love the animation!
amazing tutorial.. can i embedded this in a website?
I love the design, but as a programmer i would hate to create it ^^
i did the same thing but my product doesn't move it only changes
this is so cool, I hope to see more of your videos :))
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!!!!!
Very nice sir🎉
Very happy to hear that you liked it :)
Really good
Appreciate your efforts.
😄
Amazing
Thank you! So simple and easy to understand, even tho im not an English speaker hehe Thank you! Finally I did it! Yahoo
plz image name or link,,?
Clean tutorial but hope for full tutorial videos in future.
This is nice. ❤🎉
its Amazing bro ❤
Would you be able to send the link to the website where you downloaded the images with the food dish?
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
thank you i learn new one>
Excellent Design..!! PLease provide the project files or the assets you used.
what abou the programmer
WOW, I wonder how you put that prototype into a running laptop screen?
We used After Effects. 🙂
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
Amazing 😍
Amazing job 👏 where can I get files used to exercise?
this looks awesome! How can this be converted into a website from figma?
Very Nice
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!!
it works but when i put them into new web frame it stopped working what should i do
nice
We are delighted to hear that you like the carousel animation. :)
Good jobs
thankyou sir
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
translator how to export this carousel to elementor?
cool
wish if you started from scratch
Imeges kdr sy Mily gi please
I tried the same but my bowl is not rotating :((((((99
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 !!
where did you get the mockups
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!
it can be done with wordpress elementor? or thru code only? thanks for cool tutorials bro.
From where we can collect images ....
Please give link or else please explain how did u got those images
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?
Ooook.. But where did you get the images from???
i made this animation with html css js but with pizza :)
How overflow is hidden??? In the frames
Hi !
Where can download the images with good pixel?
How do I integrate this with WordPress without coding?
Is I possible to do it in canva like that?
hello how did u done thos vector from behind the text?
Do you have any video teaching how to create this in Html and css ?
And that’s how you get a sub
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
where to get images?
Can we use this in our Funnelish/Shopify Pages somehow?
I know how to prototype but how to export this prototype in framer
how to crop images?like those ones with fruits
But how to export animation to a hosting service or how to host it.
how to add the default layout which is shown
Hey I did not get that rotating part can any one explain
how this to mobile?
I liked the design.Can anyone have html css js for this webdesign ??.
Which software use for it ?
It will be a headache for developers 😅
where can i get these 3D images?
How to export this animations in figma ???
waaaawwwww
where can i get the images
i need this photos
plz also provide link to the images !!!
A designer's dream is a developer's nightmare indeed
The group of circle which was in rotating things is not going inside the frame and it comes out to whole circle🤧
Can anyone tell me how to create this shape?
i need the png images plss send me
IMAGE FILE PLZ ??
Does anyone know how to make this in html coding with js and css
do anyone have code for this design
Software name sir please
Please make a video for converting Figma design to live web without code and for free LOL because we are beginners
Pls add the images nd resources
wowo thankyou so much for these, can u give me the file sir?
can you share exercise file Please
Привет из России 🇷🇺 😊👋
Читаю коменты и заодно учу язык 😂
Can u share the the photo ?
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!
Can you give free files of this pngs
if you want more follower give people figma file so you see your grow early
please share ready html website files