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.

Note: This project may also contain parser-based .figma.tsx files (using figma.connect(), published via CLI). This skill covers templates files only — .figma.ts files that use the MCP tools to fetch component context from Figma.

Prerequisites

• Figma MCP server must be connected — verify that Figma MCP tools (e.g., get_code_connect_suggestions) 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.
• TypeScript types — for editor autocomplete and type checking in .figma.ts files @figma/code-connect/figma-types must be added to types in tsconfig.json:

  {
    "compilerOptions": {
      "types": ["@figma/code-connect/figma-types"]
    }
  }
  

Step 1: Parse the Figma URL