Figma Code Connect Components
- 1.7k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
figma-code-connect-components is an agent skill that agent skill for figma-code-connect-components workflows documented in skill.md.
About
figma-code-connect-components is an agent skill from nexu-io/open-design that agent skill for figma-code-connect-components workflows documented in skill.md. # figma-code-connect-components > Curated from Figma's MCP server guide. ## What it does Connect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically. ## Source - Upstream: https://github.com/figma/skills - Category: `figma` ## How to use This catalogue entry advertises t Developers invoke figma-code-connect-components during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.
- figma-code-connect-components
- Curated from Figma's MCP server guide.
- Connect Figma design components to code components using Code Connect so design-system updates flow into the codebase au
- Upstream: https://github.com/figma/skills
- This catalogue entry advertises the skill in Open Design so the agent
Figma Code Connect Components by the numbers
- 1,737 all-time installs (skills.sh)
- +121 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #181 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
figma-code-connect-components capabilities & compatibility
- Capabilities
- figma code connect components · curated from figma's mcp server guide. · connect figma design components to code componen · upstream: https://github.com/figma/skills · this catalogue entry advertises the skill in ope
- Use cases
- orchestration
What figma-code-connect-components says it does
Connect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically.
- Upstream: https://github.com/figma/skills
This catalogue entry advertises the skill in Open Design so the agent
npx skills add https://github.com/nexu-io/open-design --skill figma-code-connect-componentsAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.7k |
|---|---|
| repo stars | ★ 82k |
| Security audit | 2 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
What it does
Agent skill for figma-code-connect-components workflows documented in SKILL.md.
Who is it for?
Developers working on design & ui/ux during build tasks.
Skip if: Tasks outside Design & UI/UX scope described in SKILL.md.
When should I use this skill?
Agent skill for figma-code-connect-components workflows documented in SKILL.md.
What you get
Completed design & ui/ux workflow aligned with SKILL.md steps.
- Code Connect mappings
- Linked Figma-to-code components
- Synchronized design-system docs
Files
figma-code-connect-components
Curated from Figma's MCP server guide.
What it does
Connect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically.
Source
- Upstream: https://github.com/figma/skills
- Category:
figma
How to use
This catalogue entry advertises the skill in Open Design so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory:
# Inspect the upstream README for exact paths
open https://github.com/figma/skillsThen ask the agent to invoke this skill by name (figma-code-connect-components) or with one of the trigger phrases listed in this skill's frontmatter.
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Use figma-code-connect-components when you need ongoing Figma-to-code component links instead of periodic design handoff PDFs or screenshot specs.
FAQ
What does figma-code-connect-components do?
Agent skill for figma-code-connect-components workflows documented in SKILL.md.
When should I use figma-code-connect-components?
During build frontend work for design & ui/ux.
Is figma-code-connect-components safe to install?
Review the Security Audits panel on this listing before production use.