Figma Prototype Plan Skill
Plan prototype interactions and flows for user testing in Figma.
How to use it
Claude Code
- Run the line below. It pulls the whole folder into
~/.claude/skills/figma-prototype-plan. - Describe your job in plain words. Claude Code follows the skill from there.
npx degit mohitagw15856/pm-claude-skills/skills/figma-prototype-plan#main ~/.claude/skills/figma-prototype-planFor one project only, change the path to .claude/skills/figma-prototype-plan.
Claude (web or desktop app)
- On this page open ⋯ → Download .md.
- Save it as SKILL.md in a folder, zip the folder, then Customize → Skills → + → Create skill → Upload a skill.
- Pick the file and Save. Claude shows the name and description and runs a security scan.
- Check the skill is switched on.
- Start a new chat and describe your job in plain words. The AI follows the skill from there.
ChatGPT or another app
- ChatGPT: make a Project and paste it into Instructions.
- 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.
Paste into Claude, ChatGPT or Cursor.
Source of Figma Prototype Plan Skill
Show the full text92 lines
| name | description |
|---|---|
| figma-prototype-plan | 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
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 | |
| 2 | name figma-prototype-plan |
| 3 | 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." |
| 4 | |
| 5 | |
| 6 | # Figma Prototype Plan Skill |
| 7 | |
| 8 | 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. |
| 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 | |
| 50 | Scenario (read to participant): |
| 51 | "[Realistic scenario giving context without directing the click path]" |
| 52 | |
| 53 | Observing: |
| 54 | [What to watch for] |
| 55 | |
| 56 | Success 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
Browse more free Claude skills or everything in Design.


