What is the figma skill?
The figma skill is a curated entry in the openai/skills catalog. Its SKILL.md tells an agent to use the Figma MCP server in a set order: fetch design context for a node, grab a screenshot, translate the output into the project's own conventions, then check the result against the design.
The figma skill is a folder in the openai/skills repository, described there as a skills catalog for Codex. It holds a SKILL.md, two reference files, an agents/openai.yaml file and icon assets for working with the Figma MCP server.
It does not replace the Figma MCP server. The skill assumes the server is connected and tells the agent how to use it. Setup, config and troubleshooting notes sit in a references file named figma-mcp-config.md.
What changes in your agent's output
- The agent fetches structured design context for the exact node before it writes any code, instead of guessing from a pasted image.
- When a response is too large, the agent asks for a high-level node map with get_metadata, then re-fetches only the nodes it needs.
- A screenshot of the variant being built is fetched as a visual reference before implementation starts.
- Generated React and Tailwind is treated as a picture of the design, then rewritten to the project's own tokens, components and typography.
- The finished UI is checked against the Figma screenshot for look and behavior before the task counts as done.
Who the figma skill is for
Best for
- Teams that already run the Figma MCP server and want every implementation to follow the same fetch, screenshot, build and validate order.
- Codebases with an existing design system, where output must reuse components and design tokens instead of adding new ones.
- Requests that start from a link to one specific frame or variant.
Not for
- Work without the Figma MCP server. The skill is built around its tools and cannot fetch a design on its own.
- Writing project rules for a design system. See Figma design system rules for that job.
- Mapping components to code. Code Connect components covers that separately.
- Other ways into Figma data, such as Sunnyside Figma Context or Figma MCP Cached.
Repository status
The repository README now carries a deprecation notice that points to the OpenAI Plugins repository for current Codex skill and plugin examples. The figma skill is still in the catalog, so read that notice before building a team workflow on it.
Use it with UiChemy
This skill sends Figma frames to application code, usually React and Tailwind. For a WordPress site, UiChemy Figma to WordPress converts a Figma design into an editable WordPress page instead. Click Get Started on uichemy.com.
How to install Figma Skill: Turn Figma Frames into Code with an AI Agent
$skill-installer figmaRun the Codex installer
Inside Codex, run
$skill-installer figma. Curated skills install by name, and this one lives in skills/.curated/figma.Restart Codex
The README says to restart Codex after installing a skill so it picks up the new folder.
Install from a directory URL
The README also accepts a GitHub directory link:
$skill-installer install https://github.com/openai/skills/tree/main/skills/.curated/figma.Use another agent
Run
git clone https://github.com/openai/skills.gitand copy skills/.curated/figma to wherever your agent loads skills. The repository documents only the Codex installer.Connect the Figma MCP server
The skill needs the server connected. Follow references/figma-mcp-config.md inside the skill folder for setup and verification.
Check that it loaded
Give the agent a Figma frame link and ask it to build the screen. It should call get_design_context, then get_screenshot, before it writes any code.
Key features
- Required flowRun get_design_context first, then get_screenshot, and only after both download assets and start implementing. SKILL.md marks this order as not to be skipped.
- Metadata fallbackIf the design context response is too large or truncated, the agent runs get_metadata for a node map and re-fetches only the required nodes.
- Project conventions firstTailwind output is swapped for the project's preferred utilities and tokens. Existing buttons, inputs, typography and icon wrappers are reused, not duplicated.
- Asset handlingWhen the server returns a localhost source for an image or SVG, the agent uses it directly. It must not add icon packages or create placeholders.
- Link-based promptingYou hand the agent a Figma frame or layer link. The client cannot browse it but extracts the node ID, so the link must point at the exact variant.
- Visual parityThe skill asks for 1:1 visual parity. When that conflicts with the design system, tokens win and spacing or sizes are adjusted minimally.
- Tool and prompt catalogA references file, figma-tools-and-prompts.md, lists the tools and prompt patterns for choosing frameworks and components and for fetching metadata.
- Setup and troubleshooting notesfigma-mcp-config.md covers setup, verification, troubleshooting and link-based usage reminders for the Figma MCP server.
- Existing patterns respectedRouting, state management and data-fetching patterns already in the repository are kept, according to the skill's implementation rules.
Frequently asked questions
What is the figma skill?
It is a curated skill in the openai/skills catalog. Its SKILL.md sets the rules for Figma-driven implementation: fetch design context and a screenshot through the Figma MCP server, translate the output to the project's conventions, reuse existing components and tokens, and validate against the design.
How do I install the figma skill?
In Codex, run $skill-installer figma and restart Codex. You can also pass the GitHub directory URL of skills/.curated/figma to the installer. For other agents, clone the repository and copy that folder to the place your agent loads skills from.
Does the figma skill include the Figma MCP server?
No. The skill is instructions for using the server, not the server itself. You connect the Figma MCP server separately, and the skill's references folder holds setup, verification and troubleshooting notes plus a catalog of the tools and prompt patterns.
Which AI coding agents can use the figma skill?
The repository is a catalog for Codex and documents the Codex installer. It also links the Agent Skills open standard. A folder-based agent such as Claude Code or Cursor may load it if the Figma MCP server is connected, but the repository does not confirm that.
What does the skill do with Tailwind output?
SKILL.md says the Figma MCP output, usually React and Tailwind, represents design and behavior but is not final code style. The agent replaces Tailwind classes with the project's preferred utilities or tokens and reuses existing components instead of duplicating them.
How is the figma skill different from Code Connect?
The figma skill governs how an agent fetches a frame and translates it into project code. For component mapping, see Code Connect components. The two answer different questions and can sit side by side in one workflow.
What license does the figma skill use?
GitHub shows no license for the repository. The README says each skill's license sits in a LICENSE.txt inside its folder, and the figma folder contains one. Read that file before you copy or redistribute the skill.
Is the openai/skills repository still maintained?
Its README opens with a deprecation notice that sends readers to the OpenAI Plugins repository for current examples. The last push to the default branch was on Sep 8, 2026. Check the notice and recent commits before you standardize on the skill.