The art and influence of motion | Figma Blog (opens in new tab)

Motion helps digital interfaces communicate in ways that resemble the physical world. UX designer Katie Swindler argues that animation can clarify state, build mental models, improve perceived responsiveness, and add personality—but only when it serves a clear purpose. Effective motion balances practicality with restraint and must remain accessible to people who cannot or should not experience animation.

Motion as a Human-Centered Language

• People naturally interpret facial expressions, gestures, and movement alongside spoken information; interfaces can use motion similarly.
• Animations communicate:
  • Progress, such as loading bars
  • Errors, such as a field shaking after an incorrect password
  • Change, such as charts recalibrating after a page refresh
• Motion helps translate a digital environment into terms understood by a brain shaped by interaction with a physical, three-dimensional world.
• It gives users information for building mental models without requiring explicit explanation.

Designing Familiar Physical Metaphors

• Digital animations can borrow from familiar physical behavior.
• A sliding menu or “drawer” suggests that:
  • It can be opened and closed repeatedly
  • Its contents remain available when reopened
• These familiar cues make interfaces feel intuitive.
• Figma examples include animated cursor-chat bubbles and the celebratory shake of the FigJam Timer.

Purpose-Driven Microanimations

• Microanimations should solve a specific user or system problem rather than exist merely for decoration.
• A short one- to two-second transition can disguise unavoidable backend processing delays and make a product feel more responsive.
• Motion should be evaluated with the same discipline as icons: adding more visual elements is not automatically beneficial.
• Designers should consider whether text, a static visual, or no additional communication would work better.

Balancing Practicality and Personality

• The strongest motion combines functional guidance with a distinct sense of character.
• Animations should be fast, subtle, and respectful of the user’s time.
• Swindler highlights Apple’s “sprout” or “Genie in the Bottle” animation:
  • Minimizing a window visually pulls it into its dock icon.
  • Restoring it reverses the motion, showing where the window came from and where it will return.
• This type of animation provides orientation and delight without distracting from the task.

Accessibility and Common Mistakes

• Motion must never be essential to understanding or operating an interface.
• Certain animations can trigger people with epilepsy or create barriers for users with motion-related sensitivities.
• Excessive or frenetic movement can:
  • Interrupt users
  • Create confusion and visual busyness
  • Add unnecessary steps
  • Frustrate users and weaken brand affinity
• Every animation should be selected carefully and used with restraint to solve a user problem elegantly.

Motion is most effective when it communicates meaning, reinforces familiar behavior, and adds personality without demanding attention. Designers should prototype animations deliberately, test them for accessibility, and remove any movement that does not clearly improve the experience.