What is the figma-code-connect-components skill?
The figma-code-connect-components skill is a folder in the openai/skills catalog. It tells your agent to list unmapped Figma components with get_code_connect_suggestions, search your repo for matching code components, show you the matches, and send only the ones you accept with send_code_connect_mappings.
The figma-code-connect-components skill lives in the curated folder of OpenAI's skills catalog. Its SKILL.md describes one job: connect Figma design components to code components with Code Connect, so a design component and its code twin point at each other.
It works through two Figma MCP tools, get_code_connect_suggestions and send_code_connect_mappings. The skill supplies the order of steps around them, so the agent finds candidates in your repo and asks before it writes anything.
What changes in your agent's output
- The agent starts from a Figma URL that includes a node-id and converts the hyphenated form 1-2 into the colon form 1:2 that the tool expects.
- It reports components that are unmapped, already connected, or not published, instead of guessing.
- Each candidate match is shown with its file path and the Figma node it pairs with, and you accept all, some, or none.
- The final message is a summary of what connected and what could not be matched.
Before you run it
- The Figma MCP server must be connected and reachable by your agent.
- The component must be published to a team library, because Code Connect only works with published components or component sets.
- SKILL.md states that Code Connect is only available on Organization and Enterprise plans.
Who the figma-code-connect-components skill is for
Best for
- Teams with a published Figma component library and a matching React, Vue, Svelte or SwiftUI codebase.
- Design system owners who want each Figma component tied to a real source path in the codebase.
- Anyone mapping many components at once, since one suggestions call lists every unmapped component in the selection.
Not for
- Writing to the Figma canvas with Plugin API scripts. SKILL.md points that work to the figma-use skill.
- Building a full screen in Figma from code, which it assigns to figma-generate-design.
- Turning a Figma frame into product code. For that job the skill names figma-implement-design. Related: the Figma MCP page.
Use it with UiChemy
This skill maps components in a code project and does not touch WordPress. For a live WordPress site from the same Figma file, UiChemy Figma to WordPress converts it into editable pages. Click Get Started on uichemy.com. See Framelink Figma MCP.
How to install Figma Code Connect Components Skill: Map Design to Code
$skill-installer figma-code-connect-componentsRun the skill installer
The repository README says curated skills install by name with the skill-installer inside Codex. Run
$skill-installer figma-code-connect-components.Restart your agent
The README says to restart Codex after installing so it picks up new skills.
Connect the Figma MCP server
The skill needs the Figma MCP server connected before it can call the Code Connect tools.
Install by hand instead
Run
git clone https://github.com/openai/skills.gitand copy the skills/.curated/figma-code-connect-components folder to the place your agent loads skills from.
Check that it loaded
Ask the agent to connect a published component and give a Figma URL with a node-id. It should call get_code_connect_suggestions, search your code and show a list of matches before it maps anything.
Key features
- Suggestions in one callget_code_connect_suggestions fetches component info, finds the published components in your selection, drops the ones already connected, and returns names, properties and a thumbnail for each unmapped one.
- Node ID conversionA URL such as node-id=1-2 becomes nodeId 1:2 for the tool. SKILL.md flags the node-id parameter as required, since mapping fails without it.
- Desktop selection modeWith the figma-desktop MCP server and no URL, the skill calls the suggestions tool straight away and uses the node currently selected in the open Figma file.
- Codebase search strategyThe agent looks for matching names, similar structure, props that correspond to Figma variants, and files in folders such as src/components, then weighs prop names, defaults and styles.
- Closest candidates on a missIf no exact match exists, the skill shows the two closest candidates, explains the differences and asks you to confirm one or give the right path.
- Accept, pick or skipMatches are listed with links to the code file and the Figma node. You can accept all, select specific ones, or decline, and a full decline ends the run with no further calls.
- Batch mapping callsend_code_connect_mappings creates every accepted mapping in one call. Each entry carries a nodeId, componentName, source path and a label for the framework.
- Framework labelsValid labels include React, Web Components, Vue, Svelte, Storybook, Javascript, Swift UIKit, SwiftUI, Compose, Kotlin, Flutter and Markdown.
- Failure messagesThe tool reports which mappings failed and why, for example a component already mapped, a published component not found, or insufficient permissions, and the agent ends with a summary.
Frequently asked questions
What is the figma-code-connect-components skill?
It is a skill in the openai/skills catalog that connects Figma design components to code components with Code Connect. The agent gets suggestions for unmapped components, searches your codebase for matches, lets you choose, and then sends the accepted mappings to Figma.
How do I install figma-code-connect-components?
The README says curated skills install by name inside Codex, so run $skill-installer figma-code-connect-components and restart Codex. You can also clone the repository and copy the skills/.curated/figma-code-connect-components folder to wherever your agent loads skills from.
What do I need before using it?
You need the Figma MCP server connected, a Figma URL that includes a node-id, and components published to a team library. SKILL.md also states that Code Connect is only available on Organization and Enterprise plans, so check your Figma plan first.
Why does it say no published components were found?
That response means the selection holds no component published to a team library. SKILL.md says to select the component or component set in Figma, publish it to the library, then retry with the same node ID. Unpublished components cannot be mapped.
Does the skill change my code files?
SKILL.md describes searching and reading your code to find matches. The write step is send_code_connect_mappings, which sends mappings to Figma and runs only after you confirm which matches to keep. The skill does not describe editing your component files.
Which AI coding agents can use this skill?
The repository is a catalog of skills for Codex, and the README links the Agent Skills open standard. It does not list other agents. Any agent that loads skill folders and has the Figma MCP server may work, but the repo does not confirm it.
When should I use figma-use instead?
Use figma-use when the task is writing to the Figma canvas with Plugin API scripts. This skill covers only the suggestion and mapping workflow, connecting Figma design components to code components with Code Connect mapping tools. Related: the Figma MCP page.
What license does the skill use?
GitHub shows no license for the repository itself. The README says each skill's license sits in a LICENSE.txt file inside that skill's folder, so read the file in the skill folder before you redistribute it.