figmaflow-creator

Overview

figmaflow-creator draws high-quality BPMN-style swimlane flow diagrams in a Figma/FigJam file, readable by both business and technical users. Describe a multi-step process involving multiple actors (User, Bot, AI Bot, API, System, Agent/PIC) — or share a screenshot of a messy existing flow — and it produces a proper pool-and-lane diagram via the Figma MCP.

The rules baked into the skill came from real iteration with users who reviewed every version: role-prefixed boxes, labeled yes/no decision arrows, dashed cross-lane connectors, and a hard “no overlapping shapes or arrows — ever” policy.

What It Produces

• Pool & lane structure — colored lane bands with left-side label tabs (standard layout: USER · BOT · API · SYSTEM · AGENT/PIC)
• Role-prefixed boxes — every box starts with a bold actor token (Bot:, User:, API:…) so readers can scan by role
• Decision diamonds with green yes / red no labeled arrows
• Color-coded paths — separate sub-flows (e.g. lead capture, fallback handover) get their own palette plus a legend
• Dashed cross-lane/cross-pool arrows, solid same-lane arrows — convention stated in the diagram subtitle

Prerequisites

• Figma MCP connected with Editor access to the target FigJam file (the integration account must be able to edit, not just view)
• The FigJam file URL (figma.com/board/<fileKey>/...)
• A reasonably complete flow description: steps, actors, order, decision points, sub-flows, and loops — the skill asks before drawing if anything is vague

How to Access

Get the skill from the shared Drive folder and install it into your Claude skills. Make sure the Figma MCP is connected first.

Example Prompts

Create a flow in this FigJam board [link]: user sends a WhatsApp message,
bot checks registration via API, registered users get the main menu,
unregistered users fill a leads form, then handover to an agent.

Here's a screenshot of our current flow — redraw it as a clean
swimlane diagram in [FigJam link].