Figma Implement Design skill review: verdict, safety and alternatives

Figma Implement Design is OpenAI's curated skill that turns a Figma frame into code through the Figma MCP server. We rate it Conditional, 59/100. The workflow is sound, but the repository is deprecated and Figma now ships figma-design-to-code instead. We reviewed commit 49f948f on 2026-09-30.

Get the skill: figma-implement-design folder on GitHub · SKILL.md at the reviewed commit · skills.sh listing

What is the Figma Implement Design skill?

The Figma Implement Design skill is OpenAI's curated skill for turning a Figma frame into code. It pulls the node through the Figma MCP server, rebuilds it with your components, then checks a screenshot.

An Agent Skill is a folder with a SKILL.md file. An AI agent loads it when a task matches. Our page on Agent Skills basics covers the format. This one is instruction-only: Markdown, no scripts. It depends on the Figma MCP server, a connector that lets an agent read Figma files. MCP stands for Model Context Protocol.

The job is narrow. You give the agent a Figma link, and it builds that node as production code in your repository. The skill tells the agent to reuse your existing components and tokens instead of pasting generated code. Its users are front-end developers in Codex, OpenAI's coding agent, or another agent that can call MCP tools.

Three groups fit poorly. The first is anyone installing the Codex Figma plugin, which ships figma-design-to-code. The second is teams without a stable Figma MCP login, since every step needs get_design_context. The third is work that needs proven pixel parity without a rendered comparison tool such as Playwright.

The licence entry carries a conflict. GitHub's API reports no licence for the repository. The folder's LICENSE.txt points to Figma Developer Terms and labels the materials Beta.

Is Figma Implement Design one of Figma's official skills?

No, not any more. Figma's official skills for MCP list figma-use, figma-code-workflows and nine others, and Figma's repository ships figma-design-to-code. Figma Implement Design survives as OpenAI's frozen copy in a deprecated repository.

Figma's Help Center page on Figma skills for MCP listed 9 skills and 2 examples on 2026-10-21. None of them is figma-implement-design. Figma names Claude Code, Codex and Cursor as supported clients. A skill tells the agent how to work, while the MCP server supplies the Figma data. Our guide on how skills and MCP servers differ explains the split.

Figma's GitHub repository, figma/mcp-server-guide, holds more folders than the Help Center lists. They include figma-design-to-code, figma-implement-motion, figma-shaders, figma-generative-plugins and figma-use-motion. Directory sites still list "figma-implement-design" under Figma, but Figma's current repository has no folder by that name.

Is the Figma Implement Design skill worth installing?

No, unless you cannot use Figma's plugin. The Figma Implement Design skill scores 59/100, Conditional, at Moderate confidence. Its MCP calls are current, but its repository is deprecated and frozen.

The workflow is sensible and still matches the live Figma MCP server. Tessl, a skills registry, scored it 87/100 in a static review of the reviewed commit. It flagged padded sections. Provenance holds the score down. OpenAI deprecated openai/skills in June 2026. The Codex Figma plugin dropped this skill in 2026-05 for figma-design-to-code. That successor handles remote asset URLs and Code Connect hints, which map Figma components to code. This copy lacks both.

Our page on how verdict scores work lists the weights and caps.

No side-by-side run on real Figma frames exists yet. Such a run would measure rendered parity and false completions for this copy against figma-design-to-code. We found no published benchmark. Compare it with frontend design skills ranked by verdict before you choose.

What changed since our review?

Since our review, the skill itself has not changed. Figma published skills v2.2.163 on 19 October 2026, and Claude's official marketplace now offers Figma's plugin. That plugin ships figma-design-to-code instead.

• Skill folder: unchanged since 2026-03-25 (736f600, a licence alignment commit).
• openai/skills: still deprecated on 2026-10-21; the README opens "This repository is deprecated."
• figma/mcp-server-guide: added figma-spec and figma-code-workflows on 2026-10-15.
• Figma skills release: v2.2.163 on 2026-10-19, with Antigravity plugin support.
• Claude marketplace: Anthropic's official list carries a figma plugin pinned to f278942.
• openai/plugins: the Figma plugin was last synced on 2026-08-26.

None of these changes touches the reviewed folder, so the verdict stays Conditional.

How many tokens does the Figma Implement Design skill use?

The Figma Implement Design skill measures about 2,905 tokens per load. Our estimate for one component or screen section is 40,000 input and 6,000 output tokens. Large Figma nodes use more.

Three hidden costs sit outside the table. The skill asks for a separate get_screenshot call, although get_design_context now returns one by default. Every run needs a Figma seat with MCP access. Parity mistakes cost manual review rounds, as codex #45005 shows.

Is the Figma Implement Design skill safe to install?

Yes, with an account caveat: the Figma Implement Design skill carries safety grade C. It has no scripts, but every run needs OAuth to your Figma account. It writes code and downloads assets.

The grade reflects account access, not hidden code. Our guide to vetting skills that need account access explains how account access affects a grade. Our review of the files at commit 49f948f found these facts:

• No executable code: no scripts, hooks, env vars or network calls sit in the folder.
• Declared dependency: agents/openai.yaml names the figma MCP over streamable_http at mcp.figma.com/mcp.
• Credentials: the MCP client holds the Figma OAuth token, not the skill.
• Writes: the agent writes code into your repo and downloads image and icon assets.
• Tool names: they match the live Figma MCP schema checked on 2026-10-02.
• Untrusted input: the skill gives no guidance on treating design text or annotations as untrusted.

Three skills.sh audits, from Gen Agent Trust Hub, Socket and Snyk, all report Pass. The open gap is prompt injection through design text. A shared Figma file can carry annotations that the agent reads as instructions.

What does the community report about Figma Implement Design?

The community reports Figma connection trouble more than trouble with Figma Implement Design itself. Codex users filed MCP timeouts, OAuth failures and missing tools. Issue #45005 shows the agent claiming parity it had not checked.

Of these 13 reports, 9 are strong. Seven of the 13 are Codex host bugs, not faults in the skill's instructions.

One directory page contradicts the repository. It shows 4 contributors, while GitHub reports 35. It lists an MIT licence, while LICENSE.txt defers to Figma Developer Terms. It never mentions the deprecation or the plugin swap. Its "pixel-perfect accuracy" line is a publisher claim with no measured result.

What are the Figma Implement Design skill's known failures?

The Figma Implement Design skill has three known failures at commit 49f948f. It assumes localhost assets while remote URLs expire in about 7 days. It omits Code Connect hints and has no rendered-parity check.

The worst failure is a false finish. The agent declares the UI done and matching Figma while icons, spacing or assets still differ. Broken asset links are the second form.

1. Stale asset rule. The skill tells agents to use localhost sources from the desktop server. The remote server returns download URLs that expire in about 7 days.
2. No Code Connect priority. The skill ignores Code Connect hints, which map Figma components to your code. The successor reads them.
3. No rendered-parity check. The skill checks a screenshot list but never renders the built UI to compare. In #45005, Codex repeatedly claimed parity it had not reached.
4. Conflicting rules. Fidelity-first and design-system-first instructions partly contradict each other.
5. Host bugs. Codex issues #16718, #23804, #33587, #48642 and #20142 block Figma reads before the skill starts.

A separate comparison tool such as Playwright closes the parity gap. Without one, treat every "matches Figma" claim as unverified.

Does Figma Implement Design work in Claude Code, Codex and Cursor?

Yes in Codex, where public evidence verifies it in Desktop and CLI. Claude Code and Cursor can call the same Figma MCP tools, but no run there is documented. Its openai.yaml metadata is Codex-specific.

The tool calls use generic Figma MCP names, so any MCP client sees the same tools. Only the agents/openai.yaml manifest ties the skill to Codex. The model matters too. In #33587, get_design_context was missing in Desktop threads on gpt-5.6-sol and worked on gpt-5.5. For other picks, see Claude Code skills we rate.

How do you install the Figma Implement Design skill?

In Codex, install the Figma Implement Design skill with $skill-installer, then restart Codex. Connect the Figma MCP server through OAuth. For Claude Code, copy the folder into ~/.claude/skills/; that path is untested.

The skill install is trivial. The Figma connection is the hard part, which is why setup friction scores 52.

How do you install it in Codex?

The openai/skills README documents installing curated skills by name. We list that route as documented and untested after the deprecation. The folder was still present at main on 2026-10-21.

1. Run the installer inside Codex:

$skill-installer figma-implement-design

1. Restart Codex so it loads the new skill.
2. Connect the Figma MCP server and finish the OAuth login.
3. Check that get_design_context appears in the thread's tool list.

The skills CLI gives a second route:

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

OAuth fails with invalid_redirect_uri for some Codex CLI users (#23804). Others saw the Figma plugin as App Unavailable in Codex Desktop (#19158).

How do you install it in Claude Code?

No documented run exists in Claude Code. Copy the figma-implement-design folder into ~/.claude/skills/. Then add the Figma MCP server to Claude Code. Our Claude Code skills install guide covers folder paths and reloads.

Figma's own plugin is the maintained route. Anthropic's official Claude plugin marketplace lists it as figma:

/plugin install figma@claude-plugins-official

That plugin comes from figma/mcp-server-guide and ships figma-design-to-code, not this skill.

How do you implement a Figma design with the skill?

Implement a Figma design by pasting a frame or component link into the agent. The skill calls get_design_context and takes a screenshot. Then it rebuilds the design with your existing components and tokens.

The SKILL.md workflow runs in seven steps:

1. Parse the file key and node ID from the Figma link.
2. Call get_design_context for the node's design context and reference code.
3. Fetch get_metadata and child nodes when the output is truncated.
4. Capture the node with get_screenshot.
5. Download the image and icon assets the server returns.
6. Rebuild the design with your project's components and tokens.
7. Compare the result against the screenshot before calling it done.

The reference code arrives as React and Tailwind. The skill treats it as a guide, not as code to paste. That rule keeps duplicate components and hardcoded values out of your repo.

The skill serves four use cases:

• Single component: build a button or card from a node link (primary, weekly).
• Full page: split a large frame or dashboard into child nodes (primary, monthly).
• Token mapping: map Figma tokens onto an existing design system (secondary).
• Desktop selection: implement the selected node without a URL (claimed only, by the publisher).

Test it yourself. Point the agent at one small Figma component in a repo with a design system. Then compare the rendered result and asset sources against the Figma screenshot.

What are the alternatives to Figma Implement Design?

The main alternative to Figma Implement Design is figma-design-to-code, the maintained skill in Figma's plugin. OpenAI's Figma skill scores 58 for a similar job. Our design hub ranks reviewed UI skills.

Pick figma-design-to-code when you want the Figma route on a maintained line. Pick Frontend Design when you have no Figma file. Keep this copy only when your setup pins openai/skills and the plugin is unavailable to you. Browse all design skills for the full ranking.

Where is the Figma Implement Design skill on GitHub?

The Figma Implement Design skill is on GitHub in openai/skills under skills/.curated/figma-implement-design/. We reviewed commit 49f948f. OpenAI deprecated the repository in June 2026, and the folder last changed in March.

• Repository: openai/skills, folder skills/.curated/figma-implement-design.
• Reviewed commit: 49f948f, dated 2026-06-23, reviewed on 2026-09-30.
• Last folder change: 736f600 on 2026-03-25.
• Deprecation: commit 778b0e6 (#496) in June 2026.
• Popularity: 27,849 stars at review and 28,190 on 2026-10-21, with 35 contributors.
• Copies: 255 exact copies of the folder exist elsewhere.

Common questions

Can Claude understand Figma designs?

Yes, through the Figma MCP server, which returns design context and screenshots. Figma lists Claude Code, Codex and Cursor as clients.

How do you use a Figma design system in Claude?

Connect the Figma MCP server first. This skill tells the agent to reuse your components and tokens, and Figma's figma-generate-library builds libraries.

Is Figma Implement Design free?

Yes, the skill is free to install. Figma MCP access needs a Figma seat, and some Figma skills need a Full seat or a Professional plan.

Is the tech-leads-club "figma-implement-design" the same skill?

It is a copy hosted in another repository, tech-leads-club/agent-skills. Skills.rest marks it "OFFICIAL", but we reviewed OpenAI's curated folder.

Can you build your own Figma design-system skill?

Yes. Our guide shows how to build your own design-system skill with a SKILL.md file.

Is it an official Figma skill?

It is OpenAI's Figma partner skill under Figma Developer Terms (Beta). Figma's current skill set no longer includes it.