Using the OpenAI Figma Skill with the Figma MCP server

The OpenAI Figma Skill is part of the official skill collection in the openai/skills GitHub repository, located in the curated folder skills/.curated/figma. It connects Codex, Claude Code, and similar AI coding agents to the Figma MCP server, a Model Context Protocol server provided by Figma that delivers structured design context, screenshots, variables, and assets directly from Figma files. Its purpose is to translate Figma nodes such as frames or layers into production-ready code, and it triggers whenever a task involves Figma URLs, node IDs, design-to-code implementation, or setting up and troubleshooting the Figma MCP server.

The required flow for every implementation

According to the skill definition, get_design_context must be called first for the exact target node or nodes to retrieve the structured representation of the design. If the response is too large or gets truncated, get_metadata follows to obtain a high-level node map, after which only the genuinely required node or nodes are re-fetched with get_design_context. Only then is get_screenshot called for a visual reference of the variant being implemented. Only once both design context and screenshot are available does the agent download any needed assets and start actual implementation, typically using React and Tailwind CSS, which is then translated into the target project's own conventions, styles, and framework. Finally, the result is validated against Figma for pixel-accurate visual and behavioral parity.

Handling assets and icon packages

According to the provider, the Figma MCP server exposes its own assets endpoint that serves image and SVG assets. If the server returns a localhost source for an image or SVG, that source should be used directly without creating placeholders, even if that feels unusual at first. Importing additional icon packages is explicitly forbidden, since all assets are expected to already be present in the Figma payload; anything that appears to be missing is more likely a sign of a skipped query step than a genuine gap that external libraries would need to fill.

Link-based usage and setup

The server operates on a link basis: you copy the link to a Figma frame or layer and hand that exact URL to the MCP client, which automatically extracts the node ID from it without browsing the page itself. For setup in Codex, the accompanying reference documentation registers the server as a streamable HTTP server with bearer-token authentication in the configuration file, with the token sourced from an environment variable and a region header kept consistent with your own Figma region. OAuth over streamable HTTP additionally requires enabling an RMCP client feature. After setting the environment variable and restarting the client, the connection can be tested by asking the agent to list the available Figma tools or run a simple test call.

Security and common pitfalls

The bearer token grants access to Figma content and should be treated like a secret accordingly: it should not end up in plaintext inside version-controlled configuration files, and it should not carry surrounding quotation marks when copied from Figma. Typical problems include a token not being picked up because the environment variable was set in the wrong shell, OAuth errors caused by a missing RMCP client activation, and an incorrectly set region header that causes network requests to fail.

Practical value and limitations

The value lies in design and code moving closer together: developers can generate a first working code version directly from a Figma link that already respects variables, spacing, and component structure, eliminating manual measuring of designs. The limitation is that, according to the skill itself, the generated React and Tailwind output is only a representation of design and behavior, not final code style; it must be actively adapted to existing project conventions, design-system tokens, and components, and without a properly configured, authenticated MCP server the entire automation remains inert.