figma-code-connect

Name: figma-code-connect
Author: figma

2.1kinstalls163forks

How to install figma-code-connect?

figma/mcp-server-guide/figma-code-connect

$npx -y skills add figma/mcp-server-guide --skill figma-code-connect

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Code Connect
2
3	## Overview
4
5	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.
6
7	> 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.
8
9	## Prerequisites
10
11	- 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.
12	- 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.
13	- Organization or Enterprise plan required — Code Connect is not available on Free or Professional plans.
14	- URL must include `node-id` — the Figma URL must contain the `node-id` query parameter.
15	- 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`:
16	```json
17	{
18	"compilerOptions": {
19	"types": ["@figma/code-connect/figma-types"]
20	}
21	}
22	```
23
24	## Step 1: Parse the Figma URL
25
26	Extract `fileKey` and `nodeId` from the URL:
27
28	\| URL Format \| fileKey \| nodeId \|
29	\|---\|---\|---\|
30	\| `figma.com/design/:fileKey/:name?node-id=X-Y` \| `:fileKey` \| `X-Y` → `X:Y` \|
31	\| `figma.com/file/:fileKey/:name?node-id=X-Y` \| `:fileKey` \| `X-Y` → `X:Y` \|
32	\| `figma.com/design/:fileKey/branch/:branchKey/:name` \| use `:branchKey` \| from `node-id` param \|
33
34	Always convert `nodeId` hyphens to colons: `1234-5678` → `1234:5678`.
35
36	Worked example:
37
38	Given: `https://www.figma.com/design/QiEF6w564ggoW8ftcLvdcu/MyDesignSystem?node-id=4185-3778`
39	- `fileKey` = `QiEF6w564ggoW8ftcLvdcu`
40	- `nodeId` = `4185-3778` → `4185:3778`
41
42	## Step 2: Discover Unmapped Components
43
44	The user may provide a URL pointing to a frame, instance, or variant — not necessarily a component set or standalone component. Call the MCP tool `get_code_connect_suggestions` with:
45	- `fileKey` — from Step 1
46	- `nodeId` — from Step 1 (colons format)
47	- `excludeMappingPrompt` — `true` (returns a lightweight list of unmapped components)
48
49	This tool identifies published components in the selection that don't yet have Code Connect mappings.
50
51	Handle the response:
52
53	- "No published components found in this selection" — the node contains no published components. Inform the user they need to publish the component to a team library in Figma first, then stop.
54	- "All component instances in this selection are already connected to code via Code Connect" — everything is already mapped. Inform the user and stop.
55	- Normal response with component list — extract the `mainComponentNodeId` for each returned component. Use these resolved node IDs (not the original from the URL) for all subsequent steps. If multiple components are returned (e.g. the user selected a frame containing several different component instances), repeat Steps 3–6 for each one.
56
57	## Step 3: Fetch Component Properties
58
59	Call the MCP tool `get_context_for_code_connect` with:
60	- `fileKey` — from Step 1
61	- `nodeId` — the resolved `mainComponentNodeId` from Step 2
62	- `clientFrameworks` — determine from `figma.config.json` `parser` field (e.g. `"react"` → `["react"]`)
63	- `clientLanguages` — infer from project file extensions (e.g. TypeScript project → `["typescript"]`, JavaScript → `["javascript"]`)
64
65	For multiple components, call the tool once per node ID.
66
67	The response contains the Figma component's property definitions — note each property's name and type:
68	- TEXT — text content (labels, titles, placeholders)
69	- BOOLEAN — toggles (show/hide icon, disabled state)
70	- VARIANT — enum options (size, variant, state)
71	- INSTANCE_SWAP — swappable nested instances tied to a specific component (icon, avatar)
72	- SLOT — flexible content regions (freeform layout, mixed children); use `getSlot()` in templates (not the same as INSTANCE_SWAP)
73
74	Save this property list — you will use it in Step 5 to write the template.
75
76	## Step 4: Identify the Code Component
77
78	If the user did not specify which code component to connect:
79
80	1. Check `figma.config.json` for `paths` and `importPaths` to find where components live
81	2. Search the codebase for a component matching the Figma component name. Check common directories (`src/components/`, `components/`, `lib/ui/`, `app/components/`) if `figma.config.json` doesn't specify paths
82	3. Read candidate files and compare their pr

People who liked this also viewed

6 picks

Type

figma-code-connect

2.1kinstalls163forks

View on GitHub

How to install figma-code-connect?

figma/mcp-server-guide/figma-code-connect

$npx -y skills add figma/mcp-server-guide --skill figma-code-connect

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Code Connect
2
3	## Overview
4
5	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.
6
7	> 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.
8
9	## Prerequisites
10
11	- 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.
12	- 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.
13	- Organization or Enterprise plan required — Code Connect is not available on Free or Professional plans.
14	- URL must include `node-id` — the Figma URL must contain the `node-id` query parameter.
15	- 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`:
16	```json
17	{
18	"compilerOptions": {
19	"types": ["@figma/code-connect/figma-types"]
20	}
21	}
22	```
23
24	## Step 1: Parse the Figma URL
25
26	Extract `fileKey` and `nodeId` from the URL:
27
28	\| URL Format \| fileKey \| nodeId \|
29	\|---\|---\|---\|
30	\| `figma.com/design/:fileKey/:name?node-id=X-Y` \| `:fileKey` \| `X-Y` → `X:Y` \|
31	\| `figma.com/file/:fileKey/:name?node-id=X-Y` \| `:fileKey` \| `X-Y` → `X:Y` \|
32	\| `figma.com/design/:fileKey/branch/:branchKey/:name` \| use `:branchKey` \| from `node-id` param \|
33
34	Always convert `nodeId` hyphens to colons: `1234-5678` → `1234:5678`.
35
36	Worked example:
37
38	Given: `https://www.figma.com/design/QiEF6w564ggoW8ftcLvdcu/MyDesignSystem?node-id=4185-3778`
39	- `fileKey` = `QiEF6w564ggoW8ftcLvdcu`
40	- `nodeId` = `4185-3778` → `4185:3778`
41
42	## Step 2: Discover Unmapped Components
43
44	The user may provide a URL pointing to a frame, instance, or variant — not necessarily a component set or standalone component. Call the MCP tool `get_code_connect_suggestions` with:
45	- `fileKey` — from Step 1
46	- `nodeId` — from Step 1 (colons format)
47	- `excludeMappingPrompt` — `true` (returns a lightweight list of unmapped components)
48
49	This tool identifies published components in the selection that don't yet have Code Connect mappings.
50
51	Handle the response:
52
53	- "No published components found in this selection" — the node contains no published components. Inform the user they need to publish the component to a team library in Figma first, then stop.
54	- "All component instances in this selection are already connected to code via Code Connect" — everything is already mapped. Inform the user and stop.
55	- Normal response with component list — extract the `mainComponentNodeId` for each returned component. Use these resolved node IDs (not the original from the URL) for all subsequent steps. If multiple components are returned (e.g. the user selected a frame containing several different component instances), repeat Steps 3–6 for each one.
56
57	## Step 3: Fetch Component Properties
58
59	Call the MCP tool `get_context_for_code_connect` with:
60	- `fileKey` — from Step 1
61	- `nodeId` — the resolved `mainComponentNodeId` from Step 2
62	- `clientFrameworks` — determine from `figma.config.json` `parser` field (e.g. `"react"` → `["react"]`)
63	- `clientLanguages` — infer from project file extensions (e.g. TypeScript project → `["typescript"]`, JavaScript → `["javascript"]`)
64
65	For multiple components, call the tool once per node ID.
66
67	The response contains the Figma component's property definitions — note each property's name and type:
68	- TEXT — text content (labels, titles, placeholders)
69	- BOOLEAN — toggles (show/hide icon, disabled state)
70	- VARIANT — enum options (size, variant, state)
71	- INSTANCE_SWAP — swappable nested instances tied to a specific component (icon, avatar)
72	- SLOT — flexible content regions (freeform layout, mixed children); use `getSlot()` in templates (not the same as INSTANCE_SWAP)
73
74	Save this property list — you will use it in Step 5 to write the template.
75
76	## Step 4: Identify the Code Component
77
78	If the user did not specify which code component to connect:
79
80	1. Check `figma.config.json` for `paths` and `importPaths` to find where components live
81	2. Search the codebase for a component matching the Figma component name. Check common directories (`src/components/`, `components/`, `lib/ui/`, `app/components/`) if `figma.config.json` doesn't specify paths
82	3. Read candidate files and compare their pr

People who liked this also viewed

6 picks

Type