# figma-code-connect

Creates and updates Code Connect templates that tie Figma components to code snippets. Use it for design-to-code mapping.

- skill · `type=skill` · Codex, ChatGPT · 28 installs · ★ 7604
- Author: Figma · official OpenAI repository
- License: LicenseRef-Figma-Developer-Terms · policy=link-only · description only; the file stays with the author
- Source: https://github.com/openai/plugins/tree/HEAD/plugins/figma/skills/figma-code-connect/SKILL.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/skills/figma-code-connect

## What it does

This skill produces `.figma.ts` template files for linking published Figma components with code snippets. It reads a Figma URL containing `node-id`, discovers components that lack mappings, and compares their properties with the props of a code component in the project.

The output uses a `figma.code` tagged template. `.figma.tsx` is the wrong format for this skill. A connected Figma MCP server, a component published to a team library, and an Organization or Enterprise plan are required. Add `@figma/code-connect/figma-types` to `types` in `tsconfig.json` for editor support and type checking.

Without the Figma MCP server, the skill cannot inspect component data. It also checks `figma.config.json` and asks for confirmation after finding a matching code component.

## Requirements
- Works with: Figma

## Install

### Codex (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add openai/plugins --skill figma-code-connect -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/figma-code-connect/SKILL.md` — For all projects use ~/.agents/skills/

### Claude Code

1. **Skills CLI (Vercel)**
```bash
npx skills add openai/plugins --skill figma-code-connect -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/figma-code-connect/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/figma-code-connect/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/figma-code-connect/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install openai/plugins figma-code-connect
```

2. **Manually: put the files in place**
- File: `.github/skills/figma-code-connect/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/openai/plugins --path plugins/figma/skills/figma-code-connect
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/figma-code-connect/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/openai/plugins/tree/HEAD/plugins/figma/skills/figma-code-connect/SKILL.md

## When to use it
- map a Figma component to a code component
- create a `.figma.ts` Code Connect template
- find published components without mappings
- match Figma properties to component props
- maintain an existing Code Connect template

## Example prompts
- Create a Code Connect template for the selected Figma component and save it as `.figma.ts`.
- Find unmapped components from this Figma URL and match them to components in the project.
- Inspect the Figma component properties and propose the closest code component before writing the template.

## Similar
- [figma-code-connect-components](https://affpapa.org/en/nevibecode/skills/openai-figma-code-connect-components.md) — skill · 2700 installs
- [figma-integration](https://affpapa.org/en/nevibecode/skills/plugin87-figma-integration.md) — skill · 478 installs
- [Figma MCP Server](https://affpapa.org/en/nevibecode/mcp/figma-mcp-server.md) — MCP server · ★ 2119
- [figma](https://affpapa.org/en/nevibecode/plugins/figma.md) — plugin · ★ 2119
- [figma-implement-design](https://affpapa.org/en/nevibecode/skills/openai-figma-implement-design.md) — skill · 6700 installs
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16073

From the same set: [openai/plugins](https://affpapa.org/en/nevibecode/by/openai/plugins.md) — 528 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md