figma-user-flow-planner
Plan user flows and screen states for a Figma design before any designing starts. Use when asked to plan a user flow, map out screens for a feature, define screen states, plan a Figma file structure, or work out what needs to be designed before opening Figma. Produces a complete flow map with all screens, states, entry/exit points, and a suggested Figma page structure.
npx skills add mohitagw15856/pm-claude-skills --skill figma-user-flow-planner --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Figma User Flow Planner Skill Plans what needs to be designed before a pixel is touched — mapping all screens, states, entry points, and edge cases so designers do not discover missing states mid-build. ## Required Inputs - **Feature or task being designed** - **User type** (who performs this flow?) - **Platform** (iOS / Android / Web / Multi-platform) - **Starting point** (where does the user begin?) - **Known edge cases** (optional) ## Output Structure ### 1. Flow Overview Feature, user, goal, entry points, success exit, failure exits. ### 2. Screen Map | # | Screen name | Type | Triggered by | Notes | |---|---|---|---|---| | 1 | [Screen] | New/Modal/Drawer/Toast | [What triggers] | [Considerations] | Screen types to cover: entry, happy path, loading, success, error (network/validation/permission), empty, first-time/onboarding, edge cases. ### 3. State Matrix **[Screen name]** | State | Trigger | Visual change | Action available | |---|---|---|---| | Default | Page load | [Description] | [What user can do] | | Loading | User taps action | Skeleton/spinner | None | | Error | API failure | Error message | Retry/Go back | | Empty | No data | Empty state | [CTA] | ### 4. Decision P
- Required Inputs
- Output Structure
- 1. Flow Overview
- 2. Screen Map
- 3. State Matrix
- 4. Decision Points
- 5. Suggested Figma File Structure
- 6. What Not to Design Yet
- Quality Checks
- Anti-Patterns
- Example Trigger Phrases
What does the figma-user-flow-planner skill do?
Plan user flows and screen states for a Figma design before any designing starts. Use when asked to plan a user flow, map out screens for a feature, define screen states, plan a Figma file structure, or work out what needs to be designed before opening Figma. Produces a complete flow map with all screens, states, entry/exit points, and a suggested Figma page structure.
How do I install it?
Run `npx skills add mohitagw15856/pm-claude-skills --skill figma-user-flow-planner --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From mohitagw15856/pm-claude-skills, a repository with 1,255 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.