Figma CDP Workflow (Direct — No Figma MCP)

Why

The Figma MCP (mcp__figma-desktop__*) returns React+Tailwind reference code that needs heavy adaptation. The Electron MCP's take_screenshot times out on Figma's canvas. Direct CDP via /tmp/figma-run.js gives raw node properties — exact dimensions, colors, spacing, typography — directly from the Plugin API.

Setup

  1. /tmp/figma-run.js — CDP runner using built-in Node.js modules (http, net, crypto, fs)
  2. Set FIGMA_FILE_KEY in the runner or pass via env var (Within Reach: xM2fJC9vzIz49hR8xTHpQz)
  3. Write scripts to /tmp/figma-*.js, execute with node /tmp/figma-run.js /tmp/figma-script.js

Read Selection Script

/tmp/figma-read-selection.js — recursively reads the current Figma selection: - Node tree with id, name, type, dimensions, position - Fills (solid hex, image, gradient), corner radius, opacity - Typography: characters, fontSize, fontFamily, fontStyle, lineHeight, letterSpacing, textAlign - Auto-layout: layoutMode, itemSpacing, padding (all 4), axis alignment, sizing modes - Effects (shadows), strokes - Traverses 3 levels deep

Execution Pattern

# Write script
cat > /tmp/figma-my-script.js << 'ENDSCRIPT'
(async () => {
  // Plugin API code here
  return JSON.stringify(result);
})()
ENDSCRIPT

# Run it
node /tmp/figma-run.js /tmp/figma-my-script.js

Key Rules (from figma-design SKILL.md)

What This Replaces

Prerequisite

Figma must be running with --remote-debugging-port=9222 (via Figma Debug.app or manual launch). Verify: curl -s --max-time 3 http://127.0.0.1:9222/json/version