Figma's prototyping capabilities have matured significantly, allowing you to create realistic, interactive prototypes without leaving the design tool. Mastering these features lets you validate designs with users, communicate interactions to developers, and sell your vision to stakeholders.
Smart Animate
Smart Animate is Figma's most powerful animation feature. It automatically interpolates between two frames by matching layers with the same name. If a layer exists in both the starting and ending frame, Figma animates the differences in position, size, rotation, opacity, and fill.
How it works:
- Create two frames representing the before and after states
- Ensure matching layers have identical names in both frames
- Connect the frames with an interaction and select "Smart Animate" as the animation type
- Choose an easing curve and duration
Common use cases:
- Tab switching — Move an active indicator bar between tabs by positioning it differently in each frame
- Card expansion — Grow a card from a thumbnail to a full detail view
- Toggle states — Animate a switch from off to on by moving the thumb and changing the track color
- List reordering — Show items moving to new positions
Practical tip: Smart Animate works best when the change between frames is moderate. Dramatically different layouts may produce unexpected results. If an animation looks wrong, check that matching layers have exactly the same name and hierarchy.
Interaction Types
Figma offers several trigger types for prototyping interactions:
- On click — The most common trigger. Use for buttons, links, and tappable elements.
- On hover — Fires when the cursor enters an element. Use for hover states, tooltips, and dropdown previews. Remember that hover does not exist on mobile.
- While pressing — Active only while the user holds down the mouse. Use for press states and long-press interactions.
- On drag — Fires when an element is dragged. Use for sliders, swipeable cards, and drag-to-reorder.
- After delay — Triggers automatically after a specified time. Use for splash screens, auto-advancing carousels, and loading state transitions.
- Mouse enter/leave — Similar to hover but fires on a specific element boundary. Useful for complex hover interactions on component groups.
Scroll Animations
Many modern interfaces rely on scroll-triggered animations. Figma supports several scroll-based prototyping techniques:
Scrollable frames: Set a frame's content to overflow and enable scrolling (vertical, horizontal, or both). This is essential for prototyping long pages and horizontally scrollable galleries.
Fixed position elements: Mark layers as "Fix position when scrolling" to create sticky headers, floating action buttons, or persistent navigation bars. The element stays in place while the content behind it scrolls.
Parallax effects: By nesting scrollable frames and using Smart Animate between scroll positions, you can approximate parallax scrolling effects for presentation prototypes.
Practical tip: When prototyping a scrollable page, set the frame height to the viewport size (e.g., 844px for iPhone) and let the content extend beyond it. Figma will automatically make it scrollable.
Overlay Transitions
Overlays display a frame on top of the current view without navigating away. They are essential for prototyping modals, dropdown menus, bottom sheets, and toast notifications.
Setting up an overlay:
- Create the overlay content as a separate frame (e.g., a modal dialog)
- On your trigger element, set the action to "Open Overlay"
- Configure the overlay position — center for modals, bottom for bottom sheets, or relative to the trigger for dropdowns
- Add a background dimming effect by checking "Add background behind overlay" and setting the color to a semi-transparent black
- Enable "Close when clicking outside" for dismiss behavior
Practical tip: Create your overlay frames at the exact size of their content, not at the full screen size. Figma positions the overlay frame based on your chosen position setting, so a modal-sized frame centered on the screen produces the correct result.
Micro-Interactions
Micro-interactions are small, focused animations that provide feedback and delight. In Figma prototypes, you can simulate many common micro-interactions:
- Button press feedback — Use "While pressing" trigger to show a slightly smaller or darker button state
- Like animation — Smart Animate a heart icon from outline to filled with a scale bounce
- Input focus — On click, animate a text field's border color change and label movement
- Notification badge — Use "After delay" to animate a badge appearing with a subtle scale-up
Keep micro-interactions subtle and fast. A duration of 150-300ms feels responsive without being sluggish. Use ease-out curves for elements entering the screen and ease-in for elements leaving.
Easing Curves
The easing curve determines how an animation accelerates and decelerates:
- Ease in — Starts slow, ends fast. Use for elements leaving the screen.
- Ease out — Starts fast, ends slow. Use for elements entering the screen. This is the most natural-feeling curve for UI animations.
- Ease in and out — Slow start and end with fast middle. Use for elements that stay on screen but change state.
- Linear — Constant speed. Rarely appropriate for UI — feels mechanical.
- Spring — Adds a bounce effect. Use sparingly for playful interactions.
Key Takeaways
- Smart Animate matches layers by name to create automatic transitions
- Use the right trigger type for each interaction context
- Overlays are essential for modals, menus, and bottom sheets
- Keep micro-interactions under 300ms with ease-out curves for a polished feel
- Test prototypes on actual devices to verify that interactions feel natural