Setup & Installation
npx skills add https://github.com/figma/mcp-server-guide --skill figma-implement-design
https://github.com/figma/mcp-server-guide/tree/main/skills/figma-implement-design
View on GitHubWhat This Skill Does
Translates Figma designs into production-ready code with pixel-perfect accuracy. It parses Figma URLs, fetches design context via the Figma MCP server, and outputs framework-appropriate components that match the original design 1:1.
Instead of manually measuring spacing, sampling colors, and cross-referencing a Figma file, this skill automates the full design-to-code translation and validates the output against a screenshot from the same file.
When to use it
- Converting a Figma component URL into a typed React component
- Pulling design tokens from a Figma file to replace hardcoded style values
- Rebuilding a multi-state button from a Figma spec without guessing spacing or color
- Generating a full page layout from a Figma frame URL
- Syncing an existing component to a revised Figma design after a design update