Figma Advanced Interactions

Advanced interactions make prototypes behave like real apps. You build conditional logic, animate component states, create overlays, and simulate scrollable content — all without writing code.

Smart Animate in Depth

Smart Animate detects layers with matching names in two frames and animates the transition between them. For Smart Animate to work correctly:

• Layers must have the exact same name in both frames.
• Layer types must match (both rectangles, both text layers, etc.).
• The properties that differ (position, size, opacity, rotation) get animated automatically.

Frame 1: Product List         Frame 2: Product Detail
  Card (160 × 240px)            Card (390 × 300px)  ← same name
  Position: X:20, Y:120         Position: X:0, Y:0

Smart Animate: The card expands from its position in the
list to fill the top of the detail screen. This mimics
the shared element transition in real mobile apps.

Interactive Components

Interactive components add prototype interactions directly to a component. Users interact with the component without needing separate frames for each state.

Example: Toggle Switch

1. Create a toggle component with two variants: State=Off and State=On.
2. Enter the component set, select the Off variant.
3. In Prototype mode, drag a connection from the Off variant to the On variant.
4. Set trigger: On Click. Action: Change To. Animation: Smart Animate.
5. Do the same from On back to Off.

Now every instance of this toggle works independently when the prototype plays — click one toggle and it turns on; click another and it turns on separately. No extra frames required.

Overlays

Overlays display a frame on top of the current screen without navigating away. Use overlays for modals, tooltips, dropdown menus, and bottom sheets.

Creating an Overlay

1. Design the overlay content as its own separate frame.
2. In Prototype mode, connect a trigger (button click) to the overlay frame.
3. Set action to Open Overlay.
4. Choose position: Center, Top, Bottom, Left, Right, or Manual (custom X/Y position).
5. Check Close when clicking outside to dismiss on background tap.
6. Check Add background behind overlay and set a semi-transparent dark color for modal-style dimming.

Conditional Navigation with Variables

Boolean variables let a prototype navigate to different screens depending on a state. This simulates real conditional logic.

Example: Login Validation
  Variable: isLoggedIn (Boolean)
  Default value: false

  Login button interaction:
    On Click → Set variable: isLoggedIn = true
               Navigate To: Home Screen

  Back button on Home Screen:
    On Click → Set variable: isLoggedIn = false
               Navigate To: Login Screen

Combine with conditional layers that show or hide based on variable values to create prototypes that change their content dynamically.

Scroll and Sticky Behaviors

Sticky Layers

Make a navigation bar stick to the top of the screen as the user scrolls. Inside a scrollable frame, select the nav bar layer, go to Prototype tab, and set Position to Sticky with a top offset of 0. The nav bar stays fixed while the rest of the content scrolls beneath it.

Scroll To Interaction

Link a button to a specific frame section using the Scroll To action. This simulates anchor links — click "Features" in a nav bar and the page scrolls to the features section.

Drag Interactions

Set trigger to On Drag to create swipeable elements like carousels, side drawers, and card stacks. Drag interactions allow the user to drag in a direction, and Figma animates the movement.

Carousel Example:
  Frame 1: Card A visible, Cards B and C offscreen to the right
  Frame 2: Card B visible, Card A offscreen to the left

  Frame 1 → On Drag (left) → Frame 2 → Smart Animate
  Frame 2 → On Drag (right) → Frame 1 → Smart Animate

Result: User can swipe through cards.

Timed Transitions (After Delay)

Use After Delay as the trigger for splash screens, auto-advancing onboarding slides, or toast notification dismissals.

Splash Screen → After Delay 2000ms → Home Screen
  (The splash screen automatically advances after 2 seconds)

Prototype Flows

One file can contain multiple independent prototype flows — for example, a "Checkout Flow" starting from the cart screen and a "Profile Edit Flow" starting from the settings screen. Add multiple starting points by selecting different frames and clicking + next to Flow starting point in Prototype mode. Share each flow link separately with the relevant team member.