figma-click-flow

Installation
SKILL.md

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

Installs
1
GitHub Stars
6
First Seen
4 days ago
figma-click-flow — thiagoxikota/figma-maxxing