figma-code-connect-components

The figma-code-connect-components skill is an Open Design catalogue entry that advertises connecting Figma design components to code components using Figma's Code Connect, so that design-system updates flow into the codebase automatically. It addresses the common design-to-code drift problem where design-system changes fail to reach implementation. Trigger phrases include "figma code connect", "design to code", "figma components", and "code connect".

The SKILL.md is a thin pointer, curated from Figma's MCP server guide, rather than a full implementation. It states the capability and lists triggers, while the original assets, scripts, and references are maintained upstream in the figma/skills repository. To run the complete workflow, a user installs the upstream bundle into their active agent's skills directory and invokes the skill by name or trigger phrase.

The intended users are design-system engineers, frontend developers, and design-ops teams who want their coded components kept in sync with their Figma library, along with marketplace operators cataloguing Figma and design-system capabilities. Anyone needing the concrete Code Connect setup should follow the upstream link, since this entry advertises rather than implements the workflow.