# figma-code-connect

> Claude/Codex skill by [@figma](https://omgskills.com/library/figma/index.md) · 2.1k stars · Updated 2026-10-19

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.

## Install

```sh
git clone https://github.com/figma/mcp-server-guide /tmp/mcp-server-guide && ln -s /tmp/mcp-server-guide/skills/figma-code-connect ~/.claude/skills/figma-code-connect
```

## From README

Code Connect Overview Create Code Connect template files (.figma.ts) that map Figma components to code snippets. Given a Figma URL, follow the steps below to create a template. You write .figma.ts template files ONLY — never .figma.tsx. This skill produces parserless templates: a .figma.ts file whose default export uses a figma.code... tagged template. Do NOT write a .figma.tsx file and do NOT use figma.connect() — that is the separate parser-based Code Connect format (published a different way) and is the wrong artifact for this skill; output written as .figma.tsx is rejected outright. If a .figma.tsx already exists for a component, leave it untouched and add your .figma.ts template alongside it. A capable model may be tempted to reach for the more familiar .figma.tsx / figma.connect() pattern from memory — resist it; here the correct output is always .figma.ts + figma.code.

## Links

- HTML page: https://omgskills.com/skills/figma/dev-mode-mcp-server-guide/figma-code-connect/
- GitHub: https://github.com/figma/mcp-server-guide
- Author: [@figma](https://omgskills.com/library/figma/index.md)

## More from this repo

- [figma-code-workflows](https://omgskills.com/skills/figma/mcp-server-guide/skills/figma-code-workflows/index.md) — Import or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or...
   - [@figma](https://omgskills.com/library/figma/index.md) · 2.1k stars
- [figma-generative-plugins](https://omgskills.com/skills/figma/mcp-server-guide/skills/figma-generative-plugins/index.md) — \*\*MANDATORY prerequisite\*\* — load this skill before calling \`create\_generative\_plugin\` or \`update\_generative\_plugin\`.
   - [@figma](https://omgskills.com/library/figma/index.md) · 2.1k stars
- [figma-shaders](https://omgskills.com/skills/figma/mcp-server-guide/skills/figma-shaders/index.md) — \*\*MANDATORY prerequisite\*\* — load this skill before calling \`create\_shader\` or \`update\_shader\`.
   - [@figma](https://omgskills.com/library/figma/index.md) · 2.1k stars