Craw Figma Skill

Complete Figma control for AI agents: read via REST API, write via a local plugin. Change design layers, extract design tokens, audit accessibility, export assets.

Architecture

Craw ──→ figma_client.mjs (REST API) ──────→ Figma cloud    (read: file, styles, export)
     ──→ figma_send.js    (WebSocket) ──→ figma_connector.js ──→ Figma Plugin → Figma Desktop
     ──→ style_auditor.mjs              (design system analysis, CSS tokens)
     ──→ accessibility_checker.mjs      (WCAG AA/AAA, contrast, touch targets)

Requirements

• Figma Personal Access Token → for REST API (read). Get it: Figma → Settings → Account → Personal Access Tokens
• Figma Desktop → required for write operations
• Node.js 18+

Quick Start

1. Set up your token

export FIGMA_ACCESS_TOKEN="figd_your_token_here"

2. Read a Figma file

node scripts/figma_client.mjs get-file \x3Cfile-key>
# Example: node scripts/figma_client.mjs get-file "ABC123xyz" --depth 4

Get a file key from: https://www.figma.com/design/\x3CFILE_KEY>/...

3. Install the Figma Plugin (one-time, for write access)

1. Clone/download the skill repository
2. Open Figma Desktop → Plugins → Development → Import plugin from manifest...
3. Select plugin/manifest.json from this skill's directory
4. The plugin "Craw Figma Connector" is now installed

4. Start the connector + run the plugin

# Terminal 1: Start the local WebSocket server
node scripts/figma_connector.js
# → Listening on ws://localhost:9199

In Figma Desktop:

• Right-click canvas → Plugins → Craw Figma Connector
• The panel shows Connected to Craw when the WebSocket connects

5. Send write commands

# Create a rectangle
node scripts/figma_send.js createRectangle \
  --payload '{"x":100,"y":100,"width":400,"height":300,"fillColor":{"r":0.14,"g":0.49,"b":1},"cornerRadius":12,"name":"Hero Card"}'

# Get current selection
node scripts/figma_send.js getSelection

Available Commands

Write (Plugin — real-time in Figma Desktop)

Shape Generator (advanced)

Auto Layout Module

Style Dictionary Pipeline

Read (REST API)

Analysis

Color Format

Figma uses RGB in 0–1 range:

{"r": 0.14, "g": 0.49, "b": 1}     // #247DFF (blue)
{"r": 1, "g": 0.42, "b": 0.21}      // #FF6B35 (orange)
{"r": 1, "g": 1, "b": 1}            // #FFFFFF (white)

Auto-setup for AI Agents

When a user installs this skill, the AI agent should:

1. Check if FIGMA_ACCESS_TOKEN is set — if not, instruct the user to generate one and export it
2. For write operations, check if the Figma plugin is installed — if not:
   • Guide the user through importing plugin/manifest.json in Figma Desktop
   • Suggest running node scripts/figma_connector.js separately
   • Offer to run figma_connector.js if the agent has shell access
3. Test connectivity with figma_client.mjs me before proceeding

Tips

• Keep figma_connector.js running while working with write commands
• The plugin auto-reconnects if the connector restarts (3s retry)
• Commands sent while the plugin is offline are queued and sent on reconnect
• Health check: http://localhost:9200 shows status and pending queue
• Use --generate-css to extract Figma styles as CSS custom properties
• Command timeout defaults to 30s. Override: FIGMA_CMD_TIMEOUT=60000 node figma_connector.js
• Boolean operations (union/subtract) may take longer — timeout is automatically handled and logged

Files

skills/craw-figma/
├── SKILL.md
├── scripts/
│   ├── figma_client.mjs          — Figma REST API client (read)
│   ├── figma_connector.js        — Local HTTP server (run this) — timeout 30s configurable
│   ├── figma_send.js             — Send commands to Figma plugin
│   ├── shape_generator.js        — General-purpose shape creation (polygons, stars, hearts, union)
│   ├── auto_layout.js            — Auto Layout module (cards, rows, buttons, spacing)
│   ├── heart_generator.js        — Legacy heart shape generator
│   ├── star_generator.js         — Legacy star generator
│   ├── design_engine.js          — Design orchestration engine
│   ├── design_orchestrator.js    — Orchestrator with NotebookLM consultation
│   ├── design_critic.js          — Design critique pipeline
│   ├── craw_design_cmd.sh        — Shell wrapper for design commands
│   ├── svg_to_figma.js           — SVG path → Figma Vector Network converter
│   ├── style_auditor.mjs         — Design system analysis
│   ├── accessibility_checker.mjs — WCAG compliance
│   └── style-dictionary/
│       ├── config.json           — Style Dictionary configuration
│       ├── tokens/               — DTCG tokens → SD format
│       ├── build/variables.css   — Generated CSS custom properties
│       └── build/figma-tokens.json — Figma-compatible tokens
├── plugin/
│   ├── manifest.json             — Figma plugin manifest
│   ├── code.js                   — Plugin code (ES5, production)
│   ├── code.ts                   — Plugin code (TypeScript source)
│   └── ui.html                   — Plugin panel UI
├── design-tokens/
│   ├── design-tokens.json        — Core tokens (DTCG format)
│   ├── projects/drs-lab.json     — DR's Lab project tokens
│   └── load-tokens.js            — Token loader utility
└── references/
    ├── figma-api-reference.md    — REST API docs
    └── design-patterns.md        — UI patterns & best practices