Review Figma Designs From Engineer Perspective

Reviews Figma designs from an engineer's perspective and automatically posts comments to exact locations in Figma. It analyzes designs at two levels: basic design properties (spacing, color, sizing, structure) extracted from node information, and engineer-focused concerns (data structures, forms, performance, specifications) from screenshots. Instead of generic feedback scattered in chat, every issue gets positioned at the exact element in Figma.

Once set up with a Figma token and Claude Code access, run /figma-design-review <figma_url>. The skill validates prerequisites, extracts node information via REST API, captures a screenshot, runs two-phase analysis (basic design checks against node properties, then engineer perspective review), calculates exact element coordinates, and posts individual comments to each issue location in Figma. Output: a summary table of all flagged issues organized by category (spacing, color, sizing, data structure, forms, etc.).

Every design review issue appears in Figma at its exact location with reasoning, so engineers understand both what to fix and why without switching between tools.

Requires Node.js runtime for Python scripts (post_comment.py, get_node_info.py) and Figma MCP enabled in Claude Code. REST API calls use FIGMA_TOKEN for authentication; if MCP screenshot/metadata calls fail on complex node trees, the standalone REST API script continues to work because it operates independently.

Requires Figma Desktop App running with the target file open and the target node/frame selected. If Figma MCP fails on complex designs with many nested nodes (common with tables/lists), the REST API can still extract coordinates. FIGMA_TOKEN environment variable must be set before running the skill. MCPsocket connection is required between Claude Code and Figma Desktop.