Figma Prototype Plan Skill

Plan prototype interactions and flows for user testing in Figma.

Figma Prototype Plan Skill — The Skill Playground: pick the Executive Update skill, fill in a few notes, hit run, and watch a structured executive… (from the mohitagw15856/pm-claude-skills README)

From the mohitagw15856/pm-claude-skills README — shows the whole collection, not only this skill. · view on GitHub

How to use it

Claude Code
  1. Run the line below. It pulls the whole folder into ~/.claude/skills/figma-prototype-plan.
  2. Describe your job in plain words. Claude Code follows the skill from there.
Claude Code — installs the whole folder, not just SKILL.md
npx degit mohitagw15856/pm-claude-skills/skills/figma-prototype-plan#main ~/.claude/skills/figma-prototype-plan

For one project only, change the path to .claude/skills/figma-prototype-plan.

Claude (web or desktop app)
  1. On this page open ⋯ → Download .md.
  2. Save it as SKILL.md in a folder, zip the folder, then Customize → Skills → + → Create skill → Upload a skill.
  3. Pick the file and Save. Claude shows the name and description and runs a security scan.
  4. Check the skill is switched on.
  5. Start a new chat and describe your job in plain words. The AI follows the skill from there.
ChatGPT or another app
  1. ChatGPT: make a Project and paste it into Instructions.
  2. Neither? Paste it at the top of a new chat — it works for that chat.
Not working?
  • Check which app you pasted it into — the steps above name the right one.
  • Some skills need the paid tier of Claude or ChatGPT.
Step-by-step guide with screenshots · Ask in the forum

Paste into Claude, ChatGPT or Cursor.

Source of Figma Prototype Plan Skill

Show the full text92 lines
namedescription
figma-prototype-planPlan 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

Anti-Patterns

  • Do not prototype everything — scope must be limited to the interactions that answer the specific research questions
  • Do not design prototype flows without also writing the test task scripts — the two must align exactly
  • Do not skip the reset process between participants — unsettled prototype state contaminates results
  • Do not plan a prototype without specifying which interactions are clickable vs static — ambiguity causes scope creep
  • Do not scope a prototype without first defining the research questions it needs to answer

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?"
1---
2name: figma-prototype-plan
3description: "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."
4---
5 
6# Figma Prototype Plan Skill
7 
8Plans 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.
9 
10## Required Inputs
11 
12- **Research question** (what are you trying to learn?)
13- **Feature or flow being prototyped**
14- **Prototype fidelity** (low wireframe / mid functional / high pixel-perfect)
15- **Testing method** (moderated in-person / moderated remote / unmoderated)
16- **Number of test tasks**
17 
18## Output Structure
19 
20### 1. Prototype Scope
21 
22**In scope:** [Flows with real interactions — specific screens listed]
23**Out of scope:** [Screens to show as static — not worth building as interactive]
24**Rationale:** Prototypes should be the minimum needed to test the hypothesis.
25 
26### 2. Interaction Specification
27 
28**Interaction N: [Description]**
29- Trigger: Tap/Swipe/Hover/Form submit
30- Element: [Figma layer name]
31- Destination: [Figma frame name]
32- Animation: Instant/Dissolve/Push left/Push right/Slide up
33- Timing: [ms]
34- Reset after: Yes/No
35 
36### 3. Prototype Flow Diagram
37 
38```
39[Start frame]
40 -> Tap "Action"
41[Next frame]
42 -> Tap "Complete" -> [Success frame]
43 -> Tap "Cancel" -> [Back to start]
44```
45 
46### 4. Test Task Scripts
47 
48**Task N: [Title]**
49 
50Scenario (read to participant):
51"[Realistic scenario giving context without directing the click path]"
52 
53Observing:
54- [What to watch for]
55 
56Success when: [Specific trigger]
57 
58### 5. Figma Setup Guide
59- Starting frame: [Name]
60- Device preview: [Device]
61- Prototype settings: background colour, show device, type
62- Sharing: Can view link, reset process between participants
63 
64### 6. Build vs Fake Table
65 
66| Element | Build | Fake | Notes |
67|---|---|---|---|
68| Primary CTA flow | Yes | | Core to research |
69| Secondary nav | | Yes | Not being tested |
70| Error state | Yes | | Testing recovery |
71 
72## Quality Checks
73- [ ] Scope limited to what the research question requires
74- [ ] Every interaction has a named destination frame
75- [ ] Task scripts are scenario-based (not "click on X")
76- [ ] Success criteria defined for each task
77- [ ] Reset process defined for between participants
78 
79## Anti-Patterns
80 
81- [ ] Do not prototype everything — scope must be limited to the interactions that answer the specific research questions
82- [ ] Do not design prototype flows without also writing the test task scripts — the two must align exactly
83- [ ] Do not skip the reset process between participants — unsettled prototype state contaminates results
84- [ ] Do not plan a prototype without specifying which interactions are clickable vs static — ambiguity causes scope creep
85- [ ] Do not scope a prototype without first defining the research questions it needs to answer
86 
87## Example Trigger Phrases
88- "Plan the Figma prototype for our user test on [feature]"
89- "What interactions do I need to build for this prototype?"
90- "Help me set up a Figma prototype for [research question]"
91- "Write the test task scripts for our [feature] prototype"
92- "What should I prototype vs leave as static screens?"

Discussion

Alternatives

Also in User flowsSee all 106 in Design →
Make UI/UX better of an already Created ApplicationGenerate a comprehensive, actionable development plan to enhance the existing web application.Coding · CC0-1.0UX Researcher & DesignerUX research and design toolkit for Senior UX Designer/Researcher including data-driven persona generation, journey mapping, usability testing frameworks, and research synthesis. Use when conducting user research, creating personas, mapping user journeys, planning usability tests, or validating designs.Design & UI · MITUI UX testerUse this agent when you need exhaustive UI and UX functionality testing driven by documented user flows, with browser or desktop interaction tooling and structured defect reporting.Design & UI · MITImprove an AppGuided journey from a shipped app that works but feels rough to a product that fits the job, flows without friction, reads clearly, and persuades honestly. Orchestrates nine skills phase by phase - jobs-to-be-done, ux-heuristics, design-everyday-things, refactoring-ui, microinteractions, made-to-stick, influence-psychology, high-perf-browser, steve-jobs-design-review - asking the user questions at every decision point and recording results in the project docs/ folder (CUSTOMER.md, DESIGN.md, POSITIONING.md, IMPROVE-APP-PLAN.md) so the journey resumes across sessions. Use when the user wants to fix a clunky product, cut UX friction, sharpen in-app copy, or says ''the app works but feels rough''. Not for code, tests, or hardening - use improve-code-quality (fresh prototype) or remove-technical-debt (aged); no app yet, create-app; needs growth loops, grow-app; marketing-site friction, improve-website; one leaking flow, conversion-optimization. For one framework in isolation, invoke that skill directly.Design & UI · MIT