Page Transitions in Figma are visual animations used to control how one screen or frame changes into another during prototype playback. They make static designs feel interactive and help communicate navigation, hierarchy, continuity, and user movement through an interface.
Figma provides several prototype animation types, including Instant, Dissolve, Smart Animate, Move In, Move Out, Push, Slide In, and Slide Out. Depending on the transition, designers can control direction, easing, spring behavior, and duration. :contentReference[oaicite:0]{index=0}
For professional Figma learning, visit JustAcademy Figma Training and Register for Figma Course Demo.
A page transition is the visual animation that occurs when a prototype moves from one frame or screen to another. Instead of instantly replacing the current screen, Figma can animate the movement between the starting frame and destination frame.
Starting Frame
|
| User Interaction
v
Prototype Connection
|
| Page Transition
v
Destination Frame
Page Transition: A visual effect that controls how the interface changes from one prototype screen to another.
| Term | Meaning |
|---|---|
| Starting Frame | The current screen before navigation. |
| Hotspot | The interactive object where the user performs an action. |
| Trigger | The event that starts the interaction. |
| Action | The behavior performed after the trigger. |
| Destination | The frame or screen where the interaction ends. |
| Transition | The visual animation between the starting and destination screens. |
| Duration | The amount of time taken by the transition. |
| Easing | Controls the acceleration and deceleration of the animation. |
Page transitions are important because they make prototypes more realistic and help users understand how different screens are connected.
| Page Navigation | Page Transition |
|---|---|
| Defines where the user goes. | Defines how the user visually moves there. |
| Example: Navigate to Dashboard. | Example: Dashboard slides in from the right. |
| Focuses on destination. | Focuses on animation and movement. |
| Uses prototype actions. | Uses animation settings. |
Figma's interaction details allow designers to configure the trigger, action, destination, and animation settings for prototype interactions. :contentReference[oaicite:1]{index=1}
A hotspot is the interactive area where the user performs an action. It can be a button, icon, card, image, text element, navigation item, or another interactive layer.
Login Button
|
| Hotspot
v
User Clicks Button
|
v
Page Transition
|
v
Dashboard
A trigger determines when an interaction starts. Common triggers include click, tap, drag, hover, press, keyboard interaction, and after-delay interactions.
| Trigger | Typical Use |
|---|---|
| On Click | Desktop buttons and navigation. |
| On Tap | Mobile interfaces. |
| On Drag | Sliders and swipe interactions. |
| While Hovering | Desktop hover effects. |
| While Pressing | Pressed button states. |
| After Delay | Automatic screen transitions. |
| Keyboard | Keyboard-controlled interactions. |
An action defines what happens after a trigger occurs. For page transitions, the most common action is Navigate to.
Trigger: On Click
Action: Navigate to
Destination: Dashboard
Animation: Smart Animate
The destination frame is the screen that appears after the interaction. For example, clicking a Login button can navigate from a Login frame to a Dashboard frame.
Login Frame
|
| Navigate to
v
Dashboard Frame
In standard Figma prototype navigation, the destination is generally a top-level frame rather than an individual object inside another frame. :contentReference[oaicite:2]{index=2}
Figma's prototype workflow uses connections to link screens, followed by interaction and animation settings before previewing the result. :contentReference[oaicite:3]{index=3}
Design Screen A
|
v
Select Button
|
v
Create Connection
|
v
Select Trigger
|
v
Select Action
|
v
Select Destination
|
v
Select Animation
|
v
Set Duration & Easing
|
v
Preview Prototype
Instant is the simplest transition. It immediately displays the destination frame without a visible animation.
It is useful when navigation should feel immediate and direct.
Home
|
| Instant
v
Profile
Figma describes Instant as immediately displaying the destination frame when the hotspot is interacted with. :contentReference[oaicite:4]{index=4}
Dissolve fades the destination frame over the original frame. It creates a subtle transition without strong directional movement.
Screen A
|
| Dissolve
v
Screen B
Figma's Dissolve transition supports duration settings. :contentReference[oaicite:5]{index=5}
Smart Animate looks for matching layers across frames, identifies what has changed, and animates supported differences between those layers. It is one of the most useful Figma features for creating advanced prototype animations. :contentReference[oaicite:6]{index=6}
Frame 1
Object at Position A
|
| Smart Animate
v
Frame 2
Object at Position B
Figma documents Smart Animate as useful for loading sequences, parallax scrolling, touch gestures, sliders, toggles, expanding content, and pull-to-refresh interactions. :contentReference[oaicite:7]{index=7}
Suppose a product card is small on the Home page and becomes a large product image on the Product Details page.
Home Screen
+------------------+
| |
| Small Product |
| Image |
| |
+------------------+
|
| Smart Animate
v
Product Details
+------------------+
| |
| Large Product |
| Image |
| |
+------------------+
Smart Animate uses layer names and hierarchy to identify matching layers between frames. Therefore, consistent layer naming is very important when creating Smart Animate transitions. :contentReference[oaicite:8]{index=8}
Frame 1 Frame 2
Product Image ---------- Product Image
Product Title ---------- Product Title
Product Price ---------- Product Price
Buy Button ------------- Buy Button
Duplicating a frame before making changes is often a useful method because it preserves the layer naming and hierarchy required for matching. :contentReference[oaicite:9]{index=9}
| Property | Example |
|---|---|
| Position | An object moves from left to right. |
| Scale | An image grows from small to large. |
| Rotation | An icon rotates between frames. |
| Fill | A button changes color. |
| Object Changes | Matching elements visually transform between states. |
Figma specifically documents position, scale, rotation, and fill among Smart Animate's supported properties. :contentReference[oaicite:10]{index=10}
Move In brings the destination frame into view above the original frame. The designer can select the direction from which the destination enters.
Current Screen
|
| Move In
v
Destination Screen
enters from selected direction
Move In supports direction, easing, and duration settings. :contentReference[oaicite:11]{index=11}
Move Out moves the current frame out of view and reveals the destination behind it.
Current Frame
|
| Move Out
v
Destination Frame
|
v
Visible Screen
Move Out can be useful when an interface behaves like a panel or layered navigation system. :contentReference[oaicite:12]{index=12}
Push moves the destination frame into view while pushing the current frame out. It is particularly useful for swipe-like navigation.
Screen 1
|
| Push Right
v
Screen 2
Push supports direction, easing, and duration. :contentReference[oaicite:13]{index=13}
Slide In moves the destination frame into view while the previous frame dissolves during the transition.
Screen A
|
| Slide In
v
Screen B
Slide In supports direction, easing, and duration. :contentReference[oaicite:14]{index=14}
Slide Out moves the current frame out of view while the destination becomes visible behind it.
Screen A
|
| Slide Out
v
Screen B
Slide Out supports direction, easing, and duration. :contentReference[oaicite:15]{index=15}
| Move | Slide |
|---|---|
| The destination or current frame moves while the other frame remains more stationary. | The frame moves while the previous content dissolves. |
| Creates stronger movement. | Creates a softer visual transition. |
| Useful for panels and layered screens. | Useful for smooth page-to-page movement. |
Figma notes that Slide offsets the frame while it dissolves, whereas Move keeps the original frame stationary. :contentReference[oaicite:16]{index=16}
| Push | Slide |
|---|---|
| Pushes the original frame out. | Moves the destination while dissolving the previous frame. |
| Strong directional effect. | Softer directional effect. |
| Good for swipe-like navigation. | Good for subtle screen transitions. |
Direction determines the direction from which a transition enters or leaves the screen for transition types that support directional controls.
| Direction | Possible Use |
|---|---|
| Left | Previous or reverse-style navigation. |
| Right | Forward navigation. |
| Up | Opening upward content. |
| Down | Opening downward content. |
Figma's prototype animation controls support left, right, up, and down directions for applicable transitions. :contentReference[oaicite:17]{index=17}
Duration controls how long the transition takes to complete. Figma allows prototype transition durations from 1ms to 10000ms, or 10 seconds. :contentReference[oaicite:18]{index=18}
| Duration Style | Effect |
|---|---|
| Very Short | Fast and responsive. |
| Short | Suitable for common UI interactions. |
| Medium | More noticeable and expressive. |
| Long | Suitable for dramatic presentations or special effects. |
Transition duration should depend on the purpose of the interaction. Routine navigation generally benefits from shorter animations, while presentation-focused animations can use longer durations.
Routine Navigation
|
v
Short Duration
Important Visual Change
|
v
Medium Duration
Presentation Animation
|
v
Longer Duration
Easing controls how quickly an animation accelerates or decelerates during its movement. It can make a transition feel natural, energetic, smooth, or mechanical.
Figma provides easing presets, custom Bézier curves, and spring animation options. :contentReference[oaicite:19]{index=19}
Linear easing moves at a constant rate from beginning to end.
Start -------------------- End
Constant Speed
Linear motion can be useful for specific effects but may feel mechanical for everyday UI movement.
Ease In starts slowly and accelerates toward the end.
Slow ---> Faster ---> FastIt can work well when an element is leaving the screen.
Ease Out starts quickly and slows down as it reaches the destination.
Fast ---> Slower ---> SlowIt can work well when important content is entering the screen. :contentReference[oaicite:20]{index=20}
Ease In and Out combines a slow beginning and slow ending with faster movement in the middle.
Slow ---> Fast ---> SlowThis creates a smooth and natural-feeling transition for many interface animations.
Figma allows designers to customize Bézier easing curves. A custom curve can provide more control over the acceleration and deceleration of an animation. :contentReference[oaicite:21]{index=21}
Start
|
| Custom Curve
v
Acceleration
|
v
Deceleration
|
v
End
Spring animation creates motion that behaves more like a physical spring. It can produce gentle, quick, bouncy, or elastic-feeling movement.
Figma provides spring presets and allows designers to use spring behavior in prototype animations. :contentReference[oaicite:22]{index=22}
A Login page can transition to a Dashboard after the user selects the Login button.
Login Screen
|
| Click Login
v
Navigate to Dashboard
|
| Dissolve / Smart Animate
v
Dashboard
Login
|
| Create Account
v
Signup
|
| Slide In
v
Signup Screen
A Slide or Move transition can communicate that the Signup screen is a new page entering the current experience.
Home
|
v
Product Listing
|
v
Product Details
|
v
Cart
|
v
Checkout
|
v
Order Confirmation
Smart Animate can be especially useful when a product image or card continues visually from one screen to another.
Product Listing
[Small Product Image]
|
| Smart Animate
v
Product Details
[Large Product Image]
Keep the product image layer named consistently between the two frames so Figma can identify it as a matching layer.
Home
|
v
Restaurant List
|
v
Restaurant Details
|
v
Food Details
|
v
Cart
|
v
Checkout
|
v
Order Tracking
|
v
Order Complete
Push and Slide transitions can communicate forward movement through the ordering process, while Smart Animate can be used for visual continuity.
Home ---- Search ---- Orders ---- Profile
| | | |
+----------+-----------+-----------+
Navigation
Bottom navigation is used frequently, so transitions should generally remain subtle and fast.
Dashboard
|
+--> Analytics
|
+--> Users
|
+--> Reports
|
+--> Settings
Instant or subtle Dissolve transitions are often appropriate for dashboards because users may switch between sections frequently.
Welcome
|
| Push
v
Features
|
| Push
v
Get Started
Push or Slide transitions can communicate progress through onboarding screens.
Image 1
|
| Swipe / Click
v
Image 2
|
| Swipe / Click
v
Image 3
Dissolve can create a soft gallery transition, while Push, Slide, or Smart Animate can communicate directional movement.
Carousels generally benefit from consistent horizontal movement.
Card 1 ---> Card 2 ---> Card 3 ---> Card 4Push and Slide are useful when the user should feel that content is moving horizontally.
Step 1
Personal Details
|
| Next
v
Step 2
Address
|
| Next
v
Step 3
Confirmation
A consistent directional transition can help communicate progress through a multi-step form.
Cart
|
v
Shipping
|
v
Payment
|
v
Review
|
v
Success
Checkout transitions should be clear and restrained because users are completing an important task.
Login
|
| Invalid Credentials
v
Error State
|
| Try Again
v
Login
A subtle Dissolve or state transition can communicate an error without distracting the user.
Form
|
| Submit
v
Processing
|
v
Success
|
| Continue
v
Dashboard
Dissolve or Smart Animate can create a smooth transition into a success state.
Some interactions do not require navigation to a completely different page. Figma overlays allow additional content to appear above the current screen, which is useful for alerts, confirmations, hamburger menus, tooltips, and keyboards. :contentReference[oaicite:23]{index=23}
Current Screen
|
| Open Overlay
v
+------------------+
| Confirmation |
| Are you sure? |
+------------------+
| Page Transition | Overlay |
|---|---|
| Usually navigates to another frame. | Displays additional content above the current screen. |
| Useful for page navigation. | Useful for menus, dialogs, alerts, and tooltips. |
| Current screen changes or transitions. | Current screen remains visible underneath. |
Back navigation allows users to return to the previous screen. Figma's Back action can automatically return to the previous frame without requiring a specific destination. :contentReference[oaicite:24]{index=24}
Home
|
v
Details
|
| Back
v
Home
Forward and backward navigation should feel logically related. If a screen enters from the right, the reverse interaction can use a corresponding direction so the user understands the hierarchy.
List ---- Push ----> Details
List <--- Reverse --- Details
After Delay can automatically trigger an interaction after a specified amount of time. It is useful for splash screens, loading states, onboarding sequences, and timed animations.
Splash Screen
|
| After Delay
v
Home Screen
Application Launch
|
v
Splash Screen
|
| After Delay
v
Home Screen
Automatic transitions should be short enough that they do not unnecessarily delay the user.
Figma can create loading animations using multiple frames, prototype connections, Smart Animate, and After Delay. A loading sequence can loop between frames to create a continuous effect. :contentReference[oaicite:25]{index=25}
Loading 1
|
| After Delay
v
Loading 2
|
| After Delay
v
Loading 3
|
+----------> Loading 1
Components and variants can be used to create reusable interactive states for buttons, tabs, menus, cards, navigation controls, and other UI elements.
Default Button
|
| Interaction
v
Active Variant
This approach is useful when the interaction changes the component state rather than navigating to a new page.
Default State
|
| On Click
v
Active State
|
| Change To
v
Selected State
Interactive components are useful for creating reusable interactions without duplicating complete screens for every small state change.
Variables can make prototypes more dynamic by allowing the design to remember values or states. For example, a selected tab, theme mode, quantity, or user state can influence what happens during navigation.
User Interaction
|
v
Set Variable
|
v
Navigation
|
v
Destination Frame
Conditional logic allows different actions to occur depending on whether a condition is true or false.
User Clicks Continue
|
v
Check Condition
/ \
True False
| |
v v
Dashboard Error
Figma supports conditional prototype actions using if/else logic. :contentReference[oaicite:26]{index=26}
Multiple actions can be associated with a trigger. When multiple actions are used on a trigger, they run sequentially.
On Click
|
+--> Set Variable
|
+--> Navigate to
|
+--> Additional Action
This can be useful when navigation needs to be combined with state changes or other prototype behavior. :contentReference[oaicite:27]{index=27}
Home
|
+--> About
|
+--> Services
|
+--> Portfolio
|
+--> Contact
For websites, subtle transitions are usually preferable to excessive animation because users often navigate between pages repeatedly.
Home
|
v
Category
|
v
Product
|
v
Cart
|
v
Checkout
|
v
Order Success
Use Smart Animate for important visual continuity and Push or Slide for directional page navigation.
Home
|
+--> About
|
+--> Skills
|
+--> Projects
|
+--> Contact
Dissolve can be used for subtle navigation, while Smart Animate can enhance hero sections, project cards, and selected visual elements.
Figma can combine Smart Animate matching layers with another main transition. Matching layers can Smart Animate while other content follows the selected main transition. :contentReference[oaicite:28]{index=28}
Push Transition
|
+--> Matching Layers
| |
| +--> Smart Animate
|
+--> Other Layers
|
+--> Push
Smart Animate considers both layer names and hierarchy. Incorrect layer organization can therefore produce unexpected animation results.
Frame
|
+-- Header
|
+-- Content
| |
| +-- Product
|
+-- Navigation
Organizing matching layers consistently between frames helps create predictable Smart Animate behavior. :contentReference[oaicite:29]{index=29}
| Problem | Possible Cause |
|---|---|
| Unexpected dissolve | Layers do not match correctly or contain unsupported properties. |
| Wrong object animates | Layer names or hierarchy cause unintended matching. |
| Object does not move | The matching properties may not have changed. |
| Animation looks messy | Layer order or hierarchy may be incorrect. |
| New object fades in | The destination contains a new layer without a matching layer. |
Figma documents that unsupported Smart Animate properties can result in a default Dissolve and that matching depends on layer name and hierarchy. :contentReference[oaicite:30]{index=30}
Gallery
|
+--> Image 1
|
+--> Image 2
|
+--> Image 3
A gallery can use Smart Animate for image expansion and Dissolve, Slide, or Push for movement between images. Figma's own gallery tutorial demonstrates Smart Animate between matching image layers. :contentReference[oaicite:31]{index=31}
Home
|
+--> Search
|
+--> Notifications
|
+--> Orders
|
+--> Profile
Mobile interfaces should generally use quick and consistent transitions because users interact with them frequently.
Dashboard
|
+--> Analytics
|
+--> Users
|
+--> Orders
|
+--> Reports
|
+--> Settings
Instant and subtle Dissolve transitions are often appropriate for dashboards where rapid navigation is important.
Form
|
| Submit
v
Processing
|
v
Success
|
| Continue
v
Dashboard
A subtle transition can communicate that the form submission has completed without overwhelming the user.
Animation should support the user's mental model. Good transitions communicate continuity, hierarchy, direction, and state changes instead of being used only for decoration.
Transitions should not make important information difficult to understand. Excessive motion can distract users, so animation should remain purposeful and support clear interaction design.
| Requirement | Recommended Transition |
|---|---|
| Immediate navigation | Instant |
| Soft screen change | Dissolve |
| Visual continuity | Smart Animate |
| Panel entering screen | Move In |
| Panel leaving screen | Move Out |
| Strong directional navigation | Push |
| Soft directional movement | Slide In / Slide Out |
| Physical movement | Spring |
Design Frames
|
v
Identify User Action
|
v
Select Hotspot
|
v
Create Connection
|
v
Select Trigger
|
v
Select Action
|
v
Select Destination
|
v
Choose Transition
|
v
Set Direction
|
v
Set Easing / Spring
|
v
Set Duration
|
v
Preview
|
v
Test
|
v
Refine
Create a login prototype containing Login, Signup, Forgot Password, Dashboard, and Error screens.
Login
|
+--> Signup
|
+--> Forgot Password
|
+--> Dashboard
|
+--> Error
Home
|
v
Categories
|
v
Product Listing
|
v
Product Details
|
v
Cart
|
v
Checkout
|
v
Payment
|
v
Success
Home
|
v
Restaurants
|
v
Restaurant Details
|
v
Food Details
|
v
Cart
|
v
Checkout
|
v
Order Tracking
|
v
Order Complete
Use consistent forward transitions through the ordering process and Smart Animate for important visual elements.
Dashboard
|
+--> Analytics
|
+--> Users
|
+--> Orders
|
+--> Reports
|
+--> Settings
Use subtle transitions because dashboard navigation is generally frequent and task-oriented.
Home
|
+--> Search
|
+--> Categories
|
+--> Details
|
+--> Cart
|
+--> Profile
Use short and consistent transitions. Reserve stronger animations for meaningful interactions such as opening details or expanding content.
After creating page transitions, preview the prototype and verify each interaction carefully.
| Test | Status |
|---|---|
| Correct hotspot selected | ☐ |
| Correct trigger configured | ☐ |
| Correct action selected | ☐ |
| Correct destination selected | ☐ |
| Correct transition selected | ☐ |
| Direction is correct | ☐ |
| Duration feels appropriate | ☐ |
| Easing feels natural | ☐ |
| Smart Animate layers match | ☐ |
| Back navigation works | ☐ |
| Complete flow works | ☐ |
Large prototypes can contain many frames and connections. Organize the prototype so that transitions are easy to understand and maintain.
Advanced prototypes can combine page transitions with variables, conditionals, interactive components, overlays, scrolling, video, and multiple actions.
User Action
|
v
Check State
|
v
Conditional
/ \
True False
| |
v v
Page A Page B
Variables and conditional actions can make page transitions respond to user state or stored values.
User Action
|
v
Read Variable
|
v
Condition
/ \
True False
| |
v v
Navigate Error
This approach is useful for realistic flows such as authentication, checkout rules, onboarding completion, and personalized navigation. :contentReference[oaicite:32]{index=32}
Figma prototypes can include video interactions. Smart Animate can also preserve video progress when navigating between frames when the required matching setup is used. :contentReference[oaicite:33]{index=33}
Video Thumbnail
|
| Click
v
Video Player
|
| Smart Animate
v
Expanded Video
| Concept | Remember |
|---|---|
| Page Transition | Visual animation between prototype screens. |
| Instant | Displays the destination immediately. |
| Dissolve | Fades the destination over the current frame. |
| Smart Animate | Animates matching layers between frames. |
| Move In | Moves the destination into view. |
| Move Out | Moves the current frame out of view. |
| Push | Pushes the current frame out while the destination enters. |
| Slide In | Slides the destination into view while dissolving the previous frame. |
| Slide Out | Slides the current frame away while revealing the destination. |
| Direction | Controls the direction of applicable transitions. |
| Easing | Controls acceleration and deceleration. |
| Duration | Controls animation time. |
| Spring | Creates physical-style movement. |
A Page Transition is the visual animation used when moving from one prototype frame to another.
Navigation determines where the user goes, while the transition determines how the movement between screens is visually displayed.
Smart Animate identifies matching layers across frames and animates supported changes between them.
Figma uses layer names and hierarchy when identifying matching layers between frames.
Dissolve fades the destination frame over the original frame.
Push moves the destination into view while pushing the current frame out.
Move In brings the destination frame into view above the original frame.
Slide In moves the destination frame into view while dissolving the previous frame.
Duration defines how long the transition takes to complete.
Easing controls the acceleration and deceleration of an animation.
After Delay starts an interaction automatically after a specified amount of time.
Direction helps communicate movement and navigation hierarchy.
Smart Animate should be used when matching elements need to visually transform between frames.
Maintain consistent layer names and hierarchy, and duplicate frames when appropriate to preserve matching structure.
Figma documents a duration range from 1ms to 10000ms, which equals 10 seconds. :contentReference[oaicite:34]{index=34}
Learn Figma Frames
|
v
Learn Prototyping
|
v
Learn Connections
|
v
Learn Triggers & Actions
|
v
Learn Basic Transitions
|
v
Learn Direction
|
v
Learn Duration
|
v
Learn Easing
|
v
Learn Smart Animate
|
v
Learn Components
|
v
Learn Variables & Conditionals
|
v
Build Complete Interactive Prototype
Page Transitions are an essential part of Figma prototyping because they transform static screens into interactive experiences. By combining prototype connections, triggers, actions, destinations, animations, direction, duration, easing, spring behavior, and Smart Animate, designers can create realistic and professional user flows.
The most important principle is to use motion with purpose. A good page transition should communicate navigation, preserve visual continuity, establish hierarchy, and make the prototype easier to understand without unnecessarily slowing down the user.
For further learning, visit JustAcademy Figma Training and Register for Figma Course Demo.
