Interactive Prototype
Table of Contents
Interactive Prototype in Figma
Submission Type: Figma file/link using the required starter template
Download Starter Figma File
This file has the project structure already set up for you as well as tips and guidelines on each page.
You will need to unzip to use the file.
Overview
In this assignment, you will turn your existing high-fidelity mockups into an interactive prototype in Figma.
This project is about showing how your interface behaves, not adding advanced logic or complicated prototype features. Your goal is to connect your flows, demonstrate clear system feedback, and use microinteractions to help users understand what is happening.
This assignment builds directly on your earlier work:
Structural Blueprint — established hierarchy, grouping, routing, and states
High-Fidelity Mockup Flows — developed three flows using one visual system
UI Component Library — created reusable interface elements and state-based components
Now, your job is to bring that work to life through interaction.
Learning Goals
By completing this assignment, you will:
connect static screens into complete interactive flows
use microinteractions to communicate feedback, progress, and system response
apply your UI component library in a working prototype
show meaningful interface states such as default, hover, loading, success, and error
build a prototype that feels clear, responsive, and usable
Important Constraint
This assignment does not require conditional logic, variables, or advanced prototyping systems. You will be doing that in the next assignment.
Keep the interaction simple and clear:
click
tap
hover
state changes
transitions
feedback messages
The goal is clarity, not technical complexity.
What You Must Demonstrate
1. Three Complete Flows
Your prototype must include the same three flow types developed in your earlier high-fidelity assignment:
Flow 1 — Linear Flow
Flow 2 — Progressive Disclosure Flow
Flow 3 — IA-Driven Alternative Flow
Each flow should make it easy to understand:
where the user starts
what action they take
how the system responds
where the flow ends
2. A Clickable Interactive Prototype
Your Figma file must include:
3 complete flows
4 to 6 connected screens per flow
clickable navigation between screens
visible system response moments throughout the flows
3. Five Microinteractions
You must include at least 5 intentional microinteractions across your prototype.
Microinteractions are small moments that help users understand what is happening, feel confident in their actions, and move smoothly through an interface. They are not decorative extras. They are functional details that improve clarity, usability, feedback, and error prevention.
Each microinteraction must include:
a clear trigger
a specific purpose
a visible state change or feedback response
a short explanation of why it improves the user experience
4. UI Component Library Usage
You must use your UI component library in the prototype. Your prototype should demonstrate that the interface is being built from a reusable system, not from isolated one-off screens. The component library assignment emphasized reusable components, variant systems, variables, and testing states.
For this assignment:
use components for repeated UI patterns
use variants or states where appropriate
show at least 3 reusable interactive components in action
Examples:
button with default, hover, pressed, or disabled states
text field with default and error states
toggle with on and off states
card or list item with selected and unselected states
Microinteraction Requirements
Use At Least 4 Different Interaction Types
Your 5 microinteractions must include at least 4 different types from the list below:
State Change
Example: button hover, pressed state, selected item
Input Feedback
Example: inline validation for form fields
System Status
Example: loading indicator, progress state
Outcome Feedback
Example: success message, confirmation state
Error / Recovery
Example: error message with guidance
Reveal / Hide
Example: expanding content, progressive disclosure
Do not repeat the same type for all 5 microinteractions.
How Interaction Types Relate to the Flows
Different flows create different user needs. Your job is to choose interaction types that support what the user needs in that moment.
Flow 1 — Linear Flow
Focus on:
System Status
Outcome Feedback
Input Feedback and Error / Recovery when appropriate
This flow is about task completion. Users need to know whether their action worked and whether they are progressing correctly.
Flow 2 — Progressive Disclosure Flow
Focus on:
Reveal / Hide
State Change
This flow is about showing information gradually. Users need to understand what is hidden, what has been revealed, and what changed after they interacted.
Flow 3 — IA-Driven Alternative Flow
Focus on:
State Change
navigation feedback through selected or active states
This flow is about navigation, choice, and orientation. Users need to understand where they are, what options they have, and what happens when they choose a path.
Thinking Through Your Microinteractions
Use the prompts in the template file to help you decide where microinteractions should appear.
Flow 1 — Linear Flow Prompts
What action moves the user forward?
How does the system respond immediately after that action?
How does the user know they completed the step correctly?
Is there a moment where feedback prevents repeated or incorrect actions?
Why this matters:
Linear flows are focused on completing a task from start to finish. At each step, users need clear confirmation that they are progressing correctly. Without feedback, users may hesitate, repeat actions, or feel unsure.
Flow 2 — Progressive Disclosure Flow Prompts
What information is hidden at the start?
What action reveals the next piece of information?
How does the interface signal that more information is available?
How does the user understand what changed after they interact?
Why this matters:
Progressive disclosure reduces complexity by revealing information step-by-step. Users need clear signals about what is interactive, what will happen next, and what just changed.
Flow 3 — IA-Driven Alternative Flow Prompts
Where does the user make a choice?
How does the interface show available options?
How does the system respond differently based on the user’s selection?
How does the user know where they are after navigating?
Why this matters
IA-driven flows involve navigation, structure, and multiple possible paths. Users need to understand where they are, what options they have, and what happens when they choose a path.
Required File Structure
You will complete this project using the provided starter template.
Do not rename or delete the required pages. Organize your work exactly as shown in the template so your submission is easy to review.
Your file includes:
Start Here
Component States
Flow 1 — Linear Flow
Flow 2 — Progressive Disclosure
Flow 3 — IA-Driven Alternative
Microinteractions
Deliverable
Submit one Figma file and a share link that includes all required pages in the starter template. You can put the share link in the text comment.
Your final submission must include:
1. Completed Prototype Pages
all three flows completed
4 to 6 connected screens per flow
working clickable prototype links
2. Component States Page
at least 2–3 key components from your UI library
visible states for each component
states that match what appears in your flows
3. Microinteractions Page
Document all 5 microinteractions used in your prototype.
For each microinteraction, include:
Flow
Name
Trigger
Purpose
Rules
Feedback
Why it matters
Only document microinteractions that actually appear in your prototype.
Submission Checklist
Before submitting, make sure all of the following are true:
Prototype Structure
I included 3 complete flows.
My prototype has at least 4 to 6 connected screens per flow.
The reviewer can clearly follow each flow from start to finish.
Microinteractions
I included at least 5 microinteractions.
My microinteractions include at least 4 different interaction types.
My microinteractions communicate success, error, progress, reveal/hide, or selection clearly.
My microinteractions are functional, not decorative.
It is clear what triggered each microinteraction.
It is clear what feedback the user receives.
Components
I used my UI component library throughout the prototype.
I reused components instead of rebuilding the same UI pattern multiple times.
I showed at least 2 reusable interactive components.
States and Feedback
My prototype shows clear state changes.
It is clear what just happened, what is happening now, and what happens next.
My system gives feedback when users take important actions.
File Organization
My Figma file follows the required starter template structure.
My flows are organized and easy to review.
My microinteraction documentation is complete and concise.
Evaluation Criteria
1. Interaction & Flow Clarity — 20 points
Your flows are complete, easy to follow, and clearly communicate user progression.
To earn full credit:
flows feel complete from start to finish
screens are connected clearly
actions and responses are easy to understand
2. Microinteraction Quality — 25 points
Your microinteractions are purposeful, understandable, and improve clarity, feedback, or error prevention.
To earn full credit:
you include 5 microinteractions
you use at least 4 different interaction types
each microinteraction has a clear trigger, purpose, and feedback response
microinteractions improve usability instead of acting as decoration
3. Component System Usage — 15 points
Your prototype makes strong use of reusable components, variants, and interaction patterns from your UI component library.
To earn full credit:
you reuse components across screens
you show at least 2 reusable interactive components
component states match what appears in the flows
4. State Communication — 10 points
State changes are visible and meaningful. The interface clearly communicates response, progress, confirmation, or error.
To earn full credit:
important actions have visible feedback
the prototype clearly communicates what just happened and what happens next
loading, confirmation, selection, or error states are used where appropriate
5. Consistency Across Flows — 5 points
The flows feel like one coherent product and use consistent interaction patterns.
To earn full credit:
interactions behave consistently across flows
the product feels unified
repeated elements work the same way throughout the prototype
6. Documentation — 5 points
Microinteraction documentation is complete, clear, and easy to review.
To earn full credit:
all 5 microinteractions are documented
descriptions are specific and concise
each documented interaction appears in the actual prototype
What Strong Work Usually Shows
Strong submissions usually make these things obvious:
where the user can act
when the system noticed the action
how the interface responds
how interaction patterns are reused across the product
how microinteractions reduce confusion and improve flow
Locked Message