Claude MarketplacesSubmit
figma avatar

Code Connect Components

figma/mcp-server-guideOfficial

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.

skills.sh installs
870
GitHub stars
2.2K
last updated
Aug 21, 2026
View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

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.

Browse the repository on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/figma/mcp-server-guide
Categories
Frontend Development, Backend & APIs, Documentation, AI & Agent Building, Design & UI/UX

More from figma/mcp-server-guide

All 14

Recommended

More Frontend Development
1bitjaru avatarss-a11ybitjaru/styleseedAudit a component or page for accessibility issues and fix them862skills.sh installs
2bitjaru avatarss-feedbackbitjaru/styleseedAdd appropriate user feedback states (loading, success, error, empty) to a component or page852skills.sh installs
3davila7 avatardraw-iodavila7/claude-code-templatesdraw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.843skills.sh installs
4softaworks avatardraw-iosoftaworks/agent-toolkitdraw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.838skills.sh installs
5bitjaru avatarss-patternbitjaru/styleseedGenerate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives828skills.sh installs
6mindrally avatarblazormindrally/skillsGuidelines for Blazor development including component lifecycle, state management, and performance optimization823skills.sh installs