# connect-figma-components

Builds and refreshes Figma Code Connect templates for components: reads a Figma link, finds the nodes and matches them to code.

- command · `type=command` · Codex, ChatGPT · ★ 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/commands/connect-figma-components.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/commands/connect-figma-components

## What it does

The command takes a Figma URL containing `node-id`, pulls the metadata and picks out the component nodes. It then looks for existing Code Connect templates or mappings. Components without one get matched against candidate implementations in your codebase. Matches are shown first, and `.figma.js` files are written after you confirm. The run ends with a summary of what was created, skipped or left unresolved.

A second argument, `component_path`, points at a local component you already know about, which skips the codebase search. The Figma URL is required unless the component comes from a `figma-desktop` selection.

On a large design system, mapping components one by one gets tedious. The command hands the job to the `figma-code-connect-agent` subagent so many components can be handled in a single pass.

## Requirements
- Works with: Figma

## Install

### Codex (native platform)

**Manually: put the files in place**
- File: `~/.codex/prompts/connect-figma-components.md` — Call it with /prompts:connect-figma-components. Codex marks this format deprecated in favour of skills

### Claude Code

**Manually: put the files in place**
- File: `.claude/commands/connect-figma-components.md` — Call it with /connect-figma-components. For all projects use ~/.claude/commands/

### GitHub Copilot

**Manually: put the files in place**
- File: `.github/prompts/connect-figma-components.prompt.md`

### Gemini CLI

**Manually: put the files in place**
- File: `.gemini/commands/connect-figma-components.toml` — Gemini stores commands as TOML: the prompt text goes into the prompt field

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/commands/connect-figma-components.md

## When to use it
- match Figma nodes to components in the codebase
- generate `.figma.js` templates for new components
- find components that still have no Code Connect mapping
- refresh mappings that already exist
- work through a batch of components in one pass via the subagent

## Example prompts
- Create Code Connect templates for the components in `<figma_url>`
- Find the components in `<figma_url>` that have no mapping yet and write `.figma.js` for them
- Match the components from `<figma_url>` against implementations in `src/components`

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

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