Learn how to bring your designs to life by creating interactive animations in Figma. Prototyping animations helps you test user flows and create dynamic, engaging user experiences without writing any code.
Create at least two frames: a starting state and an ending state. Ensure the objects you want to animate exist on both frames and have identical layer names. For example, if a button moves, the button layer must be named the same on both frames.
In the top-right sidebar, click on the Prototype tab to switch from the Design panel to the prototyping workspace.
Select the object on your starting frame that will trigger the animation (like a button). A circular node (+) will appear. Click and drag this node to your destination frame to create a connection.
With the connection selected, the Interaction details panel will appear. Set your trigger (e.g., 'On click'). For the animation type, select Smart Animate. Figma will automatically animate the layers with matching names between the two frames.
Fine-tune your animation by adjusting the duration (e.g., 300ms) and the easing curve (e.g., 'Ease in and out') in the Interaction details panel to control the speed and feel of the transition.
Click the Present (play) icon in the top-right corner of the toolbar to open the presentation view in a new tab and test your interactive animation.
Tips for Better Figma Animations
Smart Animate relies on matching layer names to identify which objects to animate. Double-check your layer names in both the start and end frames if an animation isn't working as expected.
For reusable animated elements like hover states or toggles, create them as component variants and set up the interactions within the component itself. This saves time and ensures consistency.
The easing curve dramatically changes the personality of your animation. Try 'Ease in' for objects entering the screen and 'Ease out' for objects leaving. Custom easing offers even more control.
Smart Animate can transition more than just position. It can also animate size, rotation, opacity, fill color, stroke, and corner radius, allowing for complex and rich visual effects.
Explore other Figma guides and shortcuts