Figma Click Flow

figma-click-flow: Click-flow handoff overlay

Draws a printed user-flow overlay on a section of laid-out screens. Each connection: a red dot at the click target on screen A, an elbow line with rounded corners ending in an open arrow at screen B's nearest edge. Reference look: a flow section of one production file.

REQUIRED PREREQUISITE: load figma-canon + pass figma-preflight before any figma_execute write (the write path is the figma-console MCP server through its Desktop Bridge plugin). With only the official Figma MCP server connected, the write goes through use_figma on path B of figma-preflight Check 0 (not validated by this repo: keep writes small, read back every change), and Phase 4 validates with get_screenshot within the budget in figma-canon/references/rate-limit-recovery.md.

Why a separate skill (not createConnector)

figma.createConnector throws not a function in Figma Design files (verified via figma_execute, field note 2026-05). CONNECTOR nodes that already exist in design files were created via the UI (Shift+L shortcut) and cannot be cloned: node.clone() errors with Cloning CONNECTOR nodes is not supported in the current editor. This skill therefore emulates the connector look by importing one SVG per connection through figma.createNodeFromSvg.

When to use

• A section of screens is already laid out and the user wants the printed click-flow overlay on top.
• The designer wired the prototype (reactions on nodes) and wants the same connections visible in static handoff.
• The user provides explicit (from-element-id -> to-screen-id) pairs.

When NOT to use

• File is FigJam: use figma.createConnector directly.
• User wants to design layout: use your project's own build skill or workflow, if any, or ad-hoc figma_execute after figma-preflight.
• User wants Dev Mode component documentation: out of scope for this skill. Use your project's own handoff documentation workflow, if any.
• Section has > 40 connections: output becomes spaghetti. Split into smaller sub-sections first.

Visual canon

Verified against a reference node in one production file. refConn in the right column is the reference connector.

The stroke color #E5484D is a neutral default and is configurable: override it through the strokeColor input (STROKE_COLOR in the recipe) when the file has a brand-specific accent.

Inputs

sectionId: "123:456"            # required
mode: from-prototype            # default; OR "explicit" OR "auto-layout"
pairs:                          # used when mode === "explicit"
  - from: "123:789"             # element that gets tapped
    to:   "123:790"             # destination screen
triggerFilter: ["ON_CLICK", "ON_PRESS"]   # default; ignores hover/drag
includeOverlayActions: true     # default; sheets count as navigation
strokeColor: "#E5484D"          # default; see Visual canon
cornerRadius: 12                # default
strokeWeight: 4                 # default
originAnchor: "auto"            # default; "center" | "edge-toward-dest" | "auto"

Each input is a constant in the CONFIG block of references/draw-overlay.js: sectionId is SECTION_ID, mode is MODE, pairs is EXPLICIT_PAIRS, triggerFilter is TRIGGER_FILTER, includeOverlayActions is INCLUDE_OVERLAY_ACTIONS, strokeColor is STROKE_COLOR, cornerRadius is CORNER_RADIUS, strokeWeight is STROKE_WEIGHT, originAnchor is ORIGIN_ANCHOR. The recipe also has DOT_RADIUS, ARROW_LEN, AUTO_LAYOUT_MIN_AR and AUTO_LAYOUT_ROW_GAP, which have no input above.

mode reference:

• from-prototype (default): walks reactions[] on every descendant. Best when designer wired the prototype.
• explicit: uses pairs. Best when the caller has a known list (from a PRD, a spec that lists screen transitions, or a hand-curated list).
• auto-layout: groups top-level FRAMEs in the section into rows by Y, sorts each row by X, builds intra-row left-to-right pairs. Best when prototype isn't wired and screens are sequentially laid out (like a numbered catalog). Heuristic: verify visually before trusting; rows mixing scenarios may produce wrong connectors.
  • The name means pairs inferred automatically from the layout. It has nothing to do with Figma's Auto Layout feature.
  • Only portrait children count as screens: FRAME, COMPONENT or INSTANCE with height/width >= 1.3 (AUTO_LAYOUT_MIN_AR). This filters out labels and dividers. For desktop or landscape screens, lower that constant, or the run returns drawn: 0.
  • A screen whose Y is more than 100 px (AUTO_LAYOUT_ROW_GAP) below the previous one starts a new row.

originAnchor reference:

• auto (default): bbox center for small nodes (<200×200 = buttons, list rows), edge-toward-dest for screen-sized nodes (any node at least 200 px in both dimensions). Right behavior for both prototype-driven mode and screen-level adjacency.
• center: always bbox center. Use when prototype reactions are wired on small interactive elements and you want the dot ON the button.
• edge-toward-dest: nearest-edge midpoint. Use for screen-to-screen adjacency where center would put the dot deep inside the screen body.

If user just says "wire it up" with no detail, default to mode: from-prototype.

Workflow (4 phases + cleanup)

Phase 0: Sanity

Walk up to the page ancestor (sections may be nested inside sections), call figma.loadAllPagesAsync(), then await figma.setCurrentPageAsync(pageNode). Use figma.getNodeByIdAsync exclusively: sync getNodeById errors under documentAccess: dynamic-page.

Server note for use_figma (official Figma MCP server): Figma's figma-use skill lists figma.loadAllPagesAsync() as not implemented in that runtime, and says a read of a member the node type does not have throws TypeError: node.X: no such property 'X' on Y node, optional chaining included (figma/mcp-server-guide, read 2026-10). So the recipe calls figma.loadAllPagesAsync() inside try/catch and carries on without it (setCurrentPageAsync loads the page anyway), and it checks "reactions" in n before reading reactions, because SECTION, SLICE and COMPONENT_SET nodes do not declare it. In figma_execute both guards change nothing. This repo has not run the recipe on use_figma.

Phase 1: Discover pairs

Walk descendants of the section. For each node, inspect reactions[], and in each reaction read actions[] (the recipe falls back to the singular action field when actions is absent). Collect a pair when:

• action.type === 'NODE' (navigate to frame), OR
• action.type === 'OVERLAY' (open sheet/modal, counts as flow), AND
• reaction.trigger.type is in the triggerFilter (default: ON_CLICK, ON_PRESS, ON_TAP).

The recipe keeps a reaction that has no trigger.

Drop pairs where from or to cannot be resolved or lies outside the section's bounding box (likely external/cross-page links). Dropped pairs come back in the dropped array of the return value with a reason (node not found or outside section): report them instead of losing them silently.

If 0 pairs found, return early with a warning so the caller can switch to mode: explicit and supply pairs manually.