Agent Skills: figma-design-to-code

Use this skill when implementing a Figma design as code (design → code) — the read-FROM-Figma direction. Triggers: 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'code this up from Figma', 'design to code', or a figma.com design URL provided alongside a codebase. Encodes the workflow for reading a node out of Figma with get_design_context and adapting its reference output to the target project — reusing existing components, tokens, and conventions, and honoring Code Connect mappings, component docs, design annotations, and design tokens by priority. Complements figma-code-connect (component mapping) and figma-generate-design / figma-use (the reverse, code → design direction).

UncategorizedID: figma/mcp-server-guide/figma-design-to-code

Install this agent skill to your local

pnpm dlx add-skill https://github.com/figma/mcp-server-guide/figma-design-to-code

Skill Files

Browse the full folder contents for figma-design-to-code.

Download Skill

Loading file tree…

Select a file to preview its contents.