Part of Review Figma Designs From Engineer Perspective
Product & Design Blueprint
Safety checkedReview Figma Designs From Engineer Perspective
Analyzes Figma designs at two levels (basic properties and engineering concerns) and posts comments to exact element locations.
What problem does this solve?
Reviews Figma designs by extracting node information (padding, colors, sizes) for basic design validation and analyzing screenshots for engineer-focused issues (data structure, forms, performance). Comments post to the exact coordinate of each flagged element in Figma, eliminating the gap between feedback and location.
How does it work?
Run /figma-design-review <figma_url> with a Figma design URL. The skill validates prerequisites (FIGMA_TOKEN set, Figma app running, target file open), extracts node details via REST API, captures a screenshot, runs parallel analysis on design properties and engineering patterns, calculates element center coordinates from the REST API output, and posts individual comments to each issue. You then see all feedback organized by category in Figma.
Included Skills
No skills in this group
What's required to run this?
Requires Python 3 to run post_comment.py and get_node_info.py scripts. FIGMA_TOKEN environment variable must be set before execution. Figma MCP socket connects Claude Code to Figma Desktop for screenshots; if MCP fails on designs with many nested nodes, the standalone REST API script still retrieves coordinates because it authenticates directly against Figma's public API.
Key Features
Basic Design Validation
Analyzes padding/margin uniformity, color consistency, touch target sizes, and Auto Layout usage from node metadata
Engineer Review
Checks data hierarchy depth, form validation patterns, table scrolling, permission rules, and specification edge cases
Exact Positioning
Uses REST API coordinates to center comments on flagged elements, not visual guesswork
Fallback Robustness
REST API coordinate extraction works independently when Figma MCP fails on complex nested designs
Bilingual Support
Full English and Japanese documentation covering all setup, usage, and troubleshooting paths
Tools in this Blueprint
About This Blueprint
- Industry
- Technology
More Blueprints to explore
Model Router: Claude Picks the Right Model for Every Step, Automatically 🚦
Avoid paying top-tier rates for routine work or discovering too late that a polished result solved the wrong problem. A confirmed plan routes each phase to an appropriate model, limits context bloat, and leaves a handoff for longer tasks.
ClaudeMatthias Jahn
Sr. Director, Analytics at G2
Business Automation & Productivity Workflow
Reduce hours lost to repetitive admin without adding a complicated stack. Prioritized, tested workflows automate routine research, client communication, project tracking, and website tasks while keeping people in control of important decisions.
Business Technology & Digital Solutions Workflow
Avoid costly, fragmented digital projects with a plan that connects business goals to practical tools, implementation steps, and measurable results. It also flags performance, security, accessibility, and SEO checks before launch.