figma-code-connect
figma code connect
What it does
- Organization or Enterprise plan required — Code Connect is not available on Free or Professional plans.
- URL must include node-id — the Figma URL must contain the node-id query parameter.
- TypeScript types — for editor autocomplete and type checking in .figma.ts files @figma/code-connect/figma-types must be added to types in tsconfig.json:
- fileKey = QiEF6w564ggoW8ftcLvdcu
- nodeId = 4185-3778 → 4185:3778
- fileKey — from Step 1
- nodeId — from Step 1 (colons format)
Requirements & configuration
- "No published components found in this selection" — the node contains no published components. Inform the user they need to publish the component to a team library in Figma first, then stop.
- When you need to access children that aren't exposed as component properties:
- | instance.findText('LayerName') → .textContent | You need text content from a named text layer |
- | instance.findConnectedInstances(fn) | You need multiple connected children matching a filter |
- | instance.findLayers(fn) | You need any layers (text + instances) matching a filter |
Configuration: SLOT
Derived from the skill's own SKILL.md documentation · extracted 2026-07-23
figma-code-connect FAQ
What does the figma-code-connect skill do?
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files. Organization or Enterprise plan required — Code Connect is not available on Free or Professional plans. URL must include node-id — the Figma URL must contain the node-id query parameter.
What does figma-code-connect require?
"No published components found in this selection" — the node contains no published components. Inform the user they need to publish the component to a team library in Figma first, then stop. When you need to access children that aren't exposed as component properties: | instance.findText('LayerName') → .textContent | You need text content from a named text layer | | instance.findConnectedInstances(fn) | You need multiple connected children matching a filter | | instance.findLayers(fn) | You need any layers (text + instances) matching a filter | Configuration keys: SLOT.
How do I install figma-code-connect?
Run: npx -y skills add https://github.com/figma/mcp-server-guide --skill figma-code-connect --agent claude-code — the source lives at github.com/figma/mcp-server-guide.
Maintain figma-code-connect?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[figma-code-connect on getagentictools](https://getagentictools.com/skills/figma-mcp-server-guide-figma-code-connect?ref=badge) npx agentictools info skills/figma-mcp-server-guide-figma-code-connect The second line is the CLI lookup for this page — handy in READMEs and docs.
