Setup & Installation
npx skills add https://github.com/figma/mcp-server-guide --skill figma-code-connect-components
https://github.com/figma/mcp-server-guide/tree/main/skills/figma-code-connect-components
View on GitHubWhat This Skill Does
Connects Figma design components to their code implementations using Figma's Code Connect feature. It scans the codebase for matching components, presents the results, and sends accepted mappings back to Figma. Works through a get-suggestions and send-mappings workflow.
Instead of manually writing Code Connect config files and tracking down component file paths yourself, this skill scans the codebase and handles the mapping workflow automatically.
When to use it
- Mapping a Figma Button component to its React counterpart in the codebase
- Linking a published design system component to its TypeScript implementation
- Reviewing and confirming component matches before committing Code Connect mappings
- Resolving unmapped components in a Figma team library
- Keeping code snippets in Figma's Dev Mode in sync with actual component files