figma-implement-design
This skill translates Figma designs into production-ready code by connecting to the Figma MCP server, extracting design context and visual references, and implementing components with 1:1 visual fidelity. It handles design token mapping, asset downloads, and project convention integration to ensure the final UI matches Figma specs exactly.
Figma Implement Design converts Figma designs to production code with pixel-perfect visual accuracy using the Figma MCP server.
AI-generated summary based on this skill's SKILL.md
Install
foryourhealth111-pixel/Vibe-Skills/figma-implement-design · repository language: Python
git clone https://github.com/foryourhealth111-pixel/Vibe-Skills
cp -r Vibe-Skills/bundled/skills/figma-implement-design ~/.claude/skills/figma-implement-designFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How does figma-implement-design convert Figma design to code?
figma-implement-design connects to the Figma MCP server to extract design context, visual references, and specifications directly from your Figma file. It then translates those designs into production-ready code with pixel-perfect accuracy, mapping design tokens and integrating with your project's design system and component libraries to ensure the final UI matches your Figma specs exactly.
Can figma-implement-design generate React components from Figma?
Yes. figma-implement-design automates component generation from Figma nodes using the MCP workflow, translating Figma designs into React components with 1:1 visual fidelity. The skill extracts design context and assets, then implements components that integrate seamlessly with your existing project conventions and design systems.
What does figma-implement-design do with design tokens?
figma-implement-design extracts design tokens and specifications from your Figma file and maps them into your production code. This ensures consistent styling across your implementation and allows you to leverage Figma's design system directly in your codebase, whether you're using Tailwind, CSS, or other styling approaches.
How does figma-implement-design ensure pixel-perfect implementation?
figma-implement-design validates the implemented UI against your Figma designs for layout and styling accuracy, maintaining 1:1 visual fidelity. It handles asset downloads, design context extraction, and precise specification mapping to guarantee your production code matches Figma's visual requirements exactly.
Can figma-implement-design integrate with design systems?
Yes. figma-implement-design integrates Figma designs with your project's design systems and component libraries, ensuring that generated code follows your existing conventions and reuses established components. This keeps your implementation consistent with your broader design infrastructure.
What assets can figma-implement-design extract from Figma?
figma-implement-design extracts design context, visual references, specifications, and assets from your Figma file. It downloads necessary assets and maps design tokens to enable complete implementation, supporting the full workflow from design extraction through production-ready code generation.
SKILL.md
rendered from the published skill — quoted content, verbatim
Implement Design
Overview
This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.
Prerequisites
- Figma MCP server must be connected and accessible
- User must provide a Figma URL in the format:
https://figma.com/design/:fileKey/:fileName?node-id=1-2 :fileKeyis the file key1-2is the node ID (the specific component or frame to implement)- OR when using
figma-desktopMCP: User can select a node directly in the Figma desktop app (no URL required) - Project should have an established design system or component library (preferred)
Required
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 8 files
bundled/skills/figma-implement-design/LICENSE.txt
bundled/skills/figma-implement-design/SKILL.md
bundled/skills/figma-implement-design/agents/openai.yaml
bundled/skills/figma-implement-design/assets/figma-small.svg
bundled/skills/figma-implement-design/assets/figma.png
bundled/skills/figma-implement-design/assets/icon.svg
bundled/skills/figma-implement-design/references/figma-mcp-config.md
bundled/skills/figma-implement-design/references/figma-tools-and-prompts.md