3D Carousel in Figma Using Smart Animate | Prototyping Tutorial
HTML-код
- Опубликовано: 30 июн 2023
- 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
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 :)
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.
amazing tutorial . so fun to design it .thank you
So Amazing technique!
I loved the design what u have done. Pls make more videos like this
simple and useful, thanks !
What a video man! Thanks a lot 🙏
this is so cool, I hope to see more of your videos :))
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!
Super! ✨
Really good
Appreciate your efforts.
😄
"Wow, this design is absolutely breathtaking!
Thank you! Really appreciate it.
Thank you so much!😍😍😍😍😍
its Amazing bro ❤
Love this tutorial ❤❤❤ Thank you so much
We're glad to hear that you loved the tutorial! 💜
Amazing 😍
Amazing
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
@@mdgolamrabby156 from where he got these smoothy round shape images? i am struggling to find
I loved this tutorial. Thank you so much!
❤
Junior Developer crying in the corner
😂😂😂😂
😂
LMAOO
😂😂
For real. 😅
This is nice. ❤🎉
Clean tutorial but hope for full tutorial videos in future.
Thanks for sharing
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!!!!
Thank you so much❤❤
Excellent tutorial 👍
Glad you liked it!
Nice! How do you export the prototype video from figma to put it into Aftereffects?
thank you, that was helpful🙏
Glad it was helpful 🙂
thank you i learn new one>
Great
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
This was the best tutorial ! Love from India😃
Thank you very much. We are very happy to hear that you liked i! ☺
amazing tutorial.. can i embedded this in a website?
That is amazing. But I have a question, How can we have the images?
Good jobs
it can be done with wordpress elementor? or thru code only? thanks for cool tutorials bro.
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
cool
Thank you! So simple and easy to understand, even tho im not an English speaker hehe Thank you! Finally I did it! Yahoo
Thanks....
thankyou sir
Amazing job 👏 where can I get files used to exercise?
Would you be able to send the link to the website where you downloaded the images with the food dish?
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 :)
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 :)!
Very nice sir🎉
Very happy to hear that you liked it :)
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 !!
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
From where we can collect images ....
Please give link or else please explain how did u got those images
Can we use this in our Funnelish/Shopify Pages somehow?
from where u got these smoothy round shape images? i am struggling to find ♥ ♥
I love the design, but as a programmer i would hate to create it ^^
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?
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?
hello how did u done thos vector from behind the text?
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?
from where to find these round images of soothy please tell me
Ooook.. But where did you get the images from???
nice
We are delighted to hear that you like the carousel animation. :)
subscriiiiibe🥰 tnx for sharing this awesome video❣
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?
@@salonidwivedi5324 naaah!
how to crop images?like those ones with fruits
Hi !
Where can download the images with good pixel?
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
😍😍
waaaawwwww
what do do after making this design i mean we need to add plugin in wordpress for this design help please
where did you get the mockups
Which software use for it ?
translator how to export this carousel to elementor?
WOW, I wonder how you put that prototype into a running laptop screen?
We used After Effects. 🙂
How do you create this Laptop Rotation mockup in the end 7:47
Do you have any video teaching how to create this in Html and css ?
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!
How overflow is hidden??? In the frames
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.:(
Can I become a ui designer or ux designer if am only know Figma?
But how to export animation to a hosting service or how to host it.
😍😘
I liked the design.Can anyone have html css js for this webdesign ??.
where can i get these 3D images?
plz image name or link,,?
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!
A designer's dream is a developer's nightmare indeed
how to add the default layout which is shown
I want to code it, can i have assets ?
from where to take pictures?
where can i get the images
Where you are downloading the pictures
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!!
How to export this animations in figma ???
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
i did the same thing but my product doesn't move it only changes
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
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 🍪💐.
Hey I did not get that rotating part can any one explain
heyy can you provide the source from where you have downloaded these resources
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 i make this responsive for my website?
yes you can use figma auto layout and constraint to make responsive design