figma - Figma MCP Design-to-Code
Translates Figma designs into production code using the Figma MCP server.
Tags
Updated: 2026-09-20Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Fetch Figma design context
- Retrieve design metadata outline
- Capture design visual screenshot
- Extract Figma design variables
- Manage Code Connect mappings
Inputs
- Figma node URL
- FIGMA_OAUTH_TOKEN environment variable
Outputs
- Component code scaffold
- Design screenshot image
- Design variable definitions
- Code Connect mapping data
Requirements
- Figma MCP server
- Valid FIGMA_OAUTH_TOKEN environment variable
- Configured MCP client