figma-code-connect-components
nexu-io/open-design
Connect Figma design components to code automatically with Code Connect.
What is figma-code-connect-components?
This skill enables bidirectional synchronization between Figma design components and code components using Figma's Code Connect. Use it when you need design-system updates to flow automatically from Figma into your codebase, keeping design and code in sync.
- Connect Figma design components to their code counterparts
- Automate design-system updates from Figma to codebase
- Enable design-to-code synchronization workflows
- Maintain consistency between design and implementation
How to install figma-code-connect-components
npx skills add https://github.com/nexu-io/open-design --skill figma-code-connect-componentsHow to use figma-code-connect-components
- 1.Install the skill using the provided npx command
- 2.Invoke the skill by name (figma-code-connect-components) or use trigger phrases like 'figma code connect' or 'design to code'
- 3.Consult the upstream repository at https://github.com/figma/skills for detailed workflow documentation and assets
Use cases
- Syncing design-system component changes from Figma to production code
- Automating component documentation from design to code
- Keeping design tokens and component APIs aligned across Figma and codebase
- Enabling designers to update components in Figma with automatic code propagation
- Design system maintainers
- Frontend developers managing component libraries
- Design-to-development teams
- Product engineers working with design systems
figma-code-connect-components FAQ
Code Connect is Figma's tool for linking design components to their code implementations, enabling automatic synchronization between design and development.
The skill establishes connections between Figma components and code components so that updates made in Figma can automatically flow into the codebase.
The upstream repository at https://github.com/figma/skills contains the full workflow, scripts, and reference materials.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: figma-code-connect-components description: | Connect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically. triggers:
- "figma code connect"
- "design to code"
- "figma components"
- "code connect" od: mode: design-system category: figma upstream: "https://github.com/figma/skills"
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.
Related skills
More from nexu-io/open-design and the wider catalog.
figma-create-design-system-rules
Generate project-specific design system rules for Figma-to-code workflows.
figma-create-new-file
Create a new blank Figma Design or FigJam file for design workflows.
figma-generate-design
Build or update Figma screens from code or descriptions using design system components.
figma-generate-library
Build and sync professional design system libraries in Figma from your codebase.
figma-implement-design
Translate Figma designs into production-ready code with 1:1 visual fidelity.
figma-use
Run Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work.