figma-claw

Figma CLI tooling powered by Playwright.

Requirements

• Node.js 24 or newer
• pnpm

Development

pnpm install
pnpm test
pnpm build
pnpm check

CLI

Show command help:

pnpm build
node dist/cli.js --help

Check and create a reusable Figma login session:

figma-claw auth status --storage-state "./secrets/figma-storage.json"
figma-claw auth login --storage-state "./secrets/figma-storage.json"
figma-claw auth check \
  "https://www.figma.com/design/FILE_KEY/Example" \
  --storage-state "./secrets/figma-storage.json"

Ensure a readable or writable runtime session:

figma-claw session ensure \
  "https://www.figma.com/design/FILE_KEY/Example" \
  --require read \
  --storage-state "./secrets/figma-storage.json"

Explore a Figma file through a long-lived Playwright browser. Commands automatically reuse one browser session per Figma auth profile. Read-only exploration uses short-lived or LRU file pages; stateful operations such as page navigation, node selection, mode switching, exports, writes, and control keep the relevant file page stable:

figma-claw pages \
  "https://www.figma.com/design/FILE_KEY/Example" \
  --storage-state "./secrets/figma-storage.json"

figma-claw nodes \
  "https://www.figma.com/design/FILE_KEY/Example" \
  --page "0:2"

figma-claw texts \
  "https://www.figma.com/design/FILE_KEY/Example" \
  --page "0:2"

figma-claw search \
  "https://www.figma.com/design/FILE_KEY/Example" \
  --query "place order"

figma-claw selected-node \
  "https://www.figma.com/design/FILE_KEY/Example?node-id=12-34"

Run JSON-callable Figma plugin API facade actions against the same reused file session:

figma-claw figma \
  "https://www.figma.com/design/FILE_KEY/Example" \
  select_node \
  --json '{"nodeId":"12:34","zoom":true}' \
  --storage-state "./secrets/figma-storage.json"

figma-claw figma \
  "https://www.figma.com/design/FILE_KEY/Example" \
  create_rectangle \
  --json '{"x":100,"y":120,"width":240,"height":80,"name":"CTA background"}'

figma-claw figma \
  "https://www.figma.com/design/FILE_KEY/Example" \
  export_code \
  --json '{"node_id":"12:34","code_kind":"tailwind-code","output_dir":"./.artifacts/figma/checkout"}'

Agents can keep a CLI process open and send facade actions over NDJSON:

printf '%s\n' \
  '{"id":"1","method":"get_pages","params":{}}' \
  '{"id":"2","method":"select_node","params":{"nodeId":"12:34","zoom":true}}' \
  '{"id":"3","method":"export_preview","params":{"node_id":"12:34","output_dir":"./.artifacts/figma/checkout"}}' \
  | figma-claw control "https://www.figma.com/design/FILE_KEY/Example"

For control, each request id is also used as the write requestId, so replayed write requests are deduped by the live Figma session. batch is an atomic write batch for supported reversible write tools.

Runtime export tools are local figma-action methods that use the live window.figma object and write files from the current file session: export_preview, export_images, export_icons, export_code, and export_bundle. They accept snake_case params: node_id, output_dir, wait_for_ms, and for export_code, code_kind such as html-code, tailwind-code, react-code, flutter-code, or swiftui-code. export_images downloads original image fills by hash through Figma's image batch download endpoint.

You can also manage sessions explicitly:

figma-claw session start \
  "https://www.figma.com/design/FILE_KEY/Example" \
  --storage-state "./secrets/figma-storage.json"

figma-claw session list
figma-claw session show --file "https://www.figma.com/design/FILE_KEY/Example"

figma-claw session stop --file "https://www.figma.com/design/FILE_KEY/Example"

Session ids are browser-profile ids, not Figma file ids. Display names are short random words and are only used in session list and the dashboard UI. Session commands keep one browser alive for a login profile. File pages are an internal lifecycle detail: transient read pages may be reused or closed, while stateful read/export/write/control pages stay pinned until closed or the browser session ends. Files share Chromium cache, Cache Storage, extension state, and authentication without fighting over a profile lock. session stop --file closes a retained file page when one exists; use session stop --all to close browser sessions. The pages output includes page id, index, and name; prefer id for nodes --page and texts --page when page names repeat. session show opens a Playwright-style dashboard app that lists active sessions and streams screenshots from the selected session.

Reusable live validation runbooks for AI agents live in docs/ai-test-scenarios/. They cover the Snow read/select/export flow, writable page creation/export/deletion, control request replay, and slow-load session recovery.

Check local Playwright browser setup, install Chromium when missing, and copy bundled skills into ~/.codex/skills and ~/.claude/skills:

figma-claw setup

Open a headed browser for inspection:

figma-claw inspect \
  --url "https://www.figma.com/design/FILE_KEY/Example" \
  --storage-state "./secrets/figma-storage.json"

Release

pnpm release

Skill

This package includes Codex skills under skills/:

• figma-implement-ui reads/exports Figma artifacts, then reconciles frontend implementation against the exported PNG.
• figma-design-components creates Figma-native component systems with schema actions for components, variants, component properties, and variables.
• figma-design-prototypes creates Figma-native prototype flows with schema actions for reactions, click navigation, Smart Animate, and flow starts.
• figma-design-illustrations creates editable Figma-native illustrations with schema actions for shapes, gradients, glass effects, booleans, and transforms.
• figma-design-responsive-layouts creates responsive Figma-native layouts with Auto Layout, constraints, text truncation, and min/max sizing.
• figma-design-motion creates Figma-native Motion work with schema actions for animation styles, timelines, manual keyframes, rotation, ellipse arc loaders, and vector path trim loaders.