Tutorial🔴🟣🔵 How to design and animate a rolling chrome ball in Figma . - Lets dive in!🧵:

Step #1 - Create a chrome ball. (Actually not as difficult as you'd think)

Step #2 - Group 4 arrows and place them inside the ball for a future 'rolling' effect. Also, expand the layer with the noise texture in the ball.

Step #3 - Place your ball on your own project display frame. Then, create a separate frame and put your text and a rectangle with a color gradient inside it, this will be used in the animation.

Step #4 - Duplicate your project display a couple times and create animation 'frames': 2 for hover and 2 for click.

Step #5 - In Figma, select the 'prototype' setting. Then, connect the frames to create the animation.

Thats a wrap!

🌈✨ Transform playtime into learning time with The Smurfs on Nintendo Switch! 🎓🎮 Perfect for curious minds. Buy now: [The Smurfs: Learn and Play]( #Smurfs #NintendoSwitch

@figma That's a smooth result, man, but I loved the tutorial format even more! The rotation of the four-arrows resource blew my mind, smart!

@figma Thanks man🙌😂. I really appreciate that👊

@figma I think Figma designers shouldn't be allowed to design something that they cannot code

@figma Pretty sure you should credit 😉 @drawsgood since that ball is a pure copy of his.

@figma @drawsgood And while I’m at it, I should probably find and give credit to all the other people who have ever created a 3D rendition of a chrome ball.👀😉😋