Preface¶

Design-to-Code is a highly popular direction in AI programming: designers finalize their work in Figma, while developers in IDEs “guess” spacing, font sizes, and colors by referencing screenshots, with multiple rounds of revisions being the norm. Figma’s official MCP server can now directly feed design structures, variables, and screenshots to AI Agents, but there is still a lack of a stable workflow for “what to do with the data after obtaining it: how to write code that aligns with project specifications, and how to verify pixel-perfect restoration”.

OpenAI maintains the figma-implement-design Skill in the .curated directory of the openai/skills repository, specifically addressing the step of “translating from Figma nodes to deliverable UI code in a repository”. It does not handle in-canvas Figma edits (that is the role of figma-use), but instead translates the design context read via MCP step-by-step into an implementation that matches your project’s tech stack and Design System, with an emphasis on 1:1 visual fidelity.

This article is organized based on the official SKILL.md and Figma MCP documentation, for use in tools that support Agent Skills such as Cursor, Codex CLI, and Claude Code.

What it is¶

figma-implement-design is an official curated Agent Skill from OpenAI, with a core positioning: translating Figma design drafts into production-grade application code, pursuing visual consistency with the design draft (officially described as pixel-perfect / 1:1 visual fidelity).

It works in conjunction with the Figma MCP server—the Skill defines “how to do it”, while the MCP provides tools like get_design_context and get_screenshot to read design data. The Skill also clearly defines boundaries to prevent Agent misuse:

figma-implement-design should only be enabled when you need to “implement designs into your code repository”.

Core Features and Highlights¶

Structured 7-Step Workflow¶

The official requirement is to execute in order without skipping steps to ensure a consistent implementation path every time:

1. Obtain Node ID: Parse the fileKey and node-id from the Figma URL; if using the figma-desktop MCP, you can also directly read the currently selected node in the desktop client (remote MCPs must provide the link).
2. Pull Design Context: Call get_design_context(fileKey, nodeId) to obtain structured data such as Auto Layout, typography, colors/Design Tokens, component variants, and spacing.
3. Capture Visual Reference: Call get_screenshot as the “standard answer” for subsequent pixel-level comparison.
4. Download Resources: Icons, SVGs, images, etc. are obtained from the built-in resource endpoints of the Figma MCP; if a localhost source address is returned, use it directly without installing additional icon libraries or using placeholder images.
5. Map to Project Specifications: The default output from the MCP often follows React + Tailwind conventions, and the Skill requires rewriting it to match your project’s framework, Design System, and existing components, rather than pasting it verbatim.
6. Pursue 1:1 Visual Fidelity: Prioritize the design draft’s fidelity; use Design Tokens when available, prioritize project Tokens in case of conflicts with project Tokens, fine-tune spacing/sizes to maintain visual consistency, and meet WCAG accessibility requirements.
7. Verify Against Figma: Check layout, fonts, colors, interactive states, responsiveness, resource loading, and accessibility item by item.

Splitting Strategy for Complex Drafts¶

When the design context of a single node is too large or truncated, first use get_metadata to view the node tree, then call get_design_context for each child node separately to avoid failed pulls or incomplete information in one request.

Design System First¶

The Skill emphasizes: reuse existing components such as Button and Input, extend variants instead of reinventing the wheel; map Figma colors to project Tokens (such as primary-500); place new components in the Design System directory agreed upon by the project, and supplement TypeScript types and necessary documentation.

Installation and Activation¶

The prerequisite for using this Skill is that the Figma MCP server has been connected and is available. Figma officially recommends the Remote MCP (https://mcp.figma.com/mcp), which has the most comprehensive functions; the Desktop MCP (http://127.0.0.1:3845/mcp) is suitable for some organization/enterprise scenarios, and supports “select a node to get the context”.

1. Configure Figma MCP (Required)¶

Cursor (Recommended): Execute the official Figma plugin installation command in an Agent conversation, and the plugin will configure both the MCP and related Skills:

/add-plugin figma

After installation, complete the Figma authentication connection in Cursor Settings → Tools & MCP. The Figma documentation states that this plugin includes Agent Skills such as “implementing design drafts, Code Connect, and design system rules”.

You can also manually add the Remote MCP or install it via a Deep Link, see the Figma Remote Server Installation Guide for details.

Claude Code: The official recommendation is claude plugin install figma@claude-plugins-official, which also bundles the MCP and Skills.

Codex CLI: Use the curated Skill installer (.system skill, automatically available in the latest version of Codex) within Codex:

$skill-installer figma-implement-design

After installation, restart Codex to load the new Skill. You can also specify a GitHub directory URL for installation:

$skill-installer install https://github.com/openai/skills/tree/main/skills/.curated/figma-implement-design

Note: The README of the openai/skills repository is marked as deprecated, but the Skill examples are still hosted in this repository; see the OpenAI Plugins Repository and Build Plugins Documentation for the new Codex plugin system. The installation instructions in this article are based on the current official documentation for each tool.

2. Install the figma-implement-design Skill¶

If your MCP client did not automatically include this Skill via the Figma plugin, you can copy the official directory to your project’s Skill path, for example, for Cursor:

# Execute in the project root directory, adjust the path as needed
git clone --depth 1 https://github.com/openai/skills.git /tmp/openai-skills
cp -r /tmp/openai-skills/skills/.curated/figma-implement-design .cursor/skills/

After copying, restart your IDE / Agent so that the Skill is indexed. The Skill trigger conditions (written in the description field in frontmatter) include: the user provides a Figma URL, mentions “implement design / generate code / implement component”, or requests writing UI according to Figma specifications, etc.

3. Preparations Before Use¶

• Prepare an accessible Figma design link, with the format example:

https://figma.com/design/:fileKey/:fileName?node-id=42-15

Where :fileKey is the file key after /design/, and 42-15 is the node-id parameter (the specific frame or component).

• It is best for the project to already have a Design System or component library; it can also be used without one, but the Skill will prompt to prioritize establishing reusable components.

Typical Usage Examples¶

Example 1: Implement a Button Component¶

A user says to the Agent:

Implement this Figma button component: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15

Under the constraints of the Skill, the Agent should proceed in order:
1. Parse fileKey=kL9xQn2VwM8pYrTb4ZcHjF, nodeId=42-15
2. get_design_context(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15")
3. get_screenshot(...) to keep as a reference
4. Download resources such as button icons from the MCP resource endpoints
5. Check if the project already has a Button component—extend the variant if it exists, create a new one according to the project specifications if not
6. Map Figma color values to project Tokens (such as primary-500, primary-hover)
7. Check padding, border radius, and font weight against the screenshot

Example 2: Build a Dashboard Full-Page Layout¶

After the user provides the Dashboard frame link, the Skill recommends first using get_metadata to understand the sub-structures such as header, sidebar, and cards, then calling get_design_context for each node separately, and finally using the full-page get_screenshot for overall verification. Do not skip the metadata step and pull the entire tree at once for complex pages.

Example 3: Select a Node Only (Desktop MCP)¶

When using figma-desktop and the user does not provide a URL, select the target node in the Figma desktop application; the MCP will automatically use the currently open file and selection. Note: This capability is only supported by the Desktop MCP, and the Remote MCP must provide a frame/layer link.

Applicable Scenarios and Notes¶

Who is it suitable for?¶

• Frontend / full-stack developers who need to quickly implement Figma components or pages into existing codebases
• Design system maintainers who want AI outputs aligned with Tokens and existing components, rather than stacking inline styles
• Product teams that have finalized design drafts for new feature iterations and hope to shorten the “draft to PR” cycle

Usage Restrictions¶

• Must have an available Figma MCP; the Skill itself does not replace MCP connection and authentication
• Deliverables are code in the user’s repository, not Figma file edits
• The React+Tailwind output returned by the MCP is only an intermediate representation, and the final code style shall be subject to the project’s standards
• Split nodes for overly large drafts, otherwise truncated context will lead to implementation deviations

Common Problems (Official FAQ Summary)¶

The acceptance checklist (official Step 7) includes: layout, fonts, colors, interactive states such as hover/active/disabled, responsive constraints, resources, and accessibility—it is recommended to manually review this before the Agent marks the task as complete.

Summary¶

figma-implement-design fills the gap between “what the Figma MCP can read” and “how code should be written in the repository”: it provides a fixed 7-step workflow, emphasizes screenshot comparison and Design System reuse, and has a clear division of labor with other Figma series Skills. In the Design-to-Code track, the official curated OpenAI solution paired with Figma’s official MCP is highly representative and worth incorporating into frontend Agent workflows.

Official Skill directory: https://github.com/openai/skills/tree/main/skills/.curated/figma-implement-design

Figma MCP documentation: https://developers.figma.com/docs/figma-mcp-server/