# Figma Code Connect

Creates and maintains Figma Code Connect template files that map Figma components to...

- Repository: https://github.com/figma/mcp-server-guide (2138 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-28
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add figma/mcp-server-guide --skill figma-code-connect -g -a claude-code -y`
Codex: `npx skills add figma/mcp-server-guide --skill figma-code-connect -g -a codex -y`
Cursor: `npx skills add figma/mcp-server-guide --skill figma-code-connect -g -a cursor -y`
Gemini CLI: `npx skills add figma/mcp-server-guide --skill figma-code-connect -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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., `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`:
  ```json
  {
    "compilerOptions": {
      "types": ["@figma/code-connect/figma-types"]
    }
  }
  ```

## Step 1: Parse the Figma URL

Extract `fileKey` and `nodeId` from the URL:

The rest: https://github.com/figma/mcp-server-guide/blob/HEAD/skills-figquery/figma-code-connect/SKILL.md