figma-to-code-workflowlisted

# Figma-to-Code Workflow ## Purpose Convert Figma designs to code using MCP server integrations for structured data extraction instead of pixel-guessing. Maintain fidelity through semantic token mapping, component reuse detection, and automated visual comparison. ## When to Use - Implementing a component or page from a Figma design file - Setting up Figma MCP server for Claude Code access - Extracting design tokens (colors, spacing, typography) from Figma - Finding the right icon from a library without hallucinating SVGs - Establishing a feedback loop between design and code ## Examples **Example 1: Implementing a Figma design** ``` User: "Implement this card from my Figma file [link]" Claude: [Uses figma-to-code-workflow] Calls get_design_context for layout metadata, get_variable_defs for tokens, get_code_connect_map to find existing Button component in src/components/ui. Generates code using project tokens, not hardcoded hex values. ``` **Example 2: Finding icons** ``` User: "I need a settings icon for this nav bar" Claude: [Uses figma-to-code-workflow] Calls lucide-icons MCP search_icons for "settings". Returns: import { Settings } from 'lucide-react'. No hallucinated SVG paths. ``` ## Figma MCP Server Setup ### Configuration Add to your MCP client config (e.g., `claude_desktop_config.json`): ```json { "mcpServers": { "figma": { "command": "npx", "args": ["-y", "@figma/mcp-server"], "env": { "FIGMA_ACCESS_TOKEN": "your_figma_acces