Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "connect Figma to code", "map this component", "link component to code", "create code connect mapping", "add code connect", "connect design to code", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`. Requires Figma MCP server connection.
From hugin-v0npx claudepluginhub michelve/hugin-marketplace --plugin hugin-v0This skill uses the workspace's default tool permissions.
examples/code-connect-scenarios.mdreference/troubleshooting.mdProvides checklists to review code for functionality, quality, security, performance, tests, and maintainability. Use for PRs, audits, team standards, and developer training.
Guides browser automation with Playwright, Puppeteer, Selenium for e2e testing and scraping. Teaches reliable selectors, auto-waits, isolation to fix flaky tests.
Enforces A/B test setup with gates for hypothesis locking, metrics definition, sample size calculation, assumptions checks, and execution readiness before implementation.
This skill helps you connect Figma design components to their corresponding code implementations using Figma's Code Connect feature. It analyzes the Figma design structure, searches your codebase for matching components, and establishes mappings that maintain design-code consistency.
get_code_connect_suggestions + send_code_connect_mappings workflows.get_code_connect_suggestions) are available.https://figma.com/design/:fileKey/:fileName?node-id=1-2
node-id parameter. Code Connect mapping will fail without it.figma-desktop MCP: User can select a node directly in the Figma desktop app (no URL required)Follow these steps in order. Do not skip steps.
Call get_code_connect_suggestions to identify all unmapped components in a single operation. This tool automatically:
Parse the URL to extract fileKey and nodeId, then call get_code_connect_suggestions.
IMPORTANT: When extracting the node ID from a Figma URL, convert the format:
node-id=1-2nodeId=1:2Parse the Figma URL:
https://figma.com/design/:fileKey/:fileName?node-id=1-2:fileKey (segment after /design/)1-2 from URL, then convert to 1:2 for the toolget_code_connect_suggestions(fileKey=":fileKey", nodeId="1:2")
Handle the response:
For each unmapped component returned by get_code_connect_suggestions, search the codebase for a matching code component.
What to look for:
src/components/, components/, ui/, etc.)Search strategy:
Example search patterns:
Button.tsx, PrimaryButton.tsx, Button.jsxsrc/client/components/ui/ (DSAI components installed via dsai add — these ARE the implementation files)src/client/components/ for app-specific wrapper componentsvariant, size, color that match Figma variantsforwardRef + displayName and have props in separate .types.ts filesPresent your findings and let the user choose which mappings to create. The user can accept all, some, or none of the suggested mappings.
Present matches in this format:
The following components match the design:
- [ComponentName](path/to/component): DesignComponentName at nodeId [nodeId](figmaUrl?node-id=X-Y)
- [AnotherComponent](path/to/another): AnotherDesign at nodeId [nodeId2](figmaUrl?node-id=X-Y)
Would you like to connect these components? You can accept all, select specific ones, or skip.
If no exact match is found for a component:
If the user declines all mappings, inform them and stop. No further tool calls are needed.
Once the user confirms their selections, call send_code_connect_mappings with only the accepted mappings. This tool handles batch creation of all mappings in a single call.
Example:
send_code_connect_mappings(
fileKey=":fileKey",
nodeId="1:2",
mappings=[
{ nodeId: "1:2", componentName: "Button", source: "src/components/Button.tsx", label: "React" },
{ nodeId: "1:5", componentName: "Card", source: "src/components/Card.tsx", label: "React" }
]
)
Key parameters for each mapping:
nodeId: The Figma node ID (with colon format: 1:2)componentName: Name of the component to connect (e.g., "Button", "Card")source: Path to the code component file (relative to project root)label: The framework or language label for this Code Connect mapping. For this project, always use "React". Valid values include:
After the call:
Provide a summary after processing:
Code Connect Summary:
- Successfully connected: 3
- Button (1:2) → src/components/Button.tsx
- Card (1:5) → src/components/Card.tsx
- Input (1:8) → src/components/Input.tsx
- Could not connect: 1
- CustomWidget (1:10) - No matching component found in codebase
See code-connect-scenarios.md for detailed scenarios including connecting a single button, handling multiple components with partial selection, and creating components that don't yet exist.
Don't just ask the user for the file path - actively search their codebase to find matching components. This provides a better experience and catches potential mapping opportunities.
When comparing Figma components to code components, look beyond just names. Check that:
When offering to create a mapping, clearly explain:
If multiple components could match, present options rather than guessing. Let the user make the final decision about which component to connect.
If you can't find an exact match, provide helpful next steps:
See troubleshooting.md for solutions to common Code Connect problems including unpublished components, plan restrictions, missing components, permission issues, and URL format errors.
Code Connect establishes a bidirectional link between design and code:
For designers: See which code component implements a Figma component For developers: Navigate from Figma designs directly to the code that implements them For teams: Maintain a single source of truth for component mappings
The mapping you create helps keep design and code in sync by making these connections explicit and discoverable.
When invoking this skill with arguments:
$0 or $ARGUMENTS[0] - Figma file key (extracted from URL: https://figma.com/design/:fileKey/:fileName)
/code-connect-components abc123$1 or $ARGUMENTS[1] - Node ID of the specific Figma component to connect
1-2 (from ?node-id=1-2 in Figma URL)/code-connect-components abc123 10-25If invoked without arguments, the skill will prompt for the full Figma URL and extract the file key and node ID automatically.
This skill uses ${CLAUDE_SESSION_ID} to track Code Connect mapping sessions:
// Each mapping is logged with session context
const sessionId = process.env.CLAUDE_SESSION_ID;
console.log(
`[${sessionId}] Creating Code Connect mapping: ${fileKey}#${nodeId} → ${componentPath}`,
);
This allows correlation between:
.figma.tsx)Use the session ID to maintain an audit trail of when components were connected and why.
For more information about Code Connect: