Design an Interactive Onboarding Flow

Build a dynamic Figma prototype with variables, states, and conditional logic.

Introduction

30 Second Summary

Every time you open a new app for the first time, it asks what you're into. That quick selection screen shapes your entire experience with the app.

In this project, you will design a fully interactive onboarding flow in Figma where users pick topics they care about, and the prototype responds by showing personalized content based on their choices.

What You'll Build

You'll build a clickable prototype for a podcast app that uses variables, conditional logic, and Smart Animate transitions to respond dynamically to user selections.

By the end of this project, you'll have:

A multi-state interactive component set (topic buttons that toggle between selected and unselected variants with smooth animations).
Boolean and number variables driving conditional logic that enables or disables the Continue button based on user selections.
A 3-screen prototype flow (Get Started, Loading, Homepage) connected with Smart Animate transitions and personalized content display.
Secret Mission: Add a Skip button and a selection limit that prevents users from choosing more than 3 topics.

Are there any prerequisites?

You should be familiar with basic Figma concepts like frames, components, and Auto Layout. No paid plan is required. Figma's free plan supports all the prototyping features used in this project.

Set Up the Project File and Base Screens

Every interactive prototype starts with structure. Before you add any logic or animation, you need clear screens that define the flow a user will move through.

In this step, you will create a new Figma file with three mobile screens: a topic-selection page, a loading transition, and a personalized homepage. These screens form the skeleton of your onboarding flow.

In this step, get ready to:

Create a Figma file with three iPhone-sized frames for the onboarding flow.
Design the basic visual layout of each screen (heading, buttons, cards, loading indicator).
Build reusable podcast card components for the Homepage.

Create the Figma file and three frames

Your onboarding flow needs three distinct screens. Each screen is a separate frame in Figma, sized to match a standard mobile viewport.

In Figma, create a new design file by clicking the + button in the top-left toolbar, then selecting Design file.
Rename the file to Podcast Onboarding Flow by double-clicking the file name at the top of the canvas.
Select the Frame tool from the toolbar (or press F on your keyboard).
In the right sidebar, expand the Phone section of the frame presets.
Click the iPhone 14 preset. A 390 x 844 frame appears on the canvas.
Double-click the frame name in the Layers panel on the left and rename it to Get Started.
With the Frame tool still active, click the iPhone 14 preset two more times to create two additional frames.
Rename the second frame to Loading and the third to Homepage.
Arrange the three frames side by side on the canvas from left to right: Get Started, Loading, Homepage.

Why 390 x 844?

This is the logical viewport size for the iPhone 14 and iPhone 15 in portrait orientation. Figma uses device-independent points (not pixels), so you design at 1x scale and export at higher densities when needed.

Don't see Phone presets in the right sidebar?

Make sure the Frame tool is active (press F). The presets only appear in the right sidebar when the Frame tool is selected, not the Rectangle or other shape tools.

If the preset name differs slightly in your version of Figma, look for any iPhone option at 390 x 844 in the Phone section. You can also create a blank frame and manually set the width to 390 and height to 844 in the right sidebar's W and H fields.

Help me find the correct iPhone frame preset in Figma.

Design the visual structure of each screen

Each screen needs placeholder content so you can see the flow taking shape. You will add a heading and buttons to the Get Started page, a loading indicator to the Loading page, and card placeholders to the Homepage.

Build the Get Started page

Click on the Get Started frame to select it.
Select the Text tool from the toolbar (or press T) and click near the top of the frame.
Type What interests you? as your heading text.
Increase the font size to around 24-28 in the right sidebar's Text section and set the weight to Bold.
Select the Rectangle tool (press R) and draw a rounded rectangle below the heading, roughly 160 x 80 pixels. This is your first topic button placeholder.
Add a text layer inside the rectangle and type Music.
Duplicate this button three times (Cmd+D on macOS or Ctrl+D on Windows) and rename the text in each copy to Food, Design, and News.
Arrange the four buttons in a 2x2 grid in the center of the frame.
Draw one more rectangle at the bottom of the frame, spanning the full width minus some padding. This is the Continue button.
Add a text layer inside it and type Continue.

Keep styling minimal for now

You will turn the topic buttons into interactive components in the next step. Focus on getting the layout and text content right. Exact colors and border radius can be refined later.

Build the Loading page

Click on the Loading frame.
Draw a small circle in the center of the frame using the Ellipse tool (press O). Hold Shift while dragging to keep it a perfect circle. Make it around 40 x 40 pixels.
Give the circle a stroke (no fill) to suggest a spinner-style loading indicator.
Center the circle both horizontally and vertically using the alignment options in the right sidebar (Align horizontal centers and Align vertical centers).

Build the Homepage placeholders

Click on the Homepage frame.
Draw a rectangle roughly 340 x 100 pixels to represent a podcast card.
Add a text layer inside it and type Music Podcast.
Duplicate this card three more times and rename the text in each to Food Podcast, Design Podcast, and News Podcast.
Stack the four cards vertically with even spacing between them.

You should now see all three frames side by side on your canvas, each with its basic content in place.

Create the podcast card components

Later in this project, you will use boolean variables to show or hide individual podcast cards on the Homepage. For that to work, each card needs to be a separate component instance.

On the Homepage frame, select the Music Podcast card (the rectangle and its text layer together).
Right-click the selection and choose Create component (or press Cmd+Option+K on macOS / Ctrl+Alt+K on Windows).
Rename this component to Music Card in the Layers panel.
Repeat for the remaining three cards, naming them Food Card, Design Card, and News Card.

Why make each card a separate component?

In Step 4, you will bind a boolean variable to each card's visibility. A component instance lets Figma control show/hide behavior per card independently. If all four cards were a single grouped element, you could only show or hide them all at once.

Each card on the Homepage should now display the purple component icon in the Layers panel, confirming it is a component.

Cards not showing the component icon?

Make sure you selected both the rectangle and the text layer before creating the component. If only the rectangle was selected, the text sits outside the component. Undo with Cmd+Z (macOS) or Ctrl+Z (Windows), select both layers, and try Create component again.

Help me turn my podcast cards into components in Figma.

Your canvas now has three structured screens and a set of reusable card components. Next up, you will turn the topic buttons into an interactive component set that toggles between selected and unselected states.

Build the Interactive Topic Button Component

Your three screens are in place. Now it's time to bring them to life with interaction.

In this step, you'll build a topic button that toggles between selected and unselected states when a user taps it. If users can't clearly see which topics they've picked, the rest of the flow breaks down.

In this step, get ready to:

Create a component set with two distinct visual variants (selected and unselected).
Wire prototype interactions so each variant toggles to the other on click.
Test the toggle behavior in Presentation view and replace your placeholders with working instances.

Create the topic button component set

A component set groups related variants of the same element into a single container. You'll create two variants of the topic button: one for the unselected state and one for the selected state.

Select one of the topic button placeholders (e.g., the Music button) on your Get Started frame.
In the right sidebar, click Create component to turn it into a main component.
With the new component still selected, click Add variant in the right sidebar.

Figma creates a component set with a dashed purple border containing your two variants.

In the Current variant section of the right sidebar, click the property name (currently called Property 1) and rename it to isSelected.
Click the property value for the first (top) variant and change it to false.
Select the second variant and change its isSelected property value to true.

Now style each variant so the state change is immediately obvious to users.

Select the isSelected=false variant. Give it an outlined appearance: a visible border/stroke, muted fill color, and no checkmark icon.
Select the isSelected=true variant. Give it a filled appearance: a solid accent-color fill, lighter text, and add a small checkmark icon to signal selection.
Make sure both variants keep the same overall dimensions and text label (e.g., "Music"). Only the color treatment and icon presence should differ.

What is a component set?

A component set is a container that groups related variants of the same element. It lets you swap between states (like selected and unselected) using a single property dropdown instead of managing separate components scattered across your file.

The dashed purple border on the canvas tells you something is a component set. Any instance you place on your design automatically inherits the variant-switching behavior you define inside it.

Keep layer names identical between variants

Smart Animate works by matching layer names across variants. If a layer is called "Label" in one variant and "Text" in the other, Figma cannot animate the transition smoothly. Keep your layer names consistent between the isSelected=false and isSelected=true variants.

Add prototype interactions between variants

With two styled variants ready, you'll now wire them together so clicking one triggers a smooth animated switch to the other.

Select the isSelected=false variant inside the component set.
Switch to the Prototype tab in the right sidebar.
Click the + in the Interactions section to add a new interaction.
Set the trigger to On click.
Set the action to Change to.
In the destination dropdown, select the isSelected=true variant.
Set the animation to Smart Animate.
Set the easing to Ease in and out.
Set the duration to 200ms.

That completes the false-to-true direction. Now wire the reverse.

Select the isSelected=true variant.
In the Prototype tab, click + to add an interaction.
Set the trigger to On click.
Set the action to Change to.
In the destination dropdown, select the isSelected=false variant.
Set the animation to Smart Animate.
Set the easing to Ease in and out.
Set the duration to 200ms.

What is the Change to action?

Change to is a prototype action designed specifically for interactive components. It tells Figma to swap the current variant for a different one within the same component set, without navigating to a new screen.

Any instance you place on your canvas automatically inherits these interactions. You wire them once on the source component, and every instance in your file gets the toggle behavior for free.

Why 200ms for the animation?

200-300ms is the sweet spot for UI element transitions like button presses and toggles. Faster feels abrupt. Slower makes the interface feel sluggish.

Combined with Ease in and out easing, the animation accelerates and decelerates naturally, mimicking physical movement.

Test the toggle and replace placeholders

Before wiring up the rest of the project, confirm the toggle works exactly as expected.

Return to your Get Started frame.
Delete the four placeholder topic buttons you created in Step 1.
Open the Assets panel in the left sidebar.
Find your Topic Button component set and drag four instances onto the Get Started frame, arranged in your grid layout.
For each instance, update the text label to match a topic: Music, Food, Design, News.

Your instances are in place. Open Presentation view to confirm the interactions work.

Click Present in the top-right toolbar, or press Cmd+Option+Return (macOS) or Ctrl+Alt+Enter (Windows).
Click any topic button. It should animate smoothly from the outlined (unselected) state to the filled (selected) state.
Click the same button again. It should toggle back to the unselected state with the same 200ms animation.
Test all four buttons to confirm each one toggles independently.

Button not toggling in Presentation view?

Make sure you placed an instance of the component (from the Assets panel), not a copy of the original component. Copies don't inherit prototype interactions.

Check that both variants are inside the same component set (dashed purple border). The Change to action only works between variants in the same set.

If the animation looks jerky instead of smooth, verify that your layer names match between the two variants. Smart Animate requires identical layer names to interpolate correctly.

help me debug my interactive component

Your interactive buttons are ready. Next up, you'll add variables and conditional logic so the app tracks which topics are selected and enables the Continue button only when the user has made a choice.

Add Variables and Conditional Logic

Your topic buttons toggle between selected and unselected states. But right now, the prototype has no memory. It doesn't know how many topics are selected or which ones the user picked.

In this step, you'll give your prototype a brain by adding variables and conditional logic. These let the UI respond dynamically to user choices, like enabling the Continue button only after the user has picked at least one topic.

In this step, get ready to:

Create six variables to track user selections and button state.
Wire topic buttons to update variables when selected or deselected.
Add conditional logic so the Continue button enables and disables automatically.

Create the variables that drive conditional behavior

Variables in Figma are stored values that your prototype reads and updates as users interact with it. You need six variables total: four booleans to remember which topics are selected, one number to count selections, and one string to control the Continue button's appearance.

Deselect everything on the canvas by pressing Esc.
In the right sidebar, find the Local variables section and click Open variables.
Click + Create variable and select Boolean.
Rename the variable to hasMusic and confirm its default value is False.
Select the hasMusic variable and press Shift+Enter to duplicate it.
Rename the duplicate to hasFood and keep the default as False.
Duplicate again and rename to hasDesign.
Duplicate once more and rename to hasNews.

You should now have four boolean variables, all defaulting to False.

Click + Create variable and select Number.
Rename it to topicsSelected and set its default value to 0.
Click + Create variable and select String.
Rename it to buttonState and set its default value to disabled.

What do these variables do?

The four boolean variables (hasMusic, hasFood, hasDesign, hasNews) remember which specific topics the user picked. You'll use these later to show or hide podcast cards on the Homepage.

The topicsSelected number variable counts how many topics are currently selected. The buttonState string variable controls whether the Continue button appears enabled or disabled.

Don't see the Local variables section?

Make sure nothing is selected on the canvas. Press Esc to deselect all layers. The Local variables section only appears in the right sidebar when no layer is selected.

Help me find the Variables panel in Figma

Wire the topic buttons to update variables on interaction

Each topic button already has a Change to interaction that toggles its visual state. Now you'll stack additional actions on each trigger so that selecting a topic also increments the counter and sets the matching boolean to true.

Double-click into the Topic Button component set to enter it.
Select the isSelected = false variant (the unselected state).
Switch to the Prototype tab in the right sidebar.
Click the existing interaction (On click, Change to) to open the Interaction details panel.
From the Add Actions dropdown menu, select Set variable.
Select topicsSelected from the target variable dropdown.
In the Value field, enter topicsSelected + 1 and press Enter.
From the Add Actions dropdown again, select Set variable.
Select hasMusic from the target variable dropdown and set its value to true.

Why set both a counter and a boolean?

The topicsSelected counter tracks the total number of selections, which controls the Continue button. The individual boolean (hasMusic) records that this specific topic was chosen, which you'll use to personalize the Homepage later.

Now add the reverse actions on the selected state so deselecting a topic decrements the counter.

Select the isSelected = true variant (the selected state).
Click the existing interaction (On click, Change to) to open the Interaction details panel.
From Add Actions, select Set variable.
Select topicsSelected and enter topicsSelected - 1 in the Value field.
Add another Set variable action.
Select hasMusic and set its value to false.

Repeat for each topic button instance

Because the interactions are defined on the component set, all four instances (Music, Food, Design, News) will inherit the Change to and Set variable for topicsSelected automatically. However, you need to override the boolean variable per instance. Select each instance on the Get Started frame and update its interaction to set the correct boolean (hasFood, hasDesign, or hasNews) instead of hasMusic.

Seeing an error when entering the expression?

Make sure you type the variable name exactly as it appears in your Variables panel. The expression topicsSelected + 1 is case-sensitive. If you see a red highlight in the Value field, double-check for typos or extra spaces.

Help me fix my Set variable expression in Figma

Add conditional logic to control the Continue button

Right now, topicsSelected increments and decrements when buttons are toggled. The final piece is a conditional that checks this counter and flips the buttonState variable between enabled and disabled.

First, you'll create the Continue Button component set. Then you'll add conditionals and bind the button instance to the variable.

Exit the Topic Button component set and return to the main canvas.
Select the existing Continue button on the Get Started frame.
Create a component from it by pressing Cmd+Option+K (macOS) or Ctrl+Alt+K (Windows).
Duplicate the component to create a second variant.
Select both variants, right-click, and choose Combine as variants.
Name the variant property state with values disabled (muted appearance) and enabled (accent color, interactive appearance).
Style the disabled variant with a muted fill and reduced opacity so it looks non-interactive.
Style the enabled variant with your accent color so it looks tappable.

Why a string variable instead of a boolean?

Figma's string variables can map directly to variant property values. Because your Continue button variant property has disabled and enabled as its values, you use a string variable with matching values. The string value must match the variant property value exactly for the binding to work.

Now bind the buttonState variable to the Continue button instance on the Get Started frame.

Place an instance of the Continue Button component set on the Get Started frame (or use the one already there).
With the instance selected, find the state variant property in the right sidebar.
Click Assign variable next to the state property.
Select the buttonState variable.

The button instance should immediately switch to its disabled variant because buttonState defaults to disabled.

Finally, add the conditional actions to each topic button trigger.

Double-click into the Topic Button component set and select the isSelected = false variant.
Open the existing interaction and click Add Actions.
Select Check if/else (the Conditional action).
In the Condition field, enter topicsSelected > 0.
In the action field below the condition, select Set variable.
Select buttonState and enter enabled as the value.
Now select the isSelected = true variant (the deselect trigger).
Open its interaction and click Add Actions.
Select Check if/else.
In the Condition field, enter topicsSelected < 1.
Set the action to Set variable, choose buttonState, and enter disabled as the value.

What does this conditional logic do?

When a user selects a topic (false to true), the counter increments first. Then the conditional checks: if topicsSelected > 0, it sets buttonState to enabled. This makes the Continue button change to its interactive appearance.

When a user deselects (true to false), the counter decrements. The conditional checks: if topicsSelected < 1 (meaning zero topics remain), it sets buttonState back to disabled. The button returns to its muted state.

Test your prototype to confirm the conditional logic works.

Click the Play button (or press Shift+Space) to enter Presentation view.
Confirm the Continue button starts in its disabled (muted) state.
Click any topic button. The Continue button should switch to its enabled (accent) state.
Deselect all topics by clicking each selected button again. The Continue button should return to disabled.

Continue button not changing state?

Check that the buttonState variable's default value is exactly disabled (lowercase, no spaces). It must match the variant property value character for character. If the values don't match, Figma cannot map the variable to the variant.

Also confirm that the conditional (Check if/else) was added after the Set variable actions for topicsSelected. The counter must increment before the condition evaluates.

Help me debug my Continue button conditional logic

Your prototype now responds to user input. The Continue button only activates when the user has made a choice. Next up, you'll connect the screens into a complete flow and use the boolean variables to personalize the Homepage content.

Connect the Flow and Apply Microinteraction Timing

Your topic buttons now update variables and the Continue button responds to user selections. The logic is solid, but the three screens are still isolated islands.

In this step, you will wire the screens together into a seamless prototype flow. The Continue button will navigate to the Loading page, the Loading page will auto-advance to the Homepage, and the Homepage will display only the podcast cards the user selected.

In this step, get ready to:

Add navigation interactions between screens with animated transitions.
Bind podcast card visibility to your boolean variables.
Test the complete end-to-end flow in Presentation view.

Add navigation interactions between screens

Right now, tapping the Continue button changes its look, but it does not take the user anywhere. You need a Navigate to action that sends the user to the Loading page when they tap the enabled button.

In the Layers panel, navigate into your Continue Button component set and select the enabled variant.
Switch to the Prototype tab in the right sidebar (or press Shift+E).
In the Interactions section, click the + icon to add a new interaction.
In the Interaction details modal, set the Trigger to On tap.
Set the Action to Navigate to.
Set the Destination to your Loading frame.
In the Animation dropdown, select Smart Animate.
Set Easing to Ease in and out.
Set Duration to 300ms.

Why Smart Animate at 300ms?

Smart Animate automatically animates differences between two frames when layers share identical names. It handles position, size, rotation, opacity, and fill changes without you defining each tween manually.

300ms sits in the sweet spot for page-level transitions. Faster than 200ms feels abrupt for a full-screen change. Slower than 500ms feels sluggish. The Ease in and out curve accelerates at the start and decelerates at the end, making the motion feel natural.

Now add the auto-advance trigger on the Loading page so it transitions to the Homepage after a brief pause.

Click on the Loading frame on your canvas to select it.
In the Prototype tab, click the + icon in the Interactions section.
Set the Trigger to After delay.
Set the delay to 1500ms.
Set the Action to Navigate to.
Set the Destination to your Homepage frame.
In the Animation dropdown, select Dissolve.
Set Duration to 300ms.

Why After delay instead of On tap?

Loading screens in real apps do not require user input. The After delay trigger fires automatically after a set time, simulating an asynchronous operation completing. The 1500ms pause gives the user just enough time to register the loading indicator before the content appears.

Dissolve works well here because the loading indicator has no shared layer names with the Homepage. Smart Animate would have nothing to interpolate, so a simple cross-fade (Dissolve) produces a cleaner result.

Verify your connections by looking for blue "noodle" arrows on the canvas running from the Continue button to the Loading frame, and from the Loading frame to the Homepage frame.

Don't see the blue connection arrows?

Make sure you are in the Prototype tab, not the Design tab. Connections are only visible when prototyping mode is active.

If the arrow connects to the wrong frame, click the noodle to select it and drag the endpoint to the correct destination.

Why can't I see my prototype connections on the canvas?

Bind podcast card visibility to variables

The Homepage currently shows all four podcast cards regardless of what topics the user picked. You will bind each card's visibility to its matching boolean variable so only relevant cards appear.

Click on the Homepage frame to expand it in the Layers panel.
Select the Music podcast card layer.
In the Design tab of the right sidebar, find the layer visibility icon (the eye icon).
Right-click the visibility icon.
From the menu that appears, select the hasMusic variable to bind it.
Repeat for the remaining three cards: bind the Food card to hasFood, the Design card to hasDesign, and the News card to hasNews.

How does variable-bound visibility work?

When you bind a layer's visibility to a boolean variable, Figma shows the layer only when the variable is true and hides it when the variable is false. Since your topic buttons set these booleans to true on selection, the Homepage dynamically reflects the user's choices.

Confirm the binding by hovering over each card's visibility icon. You should see a small variable indicator showing the bound variable name.

Variable not appearing in the right-click menu?

Make sure you right-clicked the eye icon itself, not the layer name. The variable binding option only appears when you interact directly with the visibility icon.

Also check that your variables are scoped correctly. If you created them in a different collection, they may not be available to layers on this frame.

Help me bind a boolean variable to layer visibility in Figma.

Set up the prototype flow and run the full test

Figma needs a flow starting point to know where the user's journey begins. You will also set the device to iPhone 14 so the prototype displays in a realistic phone frame during testing.

Select the Get Started frame on your canvas.
In the Prototype tab, find the Flow starting point section and click the + icon to add a starting point.
A blue label appears on the frame. This marks the beginning of your prototype flow.

What is a flow starting point?

A flow starting point tells Figma which frame to show first when someone plays the prototype. Without one, Figma orders frames by their canvas coordinates, which can produce unpredictable navigation. The blue preview icon on the canvas confirms your starting point is set.

Click an empty area of the canvas to deselect everything.
In the Prototype tab, find the Device section.
Select iPhone 14 from the device dropdown. Since your frames use the iPhone 14/15 preset size, Figma may have already matched this automatically.

Now run the full prototype to verify everything works end-to-end.

Click the Play button (triangle icon) in the top-right corner of Figma to open Presentation view.
Tap one or more topic buttons. The Continue button should become enabled.
Tap the Continue button. The prototype should animate to the Loading screen.
Wait 1.5 seconds. The prototype should dissolve into the Homepage.
Confirm that only the podcast cards matching your selected topics are visible on the Homepage.
Press R to restart the flow, then test again with different topic combinations.

What should I see?

If you selected Music and Design on the Get Started page, the Homepage should show only the Music and Design podcast cards. The Food and News cards should be hidden. The loading transition provides a natural 1.5-second pause between the selection screen and the personalized results.

All transitions should feel smooth. The screen-to-screen navigation uses 300ms animations, while the topic button toggles from the previous step use 200ms. This layered timing keeps the prototype feeling responsive without being jarring.

Continue button not navigating?

Make sure you added the Navigate to interaction on the enabled variant inside the component set, not on the instance on the Get Started frame. Instance-level interactions can conflict with component-level interactions.

If the button appears enabled but nothing happens on tap, double-check that the trigger is set to On tap (not On click). When the prototype device is set to a phone, Figma uses On tap.

Help me debug why my Continue button doesn't navigate to the Loading screen.

Your prototype now behaves like a real product. Topics selected on the first screen determine what content appears on the last screen, with a loading transition bridging the gap. This is the core of interaction design: making interfaces respond intelligently to user behavior.

Secret mission

Add a Skip Button and Selection Limit

Your onboarding flow works, but real products need guardrails. What happens if a user wants to skip topic selection entirely? What if they try to select every single topic? In this mission, you'll add a Skip button that pre-fills all preferences and a selection limit that blocks users from choosing more than 3 topics.

Clean Up Your Resources

This project runs entirely in Figma's browser app, so there are no ongoing costs or local files to manage.

Decide whether to keep your file accessible, organize it for later, or delete it entirely.

Resources you used:

Figma design file (frames, component sets, variables, and prototype connections).

Keep everything running

No action needed. Choose this if you plan to continue iterating on the design or want the file ready for quick access.

Your file is auto-saved in your Figma Drafts.
You can open it anytime from the Figma file browser.

Pause - I'll come back to this later

There are no running processes to stop. Your file is cloud-saved and costs nothing to keep. To stay organized, move it out of your main Drafts area.

In the Figma file browser, right-click your onboarding flow file.
Select Move to project to organize it into a dedicated project folder.
This keeps your Drafts clean while preserving the file for later.

Delete - I don't want to use this again

Remove the file entirely if this was purely practice.

In the Figma file browser, right-click your onboarding flow file.
Select Move to trash.
Figma keeps trashed files for 30 days before permanent deletion. You can restore from Trash in the left sidebar if you change your mind.

That's a Wrap!

Nice work! You've designed a fully interactive onboarding prototype in Figma that responds dynamically to user input.

You've learned how to:

Built a multi-state interactive component set that toggles between variants with smooth 200ms Smart Animate transitions.
Implemented variables (boolean, number, string) and conditional logic to create a prototype that enables and disables UI elements based on user selections.
Connected a 3-screen flow (Get Started, Loading, Homepage) with proper microinteraction timing following Dan Saffer's framework of triggers, rules, feedback, and loops.
Secret Mission: Added a Skip button with variable pre-setting and a selection limit constraint with edge-case handling.

Ready to quiz yourself?