figma-code-connect-components
figma-code-connect-components is an agent skill published by openai, listed under design. It lives in the openai/skills repository, which has 28,310 GitHub stars; we last read it on 2026-09-16.
Connects Figma design components to code components using Code Connect mapping tools. Requires no specific credential.
Install
skills is a generic installer for any repository of Claude agent skills -- it reads openai/skills’s own structure rather than assuming one, the same way this page reads the skill’s own SKILL.md rather than assuming a format.
npx skills add openai/skills
Maintenance
Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.
figma-code-connect-components compared with similar skills
| Skill | Publisher | What it does | Repo stars | Last update |
|---|---|---|---|---|
| figma-code-connect-components (this page) | openai | Connects Figma design components to code components using Code Connect mapping tools. Use when user says "cod… | 28,310 | 2026-09-08 |
| figma-create-design-system-rules(same repository) | openai | Generates custom design system rules for the user's codebase. Use when user says "create design system rules"… | 28,310 | 2026-09-08 |
| figma-create-new-file(same repository) | openai | Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when y… | 28,310 | 2026-09-08 |
| figma-generate-design(same repository) | openai | Use this skill alongside figma-use when the task involves translating an application page, view, or multi-sec… | 28,310 | 2026-09-08 |
| setup-matt-pocock-skills | mattpocock | Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain… | 303,549 | 2026-10-22 |
| brand-guidelines | anthropic | Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having… | 183,845 | 2026-10-09 |
| frontend-design | anthropic | Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps… | 183,845 | 2026-10-09 |
Skills from the same repository first, then others for this job by repository stars. Figures are from each repository when we last read it.
Common questions about figma-code-connect-components
- What does figma-code-connect-components do?
- Connects Figma design components to code components using Code Connect mapping tools. Requires no specific credential.
- How do I install figma-code-connect-components?
- Run npx skills add openai/skills. The skills installer reads the repository’s own structure, so it works for any repository of agent skills.
- Who publishes figma-code-connect-components?
- openai.
- Is figma-code-connect-components maintained, and what licence does it use?
- Its repository has 28,310 GitHub stars and its state in our directory is listed. Its last commit we recorded was on 2026-09-08. We did not find a declared licence, so check the repository before you rely on it.
More agent skills for design
- ai-product-photographyby 101-skills
- app-store-screenshotsby 101-skills
- email-designby 101-skills
- landing-page-designby 101-skills
- product-photographyby 101-skills
- social-media-carouselby 101-skills