figma-implement-design - Implement Figma designs into code
Translates Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow.
Tags
Updated: 2026-09-24Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Extract Figma node ID
- Fetch Figma design context
- Capture design screenshot
- Download design assets
- Translate design to code
- Validate UI against screenshot
Inputs
- Figma URL or node ID
- Figma desktop node selection
- Project code conventions
Outputs
- Production-ready component code
- Downloaded design assets
- Component documentation
Requirements
- Figma MCP server connection
- Figma OAuth authentication
- Figma desktop app