Figma to Code Skill

Core Philosophy

Figma MCP gives Claude eyes. This skill gives it judgment.

Reading a Figma file is not the same as understanding it. A designer's Figma contains decisions — spacing logic, type hierarchy, component intent, interaction behavior. Your job is to translate those decisions faithfully, not just the pixel values.

Produce code that a senior developer would not need to fix and a designer would not need to correct.

Step 0 — Establish Context First