What do I need to use Figma User Flow Planner?

Feature or task being designed; User type; Platform; Starting point; Known edge cases (optional).

Is Figma User Flow Planner free to use?

Yes — run it free in the browser playground (no API key needed for the sponsored trial, or bring any provider key), or install it into Claude Code, Cursor, ChatGPT and more via npx pm-claude-skills. MIT-licensed and open source.

Figma User Flow Planner

Q: How do I know the Figma User Flow Planner output is good?

The skill verifies itself against its own quality checks: All three state types covered: loading, error, empty; All decision points mapped with both branches; Entry points include all realistic user paths; Out-of-scope section is explicit.

🔵 Stable🕐 updated 2026-06-08 🔷 SkillSpec L3 pm-figma

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.

▶ Run it free — no key needed 📝 Grade your existing draft View SKILL.md ↗

🗣 Say this to your agent

“Plan the user flow for [feature] in Figma”“What screens do I need to design for [feature]?”“Map out the states for [feature] before we start designing”“Help me structure my Figma file for [feature]”“What do we need to design before handing this to the developer?”

What to give it

▸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) — optional

✅ The bar it holds itself to

Every skill in this library self-verifies — these are this skill's own quality checks, straight from its definition.

✓All three state types covered: loading, error, empty

✓All decision points mapped with both branches

✓Entry points include all realistic user paths

✓Out-of-scope section is explicit

✓Figma file structure matches screen map

⚠️ What it refuses to do

Do not plan only the happy path — all error states, empty states, and edge cases must be mapped before designing starts

Do not produce a flow map that doesn't match the Figma file structure — the page structure must reflect the flow map

Do not define screens without specifying all required states — a screen without its variants is an incomplete design scope

Do not start designing before entry and exit points are fully documented — unclear boundaries cause scope creep

Do not plan user flows without tying each step back to a user goal — every screen must justify its existence

Install

npx pm-claude-skills add --agent claude   # or codex · cursor · gemini · hermes
# or one-line MCP (every skill, any client):
claude mcp add pm-skills -- npx -y pm-claude-skills-mcp

Start with

Related skills

🔌 Embed this skill

Drop this on your blog, docs, or site — it renders a "Run this skill" card:

<div data-pm-skill="figma-user-flow-planner"></div>
<script src="https://mohitagw15856.github.io/pm-claude-skills/embed.js" async></script>

💬 Discussion

Figma User Flow Planner is one of 1078 open-source professional AI agent skills — all SkillSpec L3. Try them all in the browser · ⭐ Star on GitHub · Browse the full catalog