What does this skill do, and when should you 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.
How do you install this skill?
- 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.
- Network access
- Local filesystem
- MCP Server
Figma MCP server
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.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/openai/skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/.curated/figma" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- Implement this Figma node with Figma MCP using the project's existing components and design tokens.
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.
What are this skill's strengths and limitations?
- 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 does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Figma Design-to-Code Assistant this page ✓ OpenAI · Official | 49 · Use with care | ★ 28k | 4mo ago | — |
| Figma Code Connect Mapper ✓ OpenAI · Official | 54 · Use with care | ★ 28k | 4mo ago | — |
| Figma Design Implementer ✓ OpenAI · Official | 53 · Use with care | ★ 28k | 4mo ago | — |
| Figma Design System Rules Builder ✓ OpenAI · Official | 50 · Use with care | ★ 28k | 4mo ago | — |
| Frontend Design Review ✓ Microsoft · Official | 51 · Use with care | ★ 2.7k | 3mo ago | MIT |
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.
How did FollowSkills review this skill?
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.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →