skills.rest
spontus-reach
spontus-reachOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma-user-flow-planner

Plan user flows and screen states for Figma designs.

1|Updated May 22, 2026
Search Tags:#edge cases#figma#product design#user flow#ux planning#screen states#state matrix
One-click install
npx skills add https://github.com/spontus-reach/spontus --skill figma-user-flow-planner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-user-flow-planner
Source: https://github.com/spontus-reach/spontus/tree/main/.agents/skills/figma-user-flow-planner
Command: npx skills add https://github.com/spontus-reach/spontus --skill figma-user-flow-planner

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents designers and teams from discovering missing screens, states, or edge cases mid-build by planning the full user journey up front.

Core Features & Use Cases

  • End-to-end flow mapping: Defines entry/exit points, happy paths, failure paths, and edge-case routing for a feature.
  • Screen map with state coverage: Produces a screen list including loading, success, error, empty, and onboarding variants.
  • State matrix and decision points: Documents per-screen states, triggers, visual changes, and available actions, plus explicit branching decisions.
  • Figma-ready structure: Suggests a folder/page layout that matches the screen map and the states being designed.

Example use case: mapping the complete UX for an authentication feature so you know exactly which screens and error/empty states to design before touching Figma.

Quick Start

Ask for a user-flow plan in Figma by specifying the feature, user type, platform, starting point, and any known edge cases.

Frequently Asked Questions about figma-user-flow-planner

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I plan Figma user flows and screen states before starting design?▼

To plan user flows in Figma, you define the feature, user type, platform, and starting point to generate a complete flow overview. The output includes a screen map with loading, success, error, and empty state variants, plus a suggested Figma page structure.

What is a state matrix in UX planning and when do I need it?▼

A state matrix in UX planning documents per-screen states, triggers, visual changes, and available actions. You need it when mapping complex user flows to ensure full coverage of loading, empty, error, and onboarding variants before design implementation.

How do I map edge cases and decision branches for a mobile app feature?▼

Mapping edge cases requires defining explicit decision points and branching routing for failure paths within the user journey. This ensures complete UX coverage by documenting out-of-scope sections and routing logic for iOS, Android, or Web scenarios.

Can I use this approach to structure Figma pages for both iOS and Android screen states?▼

Yes, this approach supports iOS, Android, and Web scenarios by suggesting a Figma folder and page layout. The suggested Figma file structure directly matches the generated screen map and all state variants being designed.

What is the best way to avoid missing screens and error states mid-build in Figma?▼

The best way to avoid missing screens mid-build is creating a complete user flow plan upfront. By defining a screen map with state coverage and a state matrix, you prevent discovering missing UX states during the design implementation.

Does Figma user flow planning include onboarding and empty state variants?▼

Yes, Figma user flow planning includes onboarding and empty state variants within the screen map. It produces a comprehensive screen list covering loading, success, error, empty, and onboarding variants to ensure complete UX state coverage.

Related Skills

Explore More Design & Creative Skills→
GatsbyhateyouGatsbyhateyou

version-planner

Decompose product requirements into incremental version plans from V0.1 MVP to V1.0.

Community
Intermediate
EmeaAppGbbEmeaAppGbb

ui-ux-design

Generate interactive HTML wireframe prototypes from approved FRDs.

Official
Advanced
markacianfranimarkacianfrani
6

pattern-miner

Extract and synthesize design patterns from Figma comment threads using Python scripts and the REST API.

Community
Advanced
kv0906kv0906
134

json-canvas

Generate and manipulate JSON Canvas files with nodes and edges.

Community
Intermediate