Figma Design-to-Code Assistant
Fetch Figma design context and turn selected nodes into production code.
The skill imposes a defined fetch-context/fetch-screenshot flow and discourages unnecessary packages and placeholders, providing some scope control. However, it depends on a remote Figma MCP with bearer-token authentication, gives limited data-flow, permission, sensitive-design handling, revocation, or rollback disclosure, and recommends echoing the token, creating credential-exposure risk; points are deducted accordingly.
The get_design_context → optional get_metadata → get_screenshot → asset retrieval → implementation → validation flow is reasonably consistent and includes truncation, timeout, and OAuth troubleshooting notes. There is no committed test suite, CI evidence, reproducible output, or comprehensive handling for invalid links, authorization failures, and unavailable assets, so the static score remains conservative.
Trigger conditions and intended scenarios are fairly clear, covering design-to-code work, variables, screenshots, and setup troubleshooting. Non-fit boundaries, input/output contracts, and Chinese-language guidance are not defined, and the core function depends on an overseas Figma MCP that may be difficult to reach or use from mainland China; points are deducted.
The skill has a readable structure with a main document, configuration reference, and tool/prompt reference, including setup, timeout, and troubleshooting notes. The supplied material does not establish a skill-specific license, versioning policy, changelog, maintenance owner, or update path, and examples are limited, so points are deducted.
When the MCP is reachable and the user supplies the correct Figma node link, the prescribed context, screenshot, asset, and design-system workflow can plausibly support production-code implementation and reduce manual reconstruction. No representative output, execution validation, or comparative-benefit evidence is supplied, and project-level implementation and visual review remain necessary; the score reflects the static ceiling.
The supplied skill, configuration, and tool-reference files provide auditable textual evidence for the key workflow, tool names, and configuration requirements. They contain no committed tests, CI results, third-party execution evidence, or independent reproduction record, so verifiability is limited.
- Do not follow the suggestion to echo FIGMA_OAUTH_TOKEN; avoid exposing credentials in terminal logs and document least privilege, revocation, and rotation procedures.
- Core functionality depends on the remote Figma MCP, OAuth, and regional network configuration; it may be unusable from mainland-China networks or without Figma access.
- Before implementation, confirm organization permissions and data-handling boundaries for Figma files, plus manual fallback and code-rollback procedures for failures.
What it does & when to use it
This skill supports Figma-driven implementation through the Figma MCP server. It fetches structured node context, screenshots, variables, and assets, then translates selected Figma nodes into production code. Its required workflow obtains design context and a screenshot before downloading assets or starting implementation, followed by validation against Figma. It is a fit for teams implementing frontend work from Figma, provided a Figma MCP server is configured.
Accepts Figma URLs or node IDs; calls Figma MCP to retrieve structured context for exact nodes; uses metadata first when a response is too large, then re-fetches only the required nodes; obtains screenshots; downloads required image or SVG assets; adapts the usual React and Tailwind output to the project's framework, components, styles, routing, state, and data-fetch patterns; validates the resulting interface against the Figma reference.
- A frontend developer receives a Figma frame or component link and needs to implement it in production.
- A design-systems team needs to map Figma output to existing color, typography, spacing, and component tokens.
- An engineer needs visual references and exact assets for a specific Figma variant before building its UI.
- A team needs to troubleshoot Figma MCP environment variables, configuration, or verification.
Pros & cons
- Defines a complete flow from design context and screenshots through asset handling and validation.
- Encourages reuse of existing project components, color systems, typography, and spacing tokens.
- Explicitly covers Figma URLs, node IDs, screenshots, variables, and design assets.
- Requires a Figma MCP server; the supplied material does not include its full configuration, environment variables, or troubleshooting details.
- It does not specify supported frontend frameworks, test suites, or automated validation methods.
- The README marks the openai/skills repository as deprecated.
How to install
The skill is located at skills/.curated/figma/ in openai/skills. In Codex, run: $skill-installer figma. Restart Codex after installation so it can load the skill. The README marks the repository as deprecated and directs users to the OpenAI Plugins repository for current Codex skill and plugin examples; detailed configuration steps are not included in the supplied material.
How to use
Provide a link to the exact Figma node or variant, or provide its node ID, with a request such as: “Implement this Figma node with Figma MCP using the project's existing components and design tokens.” The required sequence is get_design_context, then get_screenshot, followed by asset downloads and implementation, with final validation against Figma.
Compared to similar skills
The README identifies the OpenAI Plugins repository as the current reference for Codex skill and plugin examples, but the supplied material does not directly compare the two repositories' Figma implementation capabilities.