In this video I walk you through designing a clean 3D animated button in Figma, step by step. I start from the basics—adding the button text (“Download”), pulling in a download icon (I use Feather Icons), and setting up Auto Layout so spacing and padding stay consistent. Then I style the button with a linear gradient fill, a big corner radius (999), and a thicker stroke so it feels bold and UI-ready. After that, I build the “3D + glossy” vibe using a simple masking setup. I duplicate the button layers, create a wrapper frame, turn off clip content, and then add a reflection using a couple of thin rectangles with low opacity. I mask the reflection using a dedicated mask layer, and I use arrow keys to nudge things around so I don’t accidentally drag layers out of the wrapper. Finally, I bring in a few decorative shapes, prep two wrapper states, and convert everything into component variants. The magic happens in Prototype: I connect the variants with “While hovering” and Smart Animate (Gentle). You end up with a slick hover interaction—reflection slides, shapes appear, and the whole button has that subtle 3D depth. I also linked the free Figma file so you can download it and follow along.