figma-to-code
Installation
SKILL.md
Figma to Code
Repo-first Figma MCP workflow — inspect the codebase before generated markup, preserve local primitives and tokens, and verify visually. Rationale and implementation rules: references/design-philosophy.md.
Capabilities
| Area | Outcome |
|---|---|
| Implement | Build repo-integrated UI from a Figma URL, frame, component, or desktop selection |
| Tokens | Map Figma variables to the project's token system by semantic role |
| Rules | Generate or update project agent rules for Figma workflows |
| Code Connect | Link published Figma library components to code implementations (eligible Organization/Enterprise plan and Dev or Full seat) |
Commands
Choose one command before using Figma MCP. Keep implementation, token extraction, rule authoring, and Code Connect work inside their respective command boundaries.