code-connect-components_skill

Overview

This skill connects Figma design components to their corresponding code implementations using Figma's Code Connect feature. It scans a Figma node or selection, searches the project codebase for best-match components, and creates mappings that keep design and code in sync. Requires a connected Figma MCP server and published Figma components.

How this skill works

First it extracts the Figma node ID (convert URL node-id with hyphens to tool format with colons) or uses the selection when running on the figma-desktop MCP. It fetches metadata to identify component nodes, checks existing Code Connect mappings, pulls detailed design context for un-mapped components, scans the codebase for matching files and props, and then offers or creates a Code Connect mapping via the MCP API. It repeats this process for all component symbols found in the node tree.

When to use it

• You want to link a specific Figma component or component set to a code component (user says: "code connect", "connect this component to code").
• You have a Figma URL with node-id or are using Figma desktop with a node selected.
• You need automated discovery of matching components in the codebase (no manual path provided).
• You want consistent prop and variant mapping between Figma and code.
• You need a summary of which components were connected, skipped, or failed.

Best practices

• Ensure Figma components are published to a team library before attempting mapping.
• Provide a Figma URL with node-id or use figma-desktop selection; convert node-id from 1-2 to 1:2 for tool calls.
• Allow the tool to search common component directories (src/components, components, ui, src/icons) before supplying a path.
• Verify prop names and variant options in code match Figma design context before creating mappings.
• When multiple candidates exist, choose the closest prop-interface match and document the reason.

Example use cases

• Connect a Button component: parse URL, get metadata, confirm props like variant/size, find src/components/Button.tsx, and create mapping.
• Resolve multiple candidates: present Card.tsx and ProductCard.tsx options and let the user pick which to map.
• Handle missing components: detect no CheckIcon, suggest creating src/icons/CheckIcon.tsx or connecting to a generic Icon directory.
• Batch connect: scan a frame with multiple symbol nodes and create mappings for each un-connected component.