Code Connect Mapping Checklist
- Confirm Figma component is published
- Convert URL node-id (
-) to tool nodeId (:) - Check existing mappings first
- Compare props/variants between design and code
- Ask for confirmation when multiple matches are plausible
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`.
Ask your Agent
Use this Skill: https://skilld.dev/gh/openai/skills/figma-code-connect-components
This session only. Nothing lands on disk.
referencesmapping-checklist.md
262 B≈66 tokens on demand. Your agent reads this file only when SKILL.md points to it.
Source: SKILL.md on GitHub
Third-party checks
No alerts17d4 checks · Risk SAFE
- Gen Agent Trust Hub17d
This skill is safe for use and follows standard procedures for design-to-code synchronization. It facilitates the mapping of Figma components to local code implementations using a structured workflow that requires user review before finalizing any changes.
- Socket17d
No alerts
- Snyk17d
Risk: LOW · No issues
- ZeroLeaks5mo
Score: 93/100 · 2 sections analyzed
Provenance
Signed by skilld at 0e7823c. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.
Last checked against GitHub 2 months ago.
Activeupdated 6 months ago
Topics
- figma
- code-connect
- design-to-code
- component-mapping
- design-systems
README badge
What it does
Establishes mappings between Figma design components and code implementations using Figma's Code Connect feature. Analyzes Figma component structure, searches your codebase for matching code components, and creates the mappings via `get_code_connect_suggestions` and `send_code_connect_mappings` API calls.
Generated from the current SKILL.md.
Frequently asked
What's the difference between this skill and figma-implement-design?
This skill creates mappings between existing Figma components and code components using Code Connect. figma-implement-design generates new product code from a Figma design. Use this skill when you already have code components and want to link them to Figma; use figma-implement-design when you need to write code from scratch based on a design.
Do my Figma components need to be published?
Yes. Code Connect only works with components published to a team library. Unpublished components cannot be mapped.
What Figma plan do I need?
Code Connect is only available on Organization and Enterprise plans. It is not available on free or professional team plans.
Can I use this without providing a Figma URL?
Yes, if you have the figma-desktop MCP server connected. Select a node directly in the Figma desktop app and the skill will use the currently open file. Otherwise, you must provide a Figma URL with the node-id parameter.
What frameworks and languages does Code Connect support?
React, Vue, Svelte, Web Components, JavaScript, Swift UIKit, Objective-C UIKit, SwiftUI, Compose, Java, Kotlin, Android XML Layout, Flutter, Markdown, and Storybook.
Generated from the current SKILL.md. These answers refresh after source changes.