Figma Prototype Plan

---
name: figma-prototype-plan
description: "Plan prototype interactions and flows for user testing in Figma. Use when asked to plan a Figma prototype, set up prototype interactions, define what to prototype for a user test, or prepare a Figma prototype for usability testing. Produces a prototype scope, interaction specification, test task scripts, and Figma setup guide."
---

# Figma Prototype Plan Skill

Plans what to prototype in Figma and how — scoping to what the user test needs, defining every interaction, and setting up the test scenarios. Prevents over-building and ensures the prototype answers the research question.

## Required Inputs

- **Research question** (what are you trying to learn?)
- **Feature or flow being prototyped**
- **Prototype fidelity** (low wireframe / mid functional / high pixel-perfect)
- **Testing method** (moderated in-person / moderated remote / unmoderated)
- **Number of test tasks**

## Output Structure

### 1. Prototype Scope

**In scope:** [Flows with real interactions — specific screens listed]
**Out of scope:** [Screens to show as static — not worth building as interactive]
**Rationale:** Prototypes should be the minimum needed to test the hypothesis.

### 2. Interaction Specification

**Interaction N: [Description]**
- Trigger: Tap/Swipe/Hover/Form submit
- Element: [Figma layer name]
- Destination: [Figma frame name]
- Animation: Instant/Dissolve/Push left/Push right/Slide up
- Timing: [ms]
- Reset after: Yes/No

### 3. Prototype Flow Diagram

```
[Start frame]
  -> Tap "Action"
[Next frame]
  -> Tap "Complete" -> [Success frame]
  -> Tap "Cancel"   -> [Back to start]
```

### 4. Test Task Scripts

**Task N: [Title]**

Scenario (read to participant):
"[Realistic scenario giving context without directing the click path]"

Observing:
- [What to watch for]

Success when: [Specific trigger]

### 5. Figma Setup Guide
- Starting frame: [Name]
- Device preview: [Device]
- Prototype settings: background colour, show device, type
- Sharing: Can view link, reset process between participants

### 6. Build vs Fake Table

| Element | Build | Fake | Notes |
|---|---|---|---|
| Primary CTA flow | Yes | | Core to research |
| Secondary nav | | Yes | Not being tested |
| Error state | Yes | | Testing recovery |

## Quality Checks
- [ ] Scope limited to what the research question requires
- [ ] Every interaction has a named destination frame
- [ ] Task scripts are scenario-based (not "click on X")
- [ ] Success criteria defined for each task
- [ ] Reset process defined for between participants

## Example Trigger Phrases
- "Plan the Figma prototype for our user test on [feature]"
- "What interactions do I need to build for this prototype?"
- "Help me set up a Figma prototype for [research question]"
- "Write the test task scripts for our [feature] prototype"
- "What should I prototype vs leave as static screens?"