Preface¶

When working on frontend or full-stack projects, you often encounter the same situation: after the designer finishes revising the draft in Figma, the development team still has to compare annotations, slice images, match color values, and estimate spacing. You can also “code by looking” by feeding a screenshot to an AI, but the model cannot see the node structure, variables, and component mappings, so the generated code can often only serve as a draft. Figma later launched the MCP server, which can directly pass design context to Agents; OpenAI added a Skill called figma in curated Skills, which specifically constrains “how to adjust the MCP, the order of fetching data, and how to adapt to your project’s conventions”. This article focuses on this Skill, explaining what it is, how to install it, and how to use it.

What is this¶

figma is an Agent Skill maintained by OpenAI under the skills/.curated/figma path in the openai/skills repository. Its positioning is very clear: it obtains design context, screenshots, variables and resources through the Figma MCP server, and translates Figma nodes into implementable production code.

The trigger scenarios are clearly stated in the Skill’s description: when the task involves a Figma URL, node ID, design-to-code implementation, or the installation and troubleshooting of the Figma MCP, this Skill should be enabled.

You need to distinguish two layers of relationships:
- Figma MCP: The server-side service that actually connects to Figma and provides tools such as get_design_context (the remote address is https://mcp.figma.com/mcp).
- figma Skill: The workflow and constraints that tell the Agent “must first fetch context, then screenshots, then implement”, avoiding random guessing by skipping steps.

The Skill is based on the universal SKILL.md format and can be reused in tools that support Agent Skills such as Codex, Cursor, and Claude Code; the MCP itself also needs to be separately configured and authenticated with OAuth in the corresponding client.

Core Features and Highlights¶

According to the official SKILL.md and references/figma-tools-and-prompts.md, this Skill mainly combines the following capabilities into a fixed workflow:
1. Fetch structured design context: Prioritize calling get_design_context to get the structured representation of the node; the default output is biased towards React + Tailwind, but it should be regarded as an intermediate representation of design/behavior rather than the final code style.
2. Large node downgrade strategy: When the response is too large or truncated, first use get_metadata to view the high-level node diagram, and then re-call get_design_context for child nodes as needed.
3. Visual reference: Use get_screenshot to obtain a screenshot of the current node/variant as a visual reference during the implementation process.
4. Variables and styles: get_variable_defs can list colors, spacing, fonts and other variables used in the selection area, which is convenient for aligning design tokens.
5. Resource processing: Obtain images/SVGs through the assets endpoint of the MCP; if the returned address is localhost, use it directly, do not reference another icon pack, and do not randomly create placeholder images.
6. Code Connect: get_code_connect_map / add_code_connect_map are used to map Figma nodes to existing components in the repository, reducing the need to “recreate a set of Buttons”.
7. Link-driven: The remote MCP is link-based — copy the frame/layer link to the client, and the client parses the node ID from the URL, instead of “opening a webpage to browse”.

The Skill also emphasizes an implementation principle: the Tailwind/React output from the MCP should be translated into the component, color palette, typography and routing conventions of the current project; in case of conflicts, prioritize reusing the design system tokens, and then fine-tune the spacing dimensions to match the visual effect.

Installation and Activation¶

1. Install the figma Skill¶

In Codex, curated Skills can be installed by name using the built-in installer (official README example):

$skill-installer figma

You can also use installation entrances such as skills.sh (requires Node to be installed locally):

npx skills add https://github.com/openai/skills --skill figma

If it does not appear automatically after installation, restart Codex (or the corresponding Agent) and try again.

For other tools that support SKILL.md, you can put the entire figma directory (including SKILL.md and references/) into the corresponding Skills directory, for example:
- Codex / General: ~/.agents/skills/figma/ or .agents/skills/figma/ in the repository
- Cursor: ~/.cursor/skills/figma/ or .cursor/skills/figma/ in the project
- Claude Code: ~/.claude/skills/figma/ or .claude/skills/figma/ in the project

The specific scan path shall prevail based on the official documents of each tool; the directory must contain SKILL.md with name and description.

2. Configure Figma MCP (the infrastructure on which the Skill depends)¶

The configuration instructions for the Skill are written in references/figma-mcp-config.md. You can register the remote MCP in Codex’s ~/.codex/config.toml:

[mcp_servers.figma]
url = "https://mcp.figma.com/mcp"
bearer_token_env_var = "FIGMA_OAUTH_TOKEN"
http_headers = { "X-Figma-Region" = "us-east-1" }

Key points:
- The environment variable FIGMA_OAUTH_TOKEN must be available in the same environment where Codex is started.
- X-Figma-Region needs to match the Figma region of your organization.
- OAuth on Streamable HTTP requires enabling the RMCP client: set [features].rmcp_client = true in the top level of config.toml (older versions may use experimental_use_rmcp_client = true).
- Restart the client after modifying the configuration and token; you can ask the Agent to list Figma-related tools to confirm that the service is reachable.

Figma official also provides recommended connection methods for various clients (the remote MCP address is also https://mcp.figma.com/mcp), for example:
- Cursor: Execute /add-plugin figma in the chat, or install via the official deep link and complete Connect/OAuth.
- Claude Code: claude plugin install figma@claude-plugins-official, or claude mcp add --transport http figma https://mcp.figma.com/mcp.
- Codex: Install the Figma plugin in the app, or via CLI: codex mcp add figma --url https://mcp.figma.com/mcp.

The Skill manages the workflow, while the MCP manages connectivity; only when both sides are ready can the link-driven design-to-code be complete.

Typical Usage Examples¶

Do not skip the process required by the official guidelines:
1. get_design_context — first fetch the structured representation of the exact node
2. If the response is too large or truncated → get_metadata, then re-fetch get_design_context for necessary child nodes
3. get_screenshot — visual reference
4. Download the required assets before starting to write code
5. Translate the default React + Tailwind representation into project conventions
6. Perform 1:1 perception and behavior verification against Figma (especially screenshots)

Prompt Examples¶

Paste the specific frame/layer link into the conversation, for example:

Please implement the interface based on this Figma link:
https://www.figma.com/design/<fileKey>/<fileName>?node-id=1-2

First follow the figma Skill process to fetch the design context and screenshot,
then map to the existing components in the src/components/ui directory of this repository, use the project's existing tokens for styling, do not directly copy the default Tailwind output.

When changing frameworks or component libraries, you can clearly specify constraints according to the official prompt patterns:

generate my Figma selection in Vue

generate my Figma selection using components from src/components/ui and style with Tailwind

Check variables:

what color and spacing variables are used in my Figma selection?

Check Code Connect mapping:

show the code connect map for this selection

The link must point to the exact node or variant you want to implement; the client only parses the node ID from the URL, and pointing to the wrong layer will result in the wrong implementation object.

Applicable Scenarios and Notes¶

Most suitable for:
- Teams with existing design systems/component libraries that hope AI can implement Figma nodes according to specifications, instead of generating a set of UI from scratch.
- Scenarios where both structural data and screenshots are required for strict visual alignment.
- Teams already using Code Connect who want to bind Figma components with repository components.
- Troubleshooting situations where “Agents randomly guess designs”, using the Skill to fix the data fetching order.

Notes during use:
- Without available Figma MCP connection and authentication, the Skill alone cannot pull design data.
- The default React + Tailwind output is only a representation; hardcoding it into non-React projects will be incompatible; you need to specify the target stack in the prompts and project rules.
- Large pages are prone to truncation, remember to use get_metadata to split the nodes.
- Incorrect configuration of tokens, region headers, and RMCP client are common reasons for connection failures; do not add extra quotes to the token.
- The openai/skills repository README has reminded that the entire repository is migrating to the Plugins system; you can still use the current curated content via $skill-installer / directory copy locally, but subsequent distribution entrances may change, please refer to OpenAI’s latest documentation.

Summary¶

The figma Skill turns “design-to-code” from screenshot-based guessing into a repeatable set of MCP data fetching and implementation rules: first fetch context, then screenshots, then resources, and finally implement according to project conventions. It comes from OpenAI curated Skills and is used in conjunction with the official Figma MCP (https://mcp.figma.com/mcp). If you are using Codex, Cursor or Claude Code for UI implementation, installing the Skill, connecting the MCP, and sending an exact frame link will usually produce much more reliable results than just pasting a screenshot.

Official links:
- Skill directory: https://github.com/openai/skills/tree/main/skills/.curated/figma
- Figma MCP remote server installation guide: https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/
- Figma MCP tools and prompts: https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/

Integrate Figma Designs into AI Programming Workflows with OpenAI's Official Figma Skill