figma-code-connect-components
nexu-io/open-design
Connect Figma design components to code components for automatic design-system synchronization.
What is figma-code-connect-components?
This skill enables bidirectional linking between Figma design components and code components using Figma's Code Connect. When design-system updates occur in Figma, they automatically flow into your codebase, keeping design and code in sync.
- Connect Figma design components to corresponding code components
- Enable automatic synchronization of design-system updates from Figma to codebase
- Maintain a single source of truth for component definitions across design and code
- Reduce manual updates when design components change
- Support design-to-code workflows in agent planning
How to install figma-code-connect-components
npx skills add https://github.com/nexu-io/open-design --skill figma-code-connect-components- Access to Figma workspace with design components
- Code repository with component implementations
- Figma Code Connect setup in your development environment
How to use figma-code-connect-components
- 1.Install the skill using the provided npx command
- 2.Review the upstream repository at https://github.com/figma/skills for detailed setup instructions
- 3.Configure Code Connect mappings between your Figma components and code components
- 4.Invoke the skill by name or use trigger phrases like 'figma code connect' or 'design to code'
- 5.Monitor Figma for component updates that will automatically sync to your codebase
Use cases
- Automatically propagate design system changes from Figma to your component library
- Keep code components synchronized with Figma design updates
- Establish a bridge between design and development teams for component management
- Ensure design consistency across web and mobile applications
- Streamline component documentation by linking Figma designs to code implementations
- Design system maintainers
- Frontend developers managing component libraries
- Design-to-development teams
- Product teams using Figma as source of truth for design
figma-code-connect-components FAQ
Code Connect is Figma's feature that links design components in Figma to their corresponding code implementations, enabling automatic synchronization and keeping design and code aligned.
No. Once Code Connect is configured, design-system updates in Figma automatically flow into your codebase, reducing manual synchronization work.
The upstream repository at https://github.com/figma/skills contains the complete workflow, scripts, and references needed for full implementation.
Yes, Code Connect can link Figma components to code components across different repositories and frameworks, as long as they are properly configured.
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 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/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 and tokens.
figma-generate-library
Build or update a professional-grade design system library in Figma from a 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.