figma-code-connect
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
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-connectFrom 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.
More from this repo
figma-code-workflows
Import or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or...
figma-generative-plugins
**MANDATORY prerequisite** — load this skill before calling `create_generative_plugin` or `update_generative_plugin`.
figma-shaders
**MANDATORY prerequisite** — load this skill before calling `create_shader` or `update_shader`.