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
With your agent
Install OMGSkills skill "figma/dev-mode-mcp-server-guide:figma-code-connect" into this agent's normal skills directory: call the OMGSkills MCP get_install_plan tool for your agent and run the script it returns (it installs only the pinned commit and verifies SKILL.md), and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.
Manual command
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-generate-design
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section...
figma-use
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call.
figma-code-workflows
Import or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or...