All courses > Design and Art > UX - User Experience ::

Prototyping in Figma: Clickable Flows, Interactions, and Screen Transitions

Capítulo 7

Estimated reading time: 8 minutes

What a Figma Prototype Is (and What It Is Not)

A Figma prototype is a set of interactive connections between frames (screens) and components that lets you simulate how a user moves through a design. Unlike the static canvas, Prototype mode defines where a click/tap goes, what happens during the transition, and how micro-interactions respond (for example, a button press state or a toggle switching on/off). Prototypes are ideal for walkthroughs, quick usability checks, and stakeholder reviews because they communicate flow and behavior without engineering.

Key terms you will use

Starting frame: the first screen that opens when someone previews the prototype.
Hotspot: the clickable/tappable area that triggers an interaction (often a button, list item, or icon).
Interaction: a rule like “On click → Navigate to Home.”
Transition: the animation between screens (Instant, Dissolve, Smart Animate, etc.).
Overlay: a frame that appears on top of the current screen (like a modal).

Prototype Essentials: Starting Point, Connections, Navigation, Transitions

1) Select a starting frame

To make sure Preview opens on the correct screen:

Select the frame you want as the entry point (for this chapter, Login).
Switch to the Prototype tab in the right panel.
Set it as the starting frame (you will see a starting indicator on the frame in Prototype view). If you already have a starting point, you can move it by setting a different frame as the start.

Tip: If your prototype opens on the wrong screen, it is almost always a starting frame issue.

2) Create connections between frames

Connections are created by selecting an element (like a button) and dragging the prototype node (the small circular handle) to a destination frame.

Select the Login frame.
Click the Log in button layer (or its component instance).
Drag the prototype node to the Home frame.

This creates an interaction such as: On click → Navigate to → Home.

Continue in our app.

Listen to the audio with the screen off.
Earn a certificate upon completion.
Over 5000 courses for you to explore!

Or continue reading below...

Download the app

3) Choose navigation behaviors

In the interaction details (right panel), you will choose the behavior that best matches the intent:

Navigate to: move to another frame (typical screen-to-screen navigation).
Back: return to the previous screen in the navigation history (useful for back arrows).
Open overlay: show a modal or popover on top of the current screen.
Close overlay: dismiss an overlay.
Swap overlay: replace one overlay with another (useful for multi-step modals).

4) Configure transitions (Instant, Dissolve, Smart Animate)

Transitions control how the destination appears. Choose based on what you need to communicate:

Transition	Use it when	What it looks like
Instant	You want clarity and speed; early-stage flows	No animation; immediate change
Dissolve	You want a gentle change without implying motion	Cross-fade between screens
Smart Animate	You want to show UI elements moving/resizing between states	Animates matching layers across frames

Smart Animate requirements: It works best when the same elements exist on both frames with consistent layer names and hierarchy. If nothing animates, check that the layers you expect to animate are present in both frames and named consistently.

Micro-interactions with Variant Interactions (Press States and Toggles)

Micro-interactions make prototypes feel real: buttons respond, toggles switch, and small state changes communicate feedback. In Figma, a common approach is to use component variants and prototype interactions between those variants.

Button press state (simple feedback)

Goal: When the user presses a button, it briefly shows a pressed style.

Ensure your button component has at least two variants, for example: State=Default and State=Pressed.
Select the button component set (or open the main component).
In Prototype tab, on the Default variant, add an interaction: While pressing → Change to → Pressed.
On the Pressed variant, add: Mouse up (or On click end) → Change to → Default (or use While pressing which automatically reverts when released, depending on your setup).

Practical note: Keep press feedback fast (short duration) so it reads as tactile response, not a screen transition.

Toggle switch (on/off)

Goal: Tap/click toggles between Off and On.

Make sure your toggle component has variants like Value=Off and Value=On.
In Prototype tab, on Off: On click → Change to → On.
On On: On click → Change to → Off.
Set transition to Smart Animate with a short duration so the knob slides smoothly.

Tip: If the knob does not slide, verify the knob layer has the same name in both variants and only its position changes.

Guided Build: Login → Home → Settings (with Back) + Logout Modal Overlay

This guided build assumes you already have three frames: Login, Home, and Settings, plus a small modal frame for logout confirmation (for example, Logout modal).

Step 1: Set the starting frame to Login

Select the Login frame.
In Prototype tab, set it as the starting point.

Step 2: Connect Login → Home

Select the Log in button on the Login frame.
Drag the prototype node to the Home frame.
Interaction: On click → Navigate to → Home.
Transition: choose one:

Instant for a crisp demo flow.
Dissolve if you want a gentle change.

Optional: If you want the login button to show press feedback, ensure the button component has the press micro-interaction described earlier. This runs independently of the navigation interaction.

Step 3: Connect Home → Settings

Pick a clear control on Home that represents “Settings” (a gear icon, list row, or button).

Select the Settings entry on Home.
Drag prototype node to the Settings frame.
Interaction: On click → Navigate to → Settings.
Transition: consider Smart Animate if your header/top bar is consistent and you want it to feel like the same app shell.

Step 4: Add back navigation on Settings

Back navigation should use history so it returns to wherever the user came from.

Select the back arrow (or back button) on the Settings frame.
Add interaction: On click → Back.
Transition: typically Instant or Dissolve. (Smart Animate can be used if you have matching elements and want motion continuity.)

Why Back instead of Navigate to Home? Back respects the user’s path. If later you link to Settings from multiple places, Back will still behave correctly.

Step 5: Create a logout confirmation modal as an overlay

Overlays are perfect for confirmations because they keep the user in context.

Create a small frame named Logout modal (a compact dialog with text and two buttons: Cancel and Log out).
In Settings, select the Log out row/button.
Add interaction: On click → Open overlay → Logout modal.
Overlay settings to configure:

Position: Center (typical for modals).
Background behind overlay: enable a dimmed backdrop if you want focus.
Close when clicking outside: enable if you want tap-outside-to-dismiss behavior.
Transition: Dissolve often feels natural for modals; keep duration short.

Step 6: Wire modal buttons (Cancel closes, Log out returns to Login)

On the Logout modal frame, select Cancel button: On click → Close overlay.
Select Log out button: choose one of these patterns:

Simple: On click → Navigate to → Login (and the overlay disappears because you changed screens).
Explicit: On click → Close overlay plus a second interaction to navigate (useful if you want a specific timing). If you do this, ensure the order/timing feels immediate.

Stakeholder-friendly behavior: Keep the modal interaction obvious: open overlay, confirm/cancel, and return to a clear screen state.

Step 7: Add basic interactions for key controls in Settings

Pick 1–2 controls to demonstrate micro-interactions without overbuilding:

Notifications toggle: Use the toggle variant interaction (On click → Change to) with Smart Animate.
Primary action button (if present): Ensure it has a press state (While pressing).

This makes the Settings screen feel interactive even if you are not building every possible path.

Testing Routine: Desktop/Mobile Preview, Hotspots, Transitions, Walkthrough Readiness

1) Preview on desktop

Click Present (Preview) to open the prototype player.
Start from Login and click through: Login → Home → Settings.
Use the back button on Settings and confirm it returns correctly via Back behavior.

2) Preview with mobile-like behavior

In the prototype player, choose a device frame (if available) to simulate a phone viewport.
Verify that taps feel accurate: buttons and list rows should be easy to hit.

3) Verify hotspots (click targets)

Hover around interactive areas to ensure the correct element is clickable (not an invisible layer on top).
If clicks do nothing, check:

The interaction is attached to the correct layer (button instance vs. a group behind it).
The destination frame exists and is not accidentally nested or hidden.
There is no overlapping element intercepting clicks.

4) Confirm transitions support the story

Use Instant when you want to move quickly through a flow without distraction.
Use Dissolve for gentle screen changes and overlays.
Use Smart Animate only where it clearly communicates state change (toggle sliding, button state, consistent headers).

5) Run a stakeholder-friendly walkthrough

Do a full pass as if you are presenting:

Start at Login, explain the intent, click Log in.
From Home, go to Settings.
Toggle a setting to demonstrate micro-interaction.
Open the logout modal overlay, then cancel, then open again and confirm logout.

If anything feels confusing, simplify: reduce animation, enlarge hotspots, and ensure the main path (Login → Home → Settings → Back) is reliable and repeatable.

Now answer the exercise about the content:

When building a prototype, which navigation behavior should you use for a back arrow on the Settings screen so it returns to the previous screen the user came from?

You are right! Congratulations, now go to the next page

You missed! Try again.

Use Back for back arrows so the prototype returns to the previous screen in the user’s history. This keeps behavior correct even if Settings can be reached from multiple places.