Code Connect Components

This bridges the gap between your Figma components and the actual code that implements them. It scans your codebase to find matching components by name, structure, and props, then lets you review and approve the mappings before Code Connect creates them. Works across React, Vue, Swift, Compose, Flutter, and more. The workflow is smart: it only looks at unmapped components in your Figma selection and handles batch operations in one go. You'll need an Organization or Enterprise Figma plan and published library components for this to work. It's genuinely useful if you're tired of manually keeping design and code in sync, though the node ID requirement and plan restriction might trip you up initially.

Install to Claude Code

npx -y skills add figma/mcp-server-guide --skill code-connect-components --agent claude-code