figma-design-to-code

Name: figma-design-to-code
Author: figma

1.8kstars163forks

How to install figma-design-to-code?

figma/mcp-server-guide/figma-design-to-code

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

Installs into the current project.

Summary

MANDATORY prerequisite — you MUST invoke this skill BEFORE calling the get_design_context Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this F

Files · 1

View on GitHub

SKILL.md

1	# Implement a Figma Design as Code (Design → Code)
2
3	Use this skill to turn a Figma design into code in a target codebase. This is the read-FROM-Figma direction: pull design context out of Figma with `get_design_context`, then adapt it into the project's real stack. For the reverse direction — building or updating a design in Figma from code — use [figma-generate-design](../figma-generate-design/SKILL.md) instead.
4
5	This skill owns the workflow for design-to-code. Parameter mechanics (nodeId / fileKey / branchKey extraction, URL parsing, `format`/`query` options, response shape) live on the `get_design_context` tool description itself — follow them there.
6
7	Always include `figma-design-to-code` in the comma-separated `skillNames` parameter when calling `get_design_context`. If this skill was loaded via an MCP resource, you MUST prefix the name with `resource:` (e.g. `resource:figma-design-to-code`). This is a logging parameter used to track skill usage — it does not affect execution.
8
9	## Direction and Scope
10
11	- You MUST use this skill for design → code: implementing, translating, or porting a Figma node into code.
12	- You MUST NOT use this skill to write to Figma.
13
14	## Workflow
15
16	### 1. Call get_design_context first
17
18	- You MUST call `get_design_context` on the target node before writing any code. It is your primary tool — a single call returns reference code, a screenshot, and contextual hints.
19	- You MUST NOT reach for `get_metadata` or `get_screenshot` as a substitute. Use them only to orient (e.g. picking a node) or to validate, not in place of `get_design_context`.
20
21	### 2. Treat the output as a reference, not final code
22
23	- The returned code is React + Tailwind enriched with hints. You MUST treat it as a REFERENCE, not as final code to paste verbatim.
24	- You MUST adapt it to the target project's language, framework, component library, styling system, and conventions. Match the surrounding code.
25
26	### 3. Reuse what the project already has
27
28	- Before writing new code, You MUST check the target project for existing components, layout patterns, and design tokens that match the design intent.
29	- You MUST reuse the project's existing components and tokens instead of generating new equivalents from scratch.
30
31	### 4. Honor the response hints by priority
32
33	Apply the hints in this order — earlier sources override later ones:
34
35	1. Code Connect snippets → use the mapped codebase component directly.
36	2. Component documentation links → follow them for usage and guidelines.
37	3. Design annotations → follow any designer notes or constraints.
38	4. Design tokens (CSS variables) → map them to the project's token system.
39	5. Raw hex / absolute positioning → loosely structured; lean on the screenshot for intent.
40
41	### 5. Reproduce images and icons faithfully
42
43	Images and icons come back as `<img>` elements whose `src` is a remote asset URL (`https://.../api/mcp/asset/...`). Apply these rules as you write the code:
44
45	- Render every icon/image from its exported asset. Never hand-write or inline `<svg>`/`<path>`, never author your own icon file, never drop an icon or leave a placeholder — you don't have the real vector data, so anything you draw is wrong.
46	- Sourcing: the asset URL works directly as `src` for an immediate render, but it expires in ~7 days — so for code you'll commit, download-and-commit the exact asset bytes, or wire a dynamic content image to the project's data source (API, CDN, or props). Never a file whose contents you authored.
47	- Reuse a project icon component only if its glyph clearly matches (a name match is not enough); otherwise use the exported asset.
48	- Size explicitly: a fixed-size container (icons are usually square, e.g. `size-[24px]`, `overflow-clip`) with BOTH width and height set, and size the leaf `<img>` to fill it (`100%` or fixed px) — never `auto`, which blows the image up to its intrinsic size.
49
50	## Error Recovery
51
52	- On a `get_design_context` error, STOP and read the message before retrying.
53	- If the design URL has no `node-id` (a file-only URL), ask the user for a node-specific URL — You MUST NOT guess or pass an empty `nodeId`.
54	- On a timeout, retry against a smaller node or selection.
55	- You MUST NOT silently fall back to hand-writing the screen from the screenshot alone when `get_design_context` can still provide context.

figmaPublisher · 15 listings

Preview

figma/mcp-server-guide

# Implement a Figma Design as Code (Design → Code)

Use this skill to turn a Figma design into code in a target codebase. This is the **read-FROM-Figma** direction: pull design context out of Figma with `get_desi

This skill owns the **workflow** for design-to-code. Parameter mechanics (nodeId / fileKey / branchKey extraction, URL parsing, `format`/`query` options, respon

**Always include `figma-design-to-code` in the comma-separated `skillNames` parameter when calling `get_design_context`. If this skill was loaded via an MCP res

Repofigma/mcp-server-guide

License—

TypeSkills

CategoryDesign

UpdatedJul 2026

Repo stars1.8k

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type

figma-design-to-code

1.8kstars163forks

View on GitHub

How to install figma-design-to-code?

figma/mcp-server-guide/figma-design-to-code

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Implement a Figma Design as Code (Design → Code)
2
3	Use this skill to turn a Figma design into code in a target codebase. This is the read-FROM-Figma direction: pull design context out of Figma with `get_design_context`, then adapt it into the project's real stack. For the reverse direction — building or updating a design in Figma from code — use [figma-generate-design](../figma-generate-design/SKILL.md) instead.
4
5	This skill owns the workflow for design-to-code. Parameter mechanics (nodeId / fileKey / branchKey extraction, URL parsing, `format`/`query` options, response shape) live on the `get_design_context` tool description itself — follow them there.
6
7	Always include `figma-design-to-code` in the comma-separated `skillNames` parameter when calling `get_design_context`. If this skill was loaded via an MCP resource, you MUST prefix the name with `resource:` (e.g. `resource:figma-design-to-code`). This is a logging parameter used to track skill usage — it does not affect execution.
8
9	## Direction and Scope
10
11	- You MUST use this skill for design → code: implementing, translating, or porting a Figma node into code.
12	- You MUST NOT use this skill to write to Figma.
13
14	## Workflow
15
16	### 1. Call get_design_context first
17
18	- You MUST call `get_design_context` on the target node before writing any code. It is your primary tool — a single call returns reference code, a screenshot, and contextual hints.
19	- You MUST NOT reach for `get_metadata` or `get_screenshot` as a substitute. Use them only to orient (e.g. picking a node) or to validate, not in place of `get_design_context`.
20
21	### 2. Treat the output as a reference, not final code
22
23	- The returned code is React + Tailwind enriched with hints. You MUST treat it as a REFERENCE, not as final code to paste verbatim.
24	- You MUST adapt it to the target project's language, framework, component library, styling system, and conventions. Match the surrounding code.
25
26	### 3. Reuse what the project already has
27
28	- Before writing new code, You MUST check the target project for existing components, layout patterns, and design tokens that match the design intent.
29	- You MUST reuse the project's existing components and tokens instead of generating new equivalents from scratch.
30
31	### 4. Honor the response hints by priority
32
33	Apply the hints in this order — earlier sources override later ones:
34
35	1. Code Connect snippets → use the mapped codebase component directly.
36	2. Component documentation links → follow them for usage and guidelines.
37	3. Design annotations → follow any designer notes or constraints.
38	4. Design tokens (CSS variables) → map them to the project's token system.
39	5. Raw hex / absolute positioning → loosely structured; lean on the screenshot for intent.
40
41	### 5. Reproduce images and icons faithfully
42
43	Images and icons come back as `<img>` elements whose `src` is a remote asset URL (`https://.../api/mcp/asset/...`). Apply these rules as you write the code:
44
45	- Render every icon/image from its exported asset. Never hand-write or inline `<svg>`/`<path>`, never author your own icon file, never drop an icon or leave a placeholder — you don't have the real vector data, so anything you draw is wrong.
46	- Sourcing: the asset URL works directly as `src` for an immediate render, but it expires in ~7 days — so for code you'll commit, download-and-commit the exact asset bytes, or wire a dynamic content image to the project's data source (API, CDN, or props). Never a file whose contents you authored.
47	- Reuse a project icon component only if its glyph clearly matches (a name match is not enough); otherwise use the exported asset.
48	- Size explicitly: a fixed-size container (icons are usually square, e.g. `size-[24px]`, `overflow-clip`) with BOTH width and height set, and size the leaf `<img>` to fill it (`100%` or fixed px) — never `auto`, which blows the image up to its intrinsic size.
49
50	## Error Recovery
51
52	- On a `get_design_context` error, STOP and read the message before retrying.
53	- If the design URL has no `node-id` (a file-only URL), ask the user for a node-specific URL — You MUST NOT guess or pass an empty `nodeId`.
54	- On a timeout, retry against a smaller node or selection.
55	- You MUST NOT silently fall back to hand-writing the screen from the screenshot alone when `get_design_context` can still provide context.

figmaPublisher · 15 listings

Preview

figma/mcp-server-guide

# Implement a Figma Design as Code (Design → Code)

Use this skill to turn a Figma design into code in a target codebase. This is the **read-FROM-Figma** direction: pull design context out of Figma with `get_desi

This skill owns the **workflow** for design-to-code. Parameter mechanics (nodeId / fileKey / branchKey extraction, URL parsing, `format`/`query` options, respon

**Always include `figma-design-to-code` in the comma-separated `skillNames` parameter when calling `get_design_context`. If this skill was loaded via an MCP res

Repofigma/mcp-server-guide

License—

TypeSkills

CategoryDesign

UpdatedJul 2026

Repo stars1.8k

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type