figma-to-code
Figma to Code
Repository-convention layer for Figma work. Figma's official figma-design-to-code skill owns the implementation procedure when installed; this skill supplies what only repository inspection can: a token map, component reuse decisions, durable agent rules, Code Connect mapping decisions, and the convention correction loop with a deviation report. Repo-first rationale: references/design-philosophy.md.
Commands
Choose one command before reading Figma context. Mixed-request ordering: implementation-patterns.md.
| Command | Use when | Outcome |
|---|---|---|
/figma-to-code tokens |
Asked to extract, import, sync, or compare Figma variables with code tokens | Figma variables mapped to the repository's tokens by semantic role |
/figma-to-code rules |
Asked for durable design-system rules or Figma guidelines for future agent runs | A focused Figma section or rule file at the agent-target path |
/figma-to-code code-connect |
Asked for Code Connect or to map Figma components to code | Mapping decisions grounded in real repository components |
/figma-to-code implement |
Asked to build UI from a Figma frame, component, URL, or selection | Conventions brief plus correction loop; full fallback procedure only when figma-design-to-code is absent |
Skill Boundaries
Check the host's skill list before acting. Official names below were checked 2026-10-21 against figma/mcp-server-guide (commit 056adaf7). When the user names a skill, that skill owns the procedure; when the user says to use only that skill, do not load this one.