Prototype, Test, Revise: A Three-Screen Figma Lab
A prototype is useful when it makes an interface idea testable before code is written.
Goal
Convert an existing website plan or wireframe into a small clickable prototype and use peer feedback to improve one design decision.
Activity
- Choose a site or app idea with at least three screens or states.
- Build three connected frames in Figma.
- Add only enough interaction to let another person complete one simple task.
- Ask a classmate to use the prototype without coaching.
- Record one place where the user hesitates, takes the wrong path, or asks what to do next.
- Revise the prototype to address that observation.
Deliverable
Submit the prototype link plus a short note identifying the observed problem, the change made, and why the change should improve the experience.
Discussion
What did the clickable prototype reveal that a static sketch did not?
Source material
First spotted in PTIR: July 30, 2026, Evening Briefing.
Figma’s free educator series focused on moving classroom design work from initial setup through clickable digital-product prototypes, collaboration, classroom workflow, assessment, and portfolios. The PTIR Teaching Corner distilled that material into a small assignment that keeps prototyping connected to later HTML/CSS implementation rather than treating Figma as the final product.