Localized reading guide
figma-code-connect-componentsPurpose, usage and source
Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via use_figma, use figma-use.
Source retrieved:
- Source repository
- openai/skills
- SKILL.md
skills/.curated/figma-code-connect-components/SKILL.md- Repository stars
- 28,420
- Repository updated
- 2026-10-29
- Categories
- Design
- Last collected
License: Unspecified
Workflow excerpts are reading aids, not executable instructions from Codez. No third-party Skill was run to produce this page.
The purpose and workflow passages below are upstream material, organized and translated for reading. They are distinct from the separately labeled Codez editorial analysis.
What this Skill does
Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via use_figma, use figma-use.
How the upstream workflow works
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.
Upstream passage · L8 ↗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
get_code_connect_suggestions(fileKey=":fileKey", nodeId="1:2")Requirements and setup
Prerequisites
Figma MCP server must be connected and accessible User must provide a Figma URL with node ID: https://figma.com/design/:fileKey/:fileName?node-id=1-2
Limits and quality checks
No separate limits passage was selected from this file. This does not mean the Skill is safe for every input or environment. Review the complete source and validate your own result.
Start with a safe trial
- Check the supported host and the repository installation instructions. Keep the Skill directory and its referenced scripts, assets and documentation together; SKILL.md alone may omit dependencies.
- Give the agent your real input, desired output and acceptance criteria. Invocation syntax and available tools depend on the host; this site does not assume a universal install command.
- Try the source workflow in a disposable project or on a copy. Review operations that change files, remote services or billable resources before allowing them.
- Validate the output against the source quality checks and your own requirements. A successful trigger or a high repository Star count does not establish a correct result.
Read further in the source
- Overview
- Skill Boundaries
- Prerequisites
- Required Workflow
- Step 1: Get Code Connect Suggestions
- Option A: Using
figma-desktopMCP (no URL provided) - Option B: When a Figma URL is provided
- Step 2: Scan Codebase for Matching Components
- Step 3: Present Matches to User
- Step 4: Create Code Connect Mappings
- Example 1: Connecting a Button Component
- Example 2: Multiple Components with Partial Selection
- Example 3: Component Needs Creation
- Proactive Component Discovery
- Accurate Structure Matching
- Clear Communication
- Handle Ambiguity
- Graceful Degradation
- Issue: "No published components found in this selection"
- Issue: "Code Connect is only available on Organization and Enterprise plans"
- Issue: No matching component found in codebase
- Issue: "Published component not found" (CODE_CONNECT_ASSET_NOT_FOUND)
- Issue: "Component is already mapped to code" (CODE_CONNECT_MAPPING_ALREADY_EXISTS)
- Issue: "Insufficient permissions to create mapping" (CODE_CONNECT_INSUFFICIENT_PERMISSIONS)
- Issue: Code Connect mapping fails with URL errors
- Issue: Multiple similar components found
- Understanding Code Connect
- Additional Resources
Related Skills
Translation and scope
This reading guide selects passages from the pinned upstream SKILL.md. Translation is assisted. It is not a complete manual or a claim of tested compatibility. Read the original and its referenced files before use.
This introduction refers to the pinned version below; current repository activity and collection time are shown separately.
- Pinned source
- Read the original ↗
- Source retrieved
- Source commit
49f948faa9258a0c61caceaf225e179651397431- Source SHA-256
0f19edad8aed28063a3517c419fbcbef5421d024f189fd02a17fae25093ec69d