techlist.io
KREN
figma

Designing for top feature requests, like Smart Animate | Figma Blog (opens in new tab)

figmaprototypinginteraction-designsmart-animateuser-interface-animationdrag-interactions

Figma introduced Smart Animate and Drag in 2019 to support more expressive, realistic prototypes. Smart Animate automatically animates matching objects between frames, while Drag lets users control transitions with finger movement. The features were shaped by customer feedback, recurring interaction patterns, and Figma’s effort to integrate advanced animation into its existing workflow.

New Prototyping Features

  • Smart Animate automatically animates similar objects across frames.
  • It improves existing transitions and supports interactions such as:
    • Dropdowns and pop-ups
    • Button hover states
    • Tab changes
    • Moving or disappearing objects
  • Drag allows users to control a transition by dragging with a finger.
  • Figma provided a product tutorial and help article to explain how to use the features.

Learning from User Pain

  • Figma used in-product NPS surveys as an ongoing source of qualitative feedback.
  • Rather than focusing only on NPS scores, the team categorized comments to identify recurring problems.
  • Customers wanted:
    • Simple, smooth animations for everyday interactions
    • A way to communicate advanced transitions to developers
    • Auto-animation and drag or slide transitions without relying on other tools
  • Several survey respondents became early beta customers.

Identifying Broad Interaction Patterns

  • Figma collected animation examples from customer conversations and studied interactive interfaces in everyday products.
  • The team avoided designing Smart Animate around a single use case so the feature would remain broadly useful.
  • Two major patterns shaped the first release:
    • Objects change while the user remains on the same screen: for example, hover states, expanding menus, or content revealed after swiping.
    • Some elements remain fixed while most content changes: common in tabbed navigation, where content moves and the tab indicator shifts.
  • Focusing on these shared patterns helped Figma keep the initial scope manageable while addressing many different customer needs.

Integrating Animation into Figma

  • Figma wanted Smart Animate and Drag to feel consistent with its existing prototyping tools rather than like separate systems.
  • Supporting automatic animation required revisiting fundamentals such as layer naming.
  • Figma updated how objects are automatically named and renamed during creation and duplication.
  • Layers can now match for animation based on hierarchy, naming, and order, allowing Smart Animate to work with minimal manual setup.

Figma’s approach combined direct customer research with pattern-based product design. The practical recommendation is to start with real user pain, identify common behaviors across use cases, and integrate new capabilities into familiar workflows rather than building isolated features.