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
/tmp/figma-run.js— CDP runner using built-in Node.js modules (http, net, crypto, fs)- Set
FIGMA_FILE_KEYin the runner or pass via env var (Within Reach:xM2fJC9vzIz49hR8xTHpQz) - Write scripts to
/tmp/figma-*.js, execute withnode /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)
- Arrow functions only —
function(){}unreliable for returns - No IIFEs — return
undefined - No
const/let/varfor return values — use bare expressions - For writes: use
.forEach(), ignore "failure" response (mutations still apply) - For reads: wrap in async IIFE returning
JSON.stringify()
What This Replaces
mcp__figma-desktop__get_design_context→ use read-selection script insteadmcp__figma-desktop__get_screenshot→ not needed when you have exact valuesmcp__electron__take_screenshot→ doesn't work with Figma (canvas too heavy)
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