Wireframe and Interactive Prototype
From simple flow to a clickable prototype.
Step 1: Map the User Flow
List steps from entry to goal completion: open app, view list, open detail, complete action. Draw a simple flow diagram before pixels — boxes for screens, arrows for transitions.
Note decision points and error paths. A login flow needs success, wrong password, and forgot password branches even in early wireframes.
Step 2: Low-Fidelity Wireframes
Create grayscale frames with rectangles for images, lines for text, and X placeholders for icons. Use consistent frame size for the target device.
One primary action per screen should be obvious — usually a filled button. Secondary actions use ghost buttons or text links. Avoid color until structure is stable.
Step 3: Add Content Hierarchy
Replace lorem ipsum with realistic headings and labels from your problem statement. Real copy reveals layout breaks early — long German product names or multi-line buttons need space.
Group related fields in forms with section titles. Show progressive disclosure: advanced settings collapsed by default on mobile to reduce cognitive load.
Step 4: Build Clickable Prototype
Switch to Prototype mode in Figma. Connect frames with On Tap interactions. Start from the entry frame and set Device preview to the target phone or desktop.
Use Instant transitions for structure tests; add Smart Animate later for stakeholder demos when motion helps sell the concept. Include back navigation on inner screens.
Step 5: Test the Flow Yourself
Click through as a new user with no verbal explanation. Time how long the core task takes and note hesitation points — unclear labels, missing back affordance, too many steps.
Fix the flow before visual design. Moving a button in wireframe takes minutes; after hi-fi polish it takes hours and political negotiation.
Step 6: Prepare for Usability Testing
Write a short test script: intro, task wording, and success criteria. Export prototype link with comments off for participants.
Example task: "You need to submit a weekly report by Friday. Show me how you would check what is due this week." The next tutorial covers running tests with real users and synthesizing findings.
FAQ
How detailed should wireframes be?
Detailed enough to test task completion and hierarchy, not pixel-perfect. If stakeholders debate color, you went hi-fi too early.
Figma prototype or separate tool?
Figma prototypes are enough for most UX validation — clicks, overlays, and basic motion. Use dedicated tools only when you need advanced conditional logic or native device sensors.
How many screens in the first prototype?
Cover one critical path end to end — often 4–7 screens. Add edge cases after the happy path works without confusion.