Figma – Prototype and interactions

Goal

Turn the static wireframes into a walkable prototype, and prepare it for the first trial. The goal of the prototype is not to look like a developed product, but to make a specific user task and the associated feedback testable. By the end of the exercise, the prototype for homework 7 is ready.

How does a Figma prototype work?

In Figma's Prototype tab you define the connections between frames. A connection has three parts:

• Trigger: what starts the change, for example click (On click), hover (While hovering), drag (On drag), or delay (After delay).
• Action: what happens. The most common is Navigate to (moving to another frame), but there are Open overlay (a pop-up layer), Swap (replacing an element), and Back.
• Transition: how it happens. For example Instant, Dissolve (cross-fade), Move in (slides in), Smart animate (the movement of shared elements is continuous). We learned about transitions in the microinteractions lesson of chapter 7; here you choose from Figma's offering.

The starting point is the frame from which the prototype starts; this must be marked, otherwise the tester does not know where to begin. A flow in Figma is a route defined by a starting point; you can create several flows in one file (for example the main path and the error path).

What is worth making interactive?

Not everything. What is needed for the tested task:

• the steps of the main flow (click → next screen);
• the decision point (selection, filtering);
• at least one exceptional state (error or full capacity), in a way that is reachable in the prototype;
• the success state (confirmation).

What you do not need: untested functions, secondary menu items (for these a message is enough: "This is not available in the prototype"). Document the limitations.

Task: the prototype for homework 7

1. Connecting

1. Open the wireframe of homework 6, and go to the Prototype tab.
2. Set the starting point on the first frame of the flow (Flow starting point).
3. Connect the interactive elements: select the button or card, drag the connection to the target frame. Set: On click → Navigate to.
4. Choose a transition: Instant or Dissolve is enough for most steps; create a Smart animate transition where the shared elements of two frames move continuously.
5. Add a way back: the back button should work with the Back action.
6. Make an exceptional branch: from the faulty form (for example an empty required field) lead to the error state frame, and from there back to the correction.

2. Walking through and fixing

7. Run it (Present mode), and walk through the main flow. If you get stuck, fix it: a missing connection, a wrong direction, a confusing transition.
8. Check the signifiers: do clickable elements look as if they are clickable? If not, modify the wireframe (see the lesson on affordance).
9. Check the fidelity: is the text real enough for the question being tested?

3. Preparing for the trial

10. Write a scenario and a task (following the scenario lesson of chapter 7) that does not reveal the solution. Write a starting point and a success criterion for it.
11. Note the limitations of the prototype on the "Notes" page of the file.
12. Share the prototype link with view access, and check that the link, opened in a new window (not as an editor), starts the prototype.
13. Try it out with at least one other student: hand over the scenario and the link, and do not explain the solution. Note the observations (quote, observation, interpretation).

Checklist

• There is a clear start screen and success state.
• The main flow can be completed, at least one exceptional state is reachable.
• Clickable elements look like what they are.
• The limitations are documented.
• There are at least three observations from the trial.

Learning resources

• Guide to prototyping in Figma – Figma Learn