connect-figma-components — Claude command: Code Connect templates
Builds and refreshes Figma Code Connect templates for components: reads a Figma link, finds the nodes and matches them to code.
~/.codex/prompts/connect-figma-components.mdWhat connect-figma-components 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.
What it helps with
- match Figma nodes to components in the codebase
- generate
.figma.jstemplates 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 for the agent
- Create Code Connect templates for the components in
<figma_url> - Find the components in
<figma_url>that have no mapping yet and write.figma.jsfor them - Match the components from
<figma_url>against implementations insrc/components
How to install connect-figma-components
Manually: put the files in place
~/.codex/prompts/connect-figma-components.mdCall it with /prompts:connect-figma-components. Codex marks this format deprecated in favour of skills
Manually: put the files in place
.claude/commands/connect-figma-components.mdCall it with /connect-figma-components. For all projects use ~/.claude/commands/
Manually: put the files in place
.github/prompts/connect-figma-components.prompt.mdManually: put the files in place
.gemini/commands/connect-figma-components.tomlGemini stores commands as TOML: the prompt text goes into the prompt field
Questions about connect-figma-components
How do I install connect-figma-components in Claude?
Place the command file at ~/.codex/prompts/connect-figma-components.md.
What does connect-figma-components do?
It creates and updates Figma Code Connect templates: it reads nodes from a Figma link, searches the codebase for matching implementations and writes .figma.js files once you confirm.
What input does the command need?
A Figma URL with node-id — without it the command has nothing to work from, unless the component is selected through figma-desktop. The component_path argument is optional.
