---
name: "figmaflow-creator"
description: "Draw BPMN-style swimlane flow diagrams in Figma/FigJam — pool/lane structure, role-prefixed boxes, decision diamonds, color-coded paths, zero overlapping arrows."
type: skill
roles: ["Design", "Product", "Engineering"]
activities: ["UX Design", "Planning"]
tags: ["Figma", "FigJam", "BPMN", "Swimlane", "Flow"]
owner: "Yayan Adipraja"
sourceUrl: "https://drive.google.com/drive/folders/1BYjH-JC-4vSpYBSdpOtY2ARHbr9dA2bJ"
---

# figmaflow-creator

> Draw BPMN-style swimlane flow diagrams in Figma/FigJam — pool/lane structure, role-prefixed boxes, decision diamonds, color-coded paths, zero overlapping arrows.

## 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](https://drive.google.com/drive/folders/1BYjH-JC-4vSpYBSdpOtY2ARHbr9dA2bJ) 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].
```