Figma Tutorial: 3D Carousel Slider (+ free files 🎁)
HTML-код
- Опубликовано: 19 июн 2024
- Join 2,500+ students and master the foundations of UI design for $9 with my new ebook!
👉 howtodesignbetter.com/ebook
Learn how to create amazing 3D carousel sliders with rotating effects in Figma, with no plugins, videos, and no Lottie files, just simple techniques!
And don't forget to grab the free Figma files to test this animation yourself!
uiadrian.gumroad.com/l/protot...
Timestamps:
00:00 - Intro
00:18 - Mockups, labels, and fruits
02:56 - Creating our design
05:41 - Creating realistic labels
07:51 - Adding shadows & fruits
10:37 - The "3D rotation"
12:20 - Sliding background
13:40 - Animating text
15:26 - Prototyping time!
16:29 - Play the Prototype!
17:06 - Outro
Connect with me 👋
Instagram - / uiadrian
Twitter - / uiuxadrian
Linkedin - / adrian-kuleszo
Thanks for dropping by my channel - if you enjoy what you see, feel free to subscribe and hit that bell notification, and I promise to bring you a ton of free value every week!
----------------------------------------------
P.S. If you're interested in learning UI/UX design feel free to check out my design ebooks - there are free samples available (110+ pages total).
For mobile designers 👇
howtodesignbetter.com/design-...
For website designers & freelancers 👇
howtodesignbetter.com/web-des...
My Figma Mastery video course 👇
howtodesignbetter.com/figma-m... 
Хобби
This was so fun to re-create side by side with you, ngl finding the right model, the right pictures was much harder than I thought it'd be lol. But it was so much fun, thank you Adrian, you're amazing!
I love how you have mentioned all the shortcuts on the screen you are using throughout the process. Being a beginner, getting stuck in these things is really frustrating. :D
Thank you so much for your awesome videos and this tutorial as a beginner. It was a success for me and so cool this can be done! Can't wait to try your other tutorials/videos!
Great tutorial, thank you! It's actually simpler than it may seem at first glance!
Loved video, didn't knew that figma can be this awesome.
Thanks for an amazing content bruh.
Fabulous! Thank you Adrian. Will be waiting more tutorials from you :D
I'm new to the world of UX/UI and these videos are such an inspiration to me, thank you so much.
You're welcome Edgardo! 😊
wow amazing,Thanks for the tutorial Adrian
"I've been looking for design tutorials, and this video is a gem. The way you share tips and shortcuts is incredibly valuable."
figma shortcuts www.youtube.com/@vCreativedesignideas?sub_confirmation=1
Thank you Adrian. That is very help channel for somebody who just begin UX road.
Very cool tutorial, it's crazy all the stuff you can do with Figma!
One thing I noticed in the end product is that the fruit shadows still show the apple ones, so that's something to keep in mind.
The shadows seem to be fine in the demonstration at the start. I wonder what the issue is.
Hi , Iam a fresher in this UI field and I enjoyed this .. Its really cool and new to learn. Thanks.
Beautiful work Adrian
this is great i follow the steps and it worth my time... thank your for sharing your knowledge
I’m very excited to try this! I’m a beginner in the world of UI/UX and thought this was so cool! I can’t wait. I’ll edit this once I finish it!
Have fun testing the files Andre!
@@uiadrian I finished it! Thank you for this tutorial. I learned a lot and it was a lot of fun! The prototype worked wonderful!
@@uiadrian love you bro big fan
OMG i'm in love😍😍😍! Thank you!🤩
Nice work man. U are amazing. 👏
You've just earned a subscriber. Good work brother.
This is the only detailed tutorial I've seen so far on this kind of animation, many thanks❤
Though when I tried the multiply layer to achieve the realistic look of the can it doesn't work
I’m a Japanese student. I enjoyed watching this video😊 I will try this animation soon!
Thank you so much, great tutorial.
Awesome! Adrian 😍
This is really cool. I have been following your designs and instagram for sometime and I must say that you're really creative.
Glad you like them! 🤝
Amazing channel bro congratulations and thanks for the content (I'm from Brazil and I really like your content)
Amazing work!
Hey adrian nice tutorial appreciate it!
Thank you so much for sharing! I can’t wait to try this out.
Hope you like it!
New subscriber here!! Great to know there are content creators like you brother!! More videos to come!
I truly appreciate it
Subscribed instantly thanks for the great tutorial
thanks a lot! this mean to me that i am leaning from the beginner
Thank you, this is amazing 🤩
amazing tutorial
thank you so much Adrian
Thanks Dung! I'm glad you liked it :)
SO cool! Def trying
Excelente muy bien explicado, me funciono al 100
Hi Adrian! This tutorial is amazing! Now I follow you even here! ✨
Really cool tutorial. Thank you 🔥
Happy to help! 😁✌️
I thought it very difficult to do but after watch this tutorial , I did it my first time.I love it your tutorial style ❤❤❤
I'm so glad! Thanks :)
Hi can you please tell me how did you edit vector image the fruit cider in adobe, thanks
Awesome!!👍
DID IT! but it was hard in the end ^^ Thanks!
I like this animation! It's cool
Thanks for sharing!
you are awesome man really helpfull tutorial
Amazing work really appreciated
Thank you! Cheers!
Amazing work love it 😍
Glad you like it! 😁
Awesome Tutorial, Adrian! Thank you for inspiring us!
Today we are challenging ourselves to recreate it on Day [14/30] of our April Design Challenge on FigChallenge!
🤩🤩🤩
Sounds great! Good luck Guys :)
Best tutorial!!!
Thank you so much.
Wwooooooooooooo so smooth and smart.
Really cool thanks for sharing!!!
You bet! Enjoy :)
Amazing work brother ❤
Thank you! Cheers!
Love this! You should've added in the three dots at the bottom to show it's a slider
looks cool
Very cool!
best explaining video ever saw...
thank you🙏
Beautiful 🥳
Thank you! 😊
You are amazing!!!
Amazing work
Thanks a lot Lucas! 😊
Finally I found my mentor bro you😊
QUE LOCURAAAA!
That's something very cool 😎
u earnd a new subscriber bro
Amazing
Keep going
I love it ❤❤
Thanks 😊 More coming soon!
Beautiful
Thanks you Lance!
Thank you for this video.
Glad it was helpful! 😊
Amazing work keep going
Thanks!
So smooth!!!!
Thanks Rahul!
such an amazing and informative video, especially you showing which keys you use for what, like the transparancy, was so good and made it wasy to follow. i still have a question though, is there a way to implement my design into a shopify store?
awesome 🤩🤩😍😍
Amazing!
Thanks a lot :)
Awesome 🔥
Thanks 🔥
thanks for the tutorial
Any time! :)
This design is really cool, I must have made a mistake, my prototype was not working properly. I'll try this again ❤
Really cool tutorial. Thanks you. I'm from Indonesia.
Thanks!
you are great🥰
Wow 🤩❤
It’s amazing, I want make same ❤️❤️❤️
Very well bro
Really a Good work
Thank you! Cheers!
NICE INFO
one of best tutorials if it wasn't the best
Great 👍
Like it super helping from Philippines
its Amazing Bro -_-
really help full
Happy to help 😁
Very good
Cant wait for you to have a 100k subscribers
Thank you Angelico! 😊 Maybe one day!
Branch into ui/ux design a bit changing from programming i like it so far
This was amazing. But how did you export the animated prototype??
Thank you for this wonderful tutorial! It seems that the link to the files is not available, it appears that the product is not for sale, could you make it accessible again? Thank you very much!!
Works for a metal can, bravo.
Cool!111
Great stuff! How can you replicate the same design on your actual live website and not on figma? I feel that's the challenging part..
it look grate
hola! te hago una pregunta: esa interactividad se podrá mostrar en un archivo pdf para interactuar con el movil?
o es netamente para utilizar en paginas webs?
Hi Adrian, Thanks for this insightful tutorial.
I'm having a glitch somewhere. Each time I change the labels to multiply, my prototype no longer shows the full-screen design.
Would you be able to help with that?
Amazing work👍🏻 will you do a full Figma tutorial for beginners please? Covering the new update too that would be a great course .. thanks
That's the plan!
You best
great video! one question, when I click shift+spacebar to move de elements, it pops up a window that does not let me do the animation sequence. any ideas why?