figma
Figma connects your design tool to code generation through an MCP server, fetching design context, screenshots, variables, and assets for direct translation into production code. Follow the required workflow—retrieve design context, capture visual references, download assets, then implement using your project's design system and conventions. Validate output against Figma for pixel-perfect accuracy.
Figma translates Figma designs to production code via MCP server integration with design context and screenshots.
AI-generated summary based on this skill's SKILL.md
Install
PracticalSwan/agent-skills/figma · repository language: Python
git clone https://github.com/PracticalSwan/agent-skills
cp -r agent-skills/figma ~/.claude/skills/figmaFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I use figma MCP server to convert designs to code?
Figma's MCP server bridges your design tool and code generation by fetching design context, screenshots, variables, and assets for direct translation into production code. Start by retrieving design context from your Figma file, capture visual references via screenshots, download necessary assets, then implement using your project's design system. The server handles node ID resolution and metadata extraction to ensure accurate component mapping.
What's the figma design to code workflow?
Figma's design-to-code workflow follows a structured process: retrieve design context and metadata, capture screenshots for visual reference, fetch variables and assets from Figma, then translate nodes into React/Tailwind components. Validate your implementation against the original Figma design for pixel-perfect accuracy. This ensures production code maintains design parity and respects your project's conventions.
How do I set up figma MCP configuration and environment?
Figma MCP setup requires configuring environment variables for API access and specifying your Figma file URLs. The server needs proper authentication to fetch design context, screenshots, and assets. Troubleshooting common issues involves verifying your credentials, checking file permissions, and ensuring the MCP server is correctly initialized before attempting design extraction or code generation tasks.
Can figma extract design metadata and node information?
Yes, Figma's MCP server retrieves comprehensive design metadata including node IDs, component hierarchies, variables, and asset references. This metadata enables accurate translation to React/Tailwind components by providing the structural and styling context needed. You can access design system information, frame hierarchies, and variable definitions to maintain consistency between your Figma design and production implementation.
How do I validate figma designs against implementation?
Figma design validation compares your implementation against the original design for accuracy. The MCP server provides screenshots and design context to verify pixel-perfect parity. Check component styling, layout spacing, typography, and asset usage match Figma specifications. This validation process ensures your production code faithfully represents the design intent and maintains design system integrity.
What assets and variables can figma MCP fetch?
Figma MCP retrieves design variables, color tokens, typography scales, component assets, and exported graphics from your Figma file. The server handles asset downloading and variable extraction to populate your code generation context. This includes design system tokens, image assets, icon libraries, and component definitions needed for production-ready implementation with proper design system integration.
SKILL.md
rendered from the published skill — quoted content, verbatim
Figma MCP
Use the Figma MCP server for Figma-driven implementation. For setup and debugging details (env vars, config, verification), see references/figma-mcp-config.md.
Figma MCP Integration Rules
These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.
Required flow (do not skip)
- Run get_design_context first to fetch the structured representation for the exact node(s).
- If the response is too large or truncated, run get_metadata to get the high-level node map and then re-fetch only the required node(s) with get_design_context.
- Run get_screenshot for a visual reference of the node variant being implemented.
- Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation. 5.
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 9 files
figma/CHANGELOG.md
figma/LICENSE.txt
figma/SKILL.md
figma/agents/openai.yaml
figma/assets/figma-small.svg
figma/assets/figma.png
figma/assets/icon.svg
figma/references/figma-mcp-config.md
figma/references/figma-tools-and-prompts.md