figma-code-connect

Figma Code Connect creates and maintains Figma Code Connect template files (.figma.ts) that map Figma components to code snippets. It applies when a user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create or update .figma.ts or .figma.js files. The skill covers template files only—.figma.ts files that use MCP tools to fetch component context from Figma—and explicitly distinguishes them from parser-based .figma.tsx files that use figma.connect() and are published via CLI.

Several prerequisites must hold: the Figma MCP server must be connected (verified by the availability of tools like get_code_connect_suggestions), components must be published to a Figma team library, an Organization or Enterprise plan is required, and the Figma URL must include a node-id query parameter. For editor autocomplete and type checking, @figma/code-connect/figma-types must be added to the types array in tsconfig.json. The workflow proceeds through defined steps: parse the Figma URL to extract fileKey and nodeId (always converting node-id hyphens to colons, e.g. 1234-5678 to 1234:5678); discover unmapped components via get_code_connect_suggestions with excludeMappingPrompt set true; fetch component property definitions via get_context_for_code_connect using resolved mainComponentNodeIds; identify the matching code component by inspecting figma.config.json paths and importPaths and comparing prop interfaces; and confirm the match with the user before writing.

The template file itself follows a fixed structure with url, source, and component header comments, a figma import, an exported object providing a required example code snippet, optional imports, a required id, and optional metadata (nestable flag and props). Property mapping tables translate each Figma property type to its template method: TEXT via getString, BOOLEAN via getBoolean, VARIANT via getEnum, INSTANCE_SWAP via getInstanceSwap (with hasCodeConnect/executeTemplate), and SLOT via getSlot, plus helpers like findInstance and findText for named child or text layers. The skill also handles response edge cases, such as no published components found or everything already connected, instructing when to inform the user and stop.