Code Connect Components
Map Figma components to real code files so design and implementation stay aligned in your repo via Code Connect.
Overview
Code Connect Components is an agent skill for the Build phase that maps Figma design components to matching code implementations using the Figma MCP Code Connect APIs.
Install
npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-componentsWhat is this skill?
- End-to-end Code Connect flow: verify Figma MCP, parse node-id URLs, call get_code_connect_suggestions, then confirm mapp
- Two connection types—code_connect_src (GitHub path + line) and code_connect_package (npm/CocoaPods/Maven-style published
- Variant-aware matching with Figma property patterns (e.g. Size=Small vs size="small") and anti-patterns for mismatched n
- Supports React, Vue, Svelte, Web Components, Angular, SwiftUI, UIKit, Jetpack Compose, and Flutter-style workflows
- Documents failure modes: missing node-id, disconnected MCP, absent repo components, and variant/property mismatches
- Two Code Connect connection types: code_connect_src (GitHub source) and code_connect_package (published packages)
- Documented UI stacks include React, Vue, Svelte, Web Components, Angular, SwiftUI, UIKit, Jetpack Compose, and Flutter
Adoption & trust: 896 installs on skills.sh; 1.6k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have Figma components and a codebase, but no reliable link between node IDs, variants, and the files agents or developers should edit.
Who is it for?
Solo builders syncing a component library in Figma with a React, Vue, Svelte, or mobile UI repo and already running the Figma MCP server from the plugin.
Skip if: Teams without a node-id Figma URL, without MCP tools like get_code_connect_suggestions, or who only need raw design export with no ongoing component parity.
When should I use this skill?
User says code connect, connect this component to code, connect Figma to code, map or link component to code, create Code Connect mapping, add code connect, connect design to code, or wants Figma-to-code mappings with Fi
What do I get? / Deliverables
After the workflow, confirmed Code Connect mappings tie Figma components to source paths or package imports so future design-to-code work starts from verified suggestions instead of guesswork.
- User-confirmed Code Connect mappings via code_connect_src or code_connect_package
- Documented variant and property alignment between Figma and code
Recommended Skills
Journey fit
Canonical shelf is Build because the skill runs while you implement UI from Figma—after designs exist and before or during shipping components. Frontend is the primary fit: variant and property mapping targets React, Vue, Svelte, SwiftUI, Compose, and other UI component trees in the codebase.
How it compares
Use this procedural skill alongside the Figma MCP server—it is not a substitute for browsing designs or generating code without established mappings.
Common Questions / FAQ
Who is code-connect-components for?
Indie and solo builders who own both Figma design systems and frontend (or mobile UI) repos and want agent-guided Code Connect setup instead of manual mapping in isolation.
When should I use code-connect-components?
Use it in Build while implementing or refactoring UI when the user says code connect, connect Figma to code, map this component, or add Code Connect—and you have a Figma URL with node-id plus codebase access.
Is code-connect-components safe to install?
Treat it like any third-party skill: it expects MCP and filesystem/codebase access; review the Security Audits panel on this Prism page and your Figma token scope before connecting production files.
SKILL.md
READMESKILL.md - Code Connect Components
# Code Connect Components ## Overview 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. ## Prerequisites - Figma MCP server must be connected and accessible - Before proceeding, verify the Figma MCP server is connected by checking if Figma MCP tools (e.g., `get_code_connect_suggestions`) are available. - If the tools are not available, the Figma MCP server may not be enabled. Guide the user to enable the Figma MCP server that is included with the plugin. They may need to restart their MCP client afterward. - User must provide a Figma URL with node ID: `https://figma.com/design/:fileKey/:fileName?node-id=1-2` - **IMPORTANT:** The Figma URL must include the `node-id` parameter. Code Connect mapping will fail without it. - **IMPORTANT:** The Figma component must be published to a team library. Code Connect only works with published components or component sets. - **IMPORTANT:** Code Connect is only available on Organization and Enterprise plans. - Access to the project codebase for component scanning ## Required Workflow **Follow these steps in order. Do not skip steps.** ### Step 1: Get Code Connect Suggestions Call `get_code_connect_suggestions` to identify all unmapped components in a single operation. This tool automatically: - Fetches component info from the Figma scenegraph - Identifies published components in the selection - Checks existing Code Connect mappings and filters out already-connected components - Returns component names, properties, and thumbnail images for each unmapped component 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: - URL format uses hyphens: `node-id=1-2` - Tool expects colons: `nodeId=1:2` **Parse the Figma URL:** - URL format: `https://figma.com/design/:fileKey/:fileName?node-id=1-2` - Extract file key: `:fileKey` (segment after `/design/`) - Extract node ID: `1-2` from URL, then convert to `1:2` for the tool ``` get_code_connect_suggestions(fileKey=":fileKey", nodeId="1:2") ``` **Handle the response:** - If the tool returns **"No published components found in this selection"** → inform the user and stop. The components may need to be published to a team library first. - If the tool returns **"All component instances in this selection are already connected to code via Code Connect"** → inform the user that everything is already mapped. - Otherwise, the response contains a list of unmapped components, each with: - Component name - Node ID - Component properties (JSON with prop names and values) - A thumbnail image of the component (for visual inspection) ### Step 2: Scan Codebase for Matching Components For each unmapped component returned by `get_code_connect_suggestions`, search the codebase for a matching code component. **What to look for:** - Component names that match or are similar to the Figma component name - Component structure that aligns with the Figma hierarchy - Props that correspond to Figma properties (variants, text, styles) - Files in typical component directories (`src/components/`, `components/`, `ui/`, etc.) **Search strategy:** 1. Search for component files with matching names 2. Read candidate files to che