Agent skill · practicalswan
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.
What it needs
About 11k tokens when loaded.
What this skill does
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. Prerequisites Figma MCP server must be connected — verify that Figma MCP tools (e.g., getcodeconnectsuggestions) are available before proceeding. If not, guide the user to enable the Figma MCP server and restart their MCP client. Components must be published — Code Connect only works with components published to a Figma team library. If a component is not published, inform the user and stop. 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills practicalswan/figma-code-connect