Setup & Installation
npx skills add https://github.com/openai/skills --skill figma-code-connect-components
https://github.com/openai/skills/tree/main/skills/.curated/figma-code-connect-components
View on GitHubWhat This Skill Does
Maps Figma design components to their code counterparts using Figma's Code Connect feature. It scans a Figma selection for unmapped published components, searches the codebase for matching implementations, and creates the mappings via the Figma MCP server.
Instead of manually hunting through the codebase and filling in Code Connect mappings in Figma one by one, this skill automates component discovery and batch submission in a single workflow.
When to use it
- Linking a Figma Button component to an existing React Button.tsx file
- Batch-connecting all unmapped components in a design system frame
- Finding the right code file when a Figma component name differs from the codebase naming
- Checking which Figma components still lack Code Connect mappings before a design handoff
- Connecting icon components in Figma to their source files in a shared icon directory