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!
https://uiadrian.gumroad.com/l/prototyping-pack
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 – https://instagram.com/uiadrian
Twitter – https://twitter.com/uiuxadrian
Linkedin – https://linkedin.com/in/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 π
https://howtodesignbetter.com/design-manual
For website designers & freelancers π
https://howtodesignbetter.com/web-design-guide
My Figma Mastery video course π
https://howtodesignbetter.com/figma-mastery
source
No file in this description
Very well bro
bro please tell me how to figma design convert in html and css. beacuse i can create a design in figma but how i convert in code..
.
now tell me how to code this?
how much money i can make if i lean figma and all
Amazing channel bro congratulations and thanks for the content (I'm from Brazil and I really like your content)
u earnd a new subscriber bro
Layer – Multiply is not working for meπ’
Thank you so much, great tutorial.
where is file of the product
I'm not able to paste the files in at 1:52. When I paste it just pastes them as an png, all one layer and it adds a white background
How do I do this in html, css?
can i use this designe on wordpress ?
Like it super helping from Philippines
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?
Hello please the shift + space key is opening prototyping not moving the background how do I fix this
thanks a lot! this mean to me that i am leaning from the beginner
I canβt change text because by whole photo is selected so how I write on that photo for selected image
Hello brother !
I copied the properties of those Labels in Adobe illustrator and pasted in Figma as you did but it pasted as ''Image'' but for they all are separate components.
help me with this problem !
how can we covert this into code
Frontend dev be like: π
Best tutorial!!!
You are amazing!!!
unable to use the mask, it always becomes transparent even when I duplicate the can
You've just earned a subscriber. Good work brother.
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. π
Anyone here willing to upload tutorial how to do that using CSS??
pls can you post all the images here its hard to find them
I hate designers… Making my work so hard day in day out
Great π
Thank you for the video! It's so useful for me! But I have met a problem is when I am dragging to another page, I found out that m,y floating fruit didnt drop down as yours, may I know how can I do it? Thank you
After user as mask the whole desktop got blank , what mistake did i made ??
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
idk bro i singing payphone right now
I'm unable to apply multiply on can and the background, either its applying mask or multiply but not both at the same time, any idea anyone?
Found the issue, we need 2 images of can, one will be used for masking. Took me full day to figure it out
U getting a free subscriber now
fronted developer is dead after this videoπππβ
The frontend dev is crying kkkk
Great tutorial, thank you! It's actually simpler than it may seem at first glance!
Beautiful work Adrian
the frontend look at it…
I'm a front end dev and this scares me π
Crazy falling shadow from a jar. The shadow of a pencil-thick jar. As mechanics for the slider will go, but the visual component leaves much to be desired.