Figma Advanced Interactions

Basic prototyping connects screens with simple clicks. Advanced interactions add realism — components that animate between states, overlays that respond to user input, draggable elements, and micro-animations that make a prototype feel like a working app.

Smart Animate

Smart Animate detects layers with the same name in two different frames and animates the differences between them. If a button moves from the bottom of Frame A to the top of Frame B, Smart Animate creates a smooth motion between those positions automatically.

Smart Animate Requirements

Both frames must contain a layer with the exact same name.
The layer must have at least one changed property (position, size, color, opacity, rotation).
The connection transition must be set to Smart Animate.

Smart Animate Example — Expanding Card

  FRAME A (collapsed card)         FRAME B (expanded card)
  +------------------+             +------------------+
  | Product Name     |             | Product Name     |
  | $29.99  [Buy]    |             | Full description |
  +------------------+             | text goes here.  |
  Layer: "Card"                    | $29.99   [Buy]   |
  Height: 80px                     +------------------+
                                   Layer: "Card"
                                   Height: 200px

  User clicks card in Frame A → Card animates to taller size in Frame B

Component Interactions (Interactive Components)

Interactive components let you add interactions directly inside a component — between its variants. The interaction lives in the component itself, so every instance automatically has that behavior without setting up separate frame-to-frame connections.

Building an Interactive Toggle

Create a component with two variants: State=Off (grey background, circle on left) and State=On (green background, circle on right).
In Prototype mode, select the "Off" variant inside the component set.
Drag from the element to the "On" variant. Set trigger to On Click and transition to Smart Animate.
Do the same from the "On" variant back to the "Off" variant.

Now every instance of this toggle component works interactively in the prototype. Click it once — it turns on. Click again — it turns off. No frame connections needed.

Toggle Interaction Diagram

  VARIANT: Off                     VARIANT: On
  +--[O      ]--+    On Click     +--[      O]--+
  | ●           | ─────────────>  |           ● |
  +-------------+   Smart Animate +-------------+
        |                                |
        +────────── On Click ────────────+

Overlays

An overlay opens a frame on top of the current screen. Overlays simulate modals, alerts, bottom sheets, tooltips, and context menus.

Creating an Overlay

Design a popup frame (e.g., a "Delete Confirmation" dialog).
In Prototype mode, create a connection from the delete button to this popup frame.
Set Action to Open Overlay.
Set Position: Centered (for modals) or Bottom (for bottom sheets).
Enable Background Interaction: Close on Click Outside to dismiss the overlay by clicking the background.

Overlay Positions

  Centered (Modal)       Bottom (Bottom Sheet)    Top (Notification)
  +----------------+     +----------------+       +----------------+
  |                |     |                |       | [Alert Banner] |
  | +----------+   |     |                |       +----------------+
  | |  Dialog  |   |     | +----------+   |
  | +----------+   |     | |  Sheet   |   |
  +----------------+     | +----------+   |
                         +----------------+

Swap Overlay

Swap Overlay replaces the current overlay with a new one without returning to the main screen. This is useful for wizard-style flows inside a modal — Step 1 swaps to Step 2 while the background remains the same.

Swap Overlay Flow

  Main Screen
      |── Open Overlay ──> [Step 1 Modal]
                               |── Swap Overlay ──> [Step 2 Modal]
                                                         |── Swap Overlay ──> [Step 3 Modal]
                                                                                    |── Close Overlay

Scroll-to Interactions

Scroll-to interactions jump the view to a specific element within a scrollable frame. This is useful for anchor links — clicking "About Us" in a navigation jumps the page to the About section below.

Name a layer inside the scrollable frame (e.g., "About Section").
In Prototype mode, connect the "About Us" navigation link to the frame and set Action to Scroll To.
In the Scroll To settings, select the named layer as the destination.

Drag Interactions

The On Drag trigger creates swipeable interactions. It is commonly used for carousels, image galleries, and drawer navigation.

Horizontal Carousel with Drag

Create three frames for three carousel slides.
Connect Frame 1 to Frame 2 with trigger On Drag, direction Left, transition Push → Left.
Connect Frame 2 to Frame 3 with the same settings.
Connect Frame 2 back to Frame 1 with direction Right for swiping back.

After Delay Interactions

The After Delay trigger fires automatically after a time you specify in milliseconds. Use it for splash screens, loading states, or auto-advancing onboarding slides.

Splash Screen Auto-Navigate

  [Splash Screen Frame]
       |
       | Trigger: After Delay = 2000ms (2 seconds)
       | Action: Navigate To
       v
  [Onboarding Frame 1]

Mouse Enter and Mouse Leave

These triggers respond to hover behavior — actions that start when the mouse enters an element's boundary and stop when it leaves. Use them for tooltips, hover states, and dropdown menus in desktop prototypes.

Tooltip on Hover

  [Info Icon]
       |── Mouse Enter ──> Open Overlay: Tooltip Frame
       |── Mouse Leave ──> Close Overlay

Key and Gamepad Triggers

The Key/Gamepad trigger fires when the user presses a keyboard key. This is useful for prototyping keyboard shortcuts, navigation with arrow keys, or accessibility testing.

Combining Interactions for Realism

A realistic prototype for a mobile app might combine:

On Click to navigate between main screens
Interactive components for toggles, checkboxes, and tabs
Open Overlay for bottom sheets and dialogs
After Delay for loading skeletons that resolve to content
Scroll behavior for long pages
Smart Animate for smooth state changes

Together, these create a prototype that stakeholders and users can test with minimal explanation needed.

Previous lessons

Back to courses

Next lessons