Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Contact Us
  • Home
  • Figma Design – Figma Learn
  • Create prototypes
  • Guides

Prototype animations

Written by Figma Man

Updated at June 19th, 2025

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Administration – Figma Learn
    Manage files and projects Manage a team Manage your account Manage a Figma organization Manage Enterprise plan settings and permissions Billing Manage Figma in a school
  • Figma Design – Figma Learn
    Create prototypes Import and export Create designs Tour the interface Dev Mode Work together in files Build design systems Figma Draw
  • Get started – Figma Learn
    Set up your account Layers 101
  • FigJam – Figma Learn
    Import and export Run meetings Work on boards Tour the interface
  • Community – Figma Learn
    Explore the Community Creator tools and resources
  • Help – Figma Learn
    Troubleshoot Common questions Work with support
  • Work across Figma – Figma Learn
    Figma AI Work across Figma
  • Courses, tutorials, projects – Figma Learn
    Courses Projects
  • Figma Slides – Figma Learn
    Create and edit slides Present slide decks Tour the interface Import and export
  • Figma Buzz – Figma Learn
    Templates in Figma Buzz Create and edit assets in Figma Buzz Overview
  • Figma Make – Figma Learn
    Tour the interface Work with Figma Make
  • Figma Sites – Figma Learn
    Design a site Create webpages and breakpoints Make your site interactive Preview and publish a site Tour the interface
+ More

Table of Contents

Instant Dissolve Smart Animate Move In / Move Out Push Slide In / Slide Out

Before you start

Who can use this feature

Users on any team or plan.

Users with can edit access can create prototypes.

New to Prototyping? Check out our Getting Started with Prototyping guide.

Animations can be used to create smooth transitions between pages and define the behavior for actions like expanding a menu, swiping between pages, or opening a gallery.

Instant

The Instant transition will immediately display the Destination Frame, when the hotspot is interacted with (clicked, hovered over, or pressed).

https://static.helpjuice.com/helpjuice_production/uploads/upload/image/29242/5418659/file-ZurWTwFCqH.gif

Dissolve

The Dissolve transition will fade in the Destination frame, on top of the original frame.

Supports:

  • Duration
  • Easing

https://static.helpjuice.com/helpjuice_production/uploads/upload/image/29242/5418660/file-CE2Faj9XWB.gif

Smart Animate

Smart Animate looks for matching layers that exist across multiple frames. For layers that match, we recognize what's changed and apply transitions to seamlessly move between them.

Supports:

  • Duration
  • Easing

https://static.helpjuice.com/helpjuice_production/uploads/upload/image/29242/5418661/file-aI3r9NOwPe.gif

Move In / Move Out

The Move transition will slide the Destination frame into or out of view, above the original frame.

Supports:

  • Easing
  • Direction
  • Duration

https://static.helpjuice.com/helpjuice_production/uploads/upload/image/29242/5418662/file-0NUbcVCx2Q.gif

Push

The Push transition will push out the original frame, as the Destination frame is moved into view. This is the perfect transition for replicating a swiping gesture.

Supports:

  • Direction
  • Easing
  • Duration

https://static.helpjuice.com/helpjuice_production/uploads/upload/image/29242/5418663/file-KFVnV7nW0F.gif

Slide In / Slide Out

The Slide will move the Destination frame into or out of view. Slide will slowly offset the frame as it dissolves, while the Move transition keeps the original frame stationary.

Supports:

  • Direction
  • Easing
  • Duration

https://static.helpjuice.com/helpjuice_production/uploads/upload/image/29242/5418664/file-7QvwXDb8s9.gif

Tip! Use prototype easing and spring animation curves to give your animations a unique and natural feel.

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • State management for prototypes
  • Prototype easing and spring animations
  • Prototype triggers
  • Prototype actions
  • Guide to prototyping in Figma
  • Blog
  • Best practices
  • QR code generator
  • Color wheel
  • Colors
  • Color picker
  • Color palettes
  • Color palette generator
  • Color contrast checker
  • Font Library
  • Templates
  • Developers
  • Integrations
  • Affiliate program
  • Resource library
  • Reports and insights
  • Support
  • Status
  • Legal and privacy
  • Modern slavery statement
  • Climate disclosure statement
  • COMPARE
  • Sketch
  • Adobe XD
  • Framer
  • Miro
  • COMPANY
  • Events
  • Customers
  • Careers
  • Newsroom
Expand