Figma Code Connect Components
Bridges the gap between Figma design files and your actual component code by wiring up Code Connect mappings. You point it at your design system components in Figma and their corresponding code implementations, and it establishes the links so updates in design specs can propagate to your codebase. Most useful when you're maintaining a design system and tired of manually checking whether button variants or spacing tokens have drifted between design and implementation. Curated from Figma's official MCP server guide, so it follows their recommended patterns. The workflow requires installing the upstream bundle from Figma's GitHub since this is a catalog entry that advertises the skill to agents during planning.
- skills.sh installs
- 2.8K
- GitHub stars
- 106.9K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add nexu-io/open-design --skill figma-code-connect-components --agent claude-codeInstalls into .claude/skills of the current project.
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 OpenDesign 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/skills
Then 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.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/nexu-io/open-design
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from nexu-io/open-design
All 217- Figma Create New File2.8K
- Design Taste Frontend2.8K
- Fal Kling O32.8K
- Venice Image Generate2.8K
- Fal Train2.8K
- Fal Realtime2.8K
- Card Xiaohongshu2.8K
- Mockup Device 3d2.8K
- Resume Modern2.8K
- Pixelbin Media2.8K
- Venice Video2.8K
- Wpds2.8K
- Video Hyperframes2.8K
- Slack Gif Creator2.8K
- Deck Swiss International2.8K
- Article Magazine2.8K
- Deck Open Slide Canvas2.8K
- Doc Kami Parchment2.7K
- Frame Liquid Bg Hero2.7K
- Frame Light Leak Cinema2.7K
- Frame Data Chart Nyt2.7K
- Frame Flowchart Sticky2.7K
- Frame Glitch Title2.7K
- Frame Logo Outro2.7K
Recommended
More Design & UI/UX
figma-create-new-filenexu-io/open-designCreate a new blank Figma Design or FigJam file. Useful as the first step in scripted design-system or workshop workflows.2.8Kskills.sh installsemilkowalski-motionnexu-io/open-designMotion-design follow-up skill inspired by Emil Kowalski's animation guidance. Use after an interface exists to add tasteful micro-interactions, state transition2.4Kskills.sh installs
figma-integrationplugin87/ux-ui-agent-skillsKeep Figma and code in sync — map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected, a520skills.sh installsweb-prototype-taste-softnexu-io/open-designApple-tier soft web prototype. Silver/cream canvas, double-bezel cards, button-in-button CTAs, generous squircle radii, spring motion, ambient mesh. Distilled f166skills.sh installs
minimalist-uileonxlnx/taste-skillClean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.425.2Kskills.sh installs