Figma to Code

Convert Figma design files into production-ready UI code that integrates with the project's existing codebase.

When to Use

• User provides Figma exports (JSON, images, screenshots, or dev-mode code)
• User asks to "build UI from Figma", "implement this design", or "convert Figma to code"
• User mentions a "figma pack" or design handoff

Supported Input Formats

1. Figma JSON export — richest data (via Figma REST API or export plugin). Run parse_figma_json.js to extract structure.
2. Screenshots/images — read visually with the Read tool. Extract layout, colors, typography, spacing.
3. Dev-mode snippets — CSS/code copied from Figma dev mode. Use directly as reference.
4. SVG/asset exports — icons and illustrations. Place in project assets directory.

Workflow