code-connect-components

To map Figma components to code, provide the Figma file URL and node-id. The system scans for matching code candidates, extracts design context, and generates an add_code_connect_map linking the specific Figma node to your source path.

Code Connect is used for establishing traceability between design and development by linking Figma design components directly to their matching code implementations. This creates a seamless mapping that keeps front-end frameworks synchronized with Figma designs.

Yes, you can use Code Connect with React, Vue, and other front-end frameworks. The system generates mappings that include framework and language details, allowing you to connect Figma nodes to your specific component source path.

To link a specific Figma node to an existing code component, you provide the file URL and node-id. The system checks existing code connections, analyzes design context, and proposes a mapping with the nodeId, componentName, and framework details.

You do not strictly need the Figma MCP server to generate Code Connect mappings. The system supports both the Figma MCP server and figma-desktop workflows, allowing you to fetch design context and establish component mappings through either environment.

When connecting Figma designs to code, the system extracts metadata from SKILL.md, analyzes the design context, and checks existing code connections. It then generates a mapping containing the nodeId, source path, componentName, and framework details.