# figma-code-connect-agent

This subagent matches published Figma components with code and prepares parserless Code Connect templates. Use it to map component properties and review candidate implementations.

- subagent · `type=agent` · 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/agents/figma-code-connect-agent.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/agents/figma-code-connect-agent

## What it does

The agent checks that a Figma target is a published component or component set, then uses Code Connect suggestions and property context to prepare template files. When several code components could match, it briefly states how it chose among them.

Its report covers discovered Figma components, current templates or mappings, code candidates, recommended files, and any actions or confirmations. Ambiguous matches require your approval before a template is created. The target must be published, so an unpublished draft does not meet the stated requirement.

## Requirements
- Works with: Figma

## Install

### Codex (native platform)

**Manually: put the files in place**
- File: `.codex/agents/figma-code-connect-agent.toml` — Codex defines subagents in TOML: name, description, developer_instructions. Move the Markdown text into developer_instructions by hand. For all projects use ~/.codex/agents/

### Claude Code

**Manually: put the files in place**
- File: `.claude/agents/figma-code-connect-agent.md` — For all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention

### Cursor

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

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/agents/figma-code-connect-agent.md

## When to use it
- Create a Code Connect template for a Figma component
- Review existing templates and mappings
- Match Figma components with code candidates
- Request approval before creating an ambiguous template

## Example prompts
- Find the published Figma components and suggest Code Connect templates for them.
- Review existing mappings and match this Figma component set to code components.
- Prepare a template for this component, and ask me first if the match is ambiguous.

## Similar
- [ui-ux-designer](https://affpapa.org/en/nevibecode/agents/ui-ux-designer.md) — subagent · 27069 installs
- [ui-designer](https://affpapa.org/en/nevibecode/agents/voltagent-community-ui-designer.md) — subagent · 1979 installs
- [ui-designer](https://affpapa.org/en/nevibecode/agents/ui-designer.md) — subagent · 1979 installs
- [mobile-app-developer](https://affpapa.org/en/nevibecode/agents/mobile-app-developer.md) — subagent · 1552 installs
- [ux-researcher](https://affpapa.org/en/nevibecode/agents/ux-researcher.md) — subagent · 703 installs
- [accessibility-tester](https://affpapa.org/en/nevibecode/agents/accessibility-tester.md) — subagent · 346 installs

From the same set: [openai/plugins](https://affpapa.org/en/nevibecode/by/openai/plugins.md) — 596 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