Figma's animation features, particularly Smart Animate, enhance usability by adding subtle motion to UI components like icons, buttons, and cards. Animations guide users, indicate progress, and provide instant feedback—transforming static designs into engaging experiences.
At Boundev, we help teams master modern design tools to create exceptional user experiences. This tutorial covers three practical examples: animating a favorite icon, building an interactive CTA button, and creating a complex product card with nested animations.
Animation Timing Guidelines
Optimal speeds for different interaction types:
Tutorial 1: Animating a "Favorite" Icon
Goal: Create a star icon that toggles between an outline (default) and a solid fill (filled) when clicked—providing instant visual feedback.
Create Default Star
Use Figma's shape tool to draw a star. Remove the fill and set a stroke (e.g., blue, 2px). This creates the outline state.
Add Variants
Convert to a component and add a variant named "filled." In the second variant, add a fill that matches the stroke color to create the solid state.
Configure Prototyping
Set up the interaction:
Trigger: On click | Action: Change to | Animation: Smart animate | Easing: Ease out | Speed: 200ms
Add Reversibility
Create a second transition from "filled" back to "default" so users can "unfavorite" items. Use the same Smart Animate settings.
Tutorial 2: Call-to-Action (CTA) Button
Goal: Create a button with three interactive states: default, hover, and pressed—each with smooth transitions.
| Step | Action | Configuration |
|---|---|---|
| 1. Create Button | Draw rectangle with text | Example: "Read more" button |
| 2. Add Variants | Create 3 states | default, hovered, pressed |
| 3. Style States | Progressive darkening | Darker fills for hover/pressed |
| 4. Hover Transition | Default → Hovered | While hovering, Smart animate, 200ms |
| 5. Press Transition | Hovered → Pressed | While pressing, Smart animate, 200ms |
Tutorial 3: Product Card with Nested Animations
Goal: Animate a complex card with background image, text, and nested components (favorite icon + CTA button) that each retain their individual animations.
Card Layout Setup
Hover State Changes
Prototyping Configuration
Trigger: While hovering | Animation: Smart animate | Speed: 600ms
Why 600ms? Slower speed allows users to process complex movements involving multiple elements. Quick micro-interactions use 200ms, but multi-element cards need more time.
Smart Animate: How It Works
Layer Matching
Smart Animate automatically creates transitions between layers with matching names across variants.
Property Detection
Detects changes in position, size, rotation, fill, stroke, and opacity—animating all simultaneously.
Nested Logic
Components nested inside parent components retain their individual animations and interactive states.
Animation Best Practices
Speed Consistency
Use 200ms for quick feedback (clicks, hovers) and 600ms for complex transitions. Consistency creates predictable, learnable interfaces.
Component Reusability
Build animated components once and reuse across projects. This saves time and ensures a unified design system.
Subtle Feedback
Animations should enhance usability, not distract. Color changes, pulses, and smooth transitions provide feedback without overwhelming users.
Frequently Asked Questions
How do you create animation in Figma?
Leverage the "Smart Animate" feature to automate transitions between variants. Create component variants with different states, then use Smart Animate in the prototype view to create seamless transitions.
Can Figma be used for motion graphics?
Yes, for simple UI transitions and interactive elements. For complex 3D or video motion graphics, specialized tools like Adobe After Effects or Apple's Motion are recommended.
Is Figma animation free?
Yes. Figma offers a free basic tier ($0) that supports prototyping, animation, and collaboration with unlimited drafts and 3 save files.
What is the best animation speed for buttons?
Use 200ms for button micro-interactions (hover, press). This speed aligns with user expectations for quick feedback and feels responsive without being jarring.
Do nested components keep their animations?
Yes. When you nest animated components (like buttons or icons) inside parent components (like cards), each nested component retains its individual interactive animations.
What easing should I use for Smart Animate?
"Ease out" is recommended for most UI animations. It creates natural-feeling motion that starts quickly and slows at the end, matching how users expect digital interfaces to respond.
Ready to Build Engaging UI Components?
Boundev helps teams master modern design tools and create exceptional user experiences through animation and interaction design.
Get Design Help