Figma Implement Design

Reviewed 2026-10-14codingPrompt / Rule# figma # design-to-code # frontend # mcp # codex

Figma's implement-design skill for Codex: turns Figma frames into production code with 1:1 visual fidelity through the Figma MCP server.

Security Reviewed

Instruction-only Figma workflow with no scripts; it reads designs through your Figma MCP connection and is governed by Figma's Developer Terms.

Install Figma Implement Design in Google Antigravity

Antigravity loads skills from .agents/skills/ in your project or ~/.gemini/config/skills/ for all projects (official docs). Full guide

EasiestOption 1: paste this to your Antigravity agent

Install the "Figma Implement Design" skill for Google Antigravity.
Follow the steps at https://www.antigravityskills.org/install/figma-implement-design.md (source: https://github.com/openai/skills/tree/main/skills/.curated/figma-implement-design).
Before running anything, show me what you will download and whether it includes scripts, and wait for my OK.
Install it into this project (.agents/skills/) unless I say global. When done, check that Antigravity lists it as an installed skill.

The agent reads the install file, shows you what it will download and waits for your OK.

Option 2: install it yourself

1. Clone the source repository
```
git clone --depth 1 https://github.com/openai/skills /tmp/openai-skills
```
Download the repository that contains the skill into a temporary folder.
2. Copy the skill into your workspace
```
mkdir -p .agents/skills && cp -r /tmp/openai-skills/skills/.curated/figma-implement-design .agents/skills/
```
Run this from your project root. Antigravity then reads the skill from .agents/skills/figma-implement-design/.
3. Or install it globally
```
mkdir -p ~/.gemini/config/skills && cp -r /tmp/openai-skills/skills/.curated/figma-implement-design ~/.gemini/config/skills/
```
Use this instead of the previous step to make the skill available in every workspace (~/.gemini/config/skills/figma-implement-design/).
4. Check that Antigravity sees it
Start a new Antigravity conversation and ask "What skills do you have?" (in the Antigravity CLI you can also run /skills).

You also need the Figma MCP server connected in Antigravity and access to the Figma file. The skill links to sibling Figma skills (figma-use, figma-generate-design, figma-code-connect-components, figma-create-design-system-rules) in the same .curated folder; copy those too if you want those handoffs to work.

Using Claude Code, Cursor or Codex? See other assistants below.

What is Figma Implement Design?

figma-implement-design is a curated skill in OpenAI's openai/skills repository that gives the agent a seven-step workflow for translating Figma designs into production code with 1:1 visual fidelity. It relies on the Figma MCP server (get_design_context, get_metadata, get_screenshot) and tells the agent to map Figma output onto the project's own components and design tokens. Its license file says use is governed by the Figma Developer Terms and that the materials are a Beta feature. Figma's own repository (figma/mcp-server-guide) removed its figma-implement-design skill on 2026-05-13 and now ships a figma-design-to-code skill for this job.

How to use Figma Implement Design?

Connect the Figma MCP server, install the skill, then give the agent a Figma frame URL (https://figma.com/design/:fileKey/:fileName?node-id=1-2) or, with the desktop MCP, select a node in the Figma app. The agent fetches design context and a screenshot, downloads assets, implements the UI in your project's conventions and validates it against the screenshot.

Key features of Figma Implement Design

✓We counted at 49f948f: 6 files, 15,974 bytes: SKILL.md (11,621 bytes, 258 lines), agents/openai.yaml, LICENSE.txt, and three icon assets (figma.png, figma-small.svg, icon.svg)
✓We counted: a required 7-step workflow (node ID, design context, screenshot, assets, translate, parity, validate), a 7-item validation checklist, 2 worked examples and 4 common-issue fixes
✓Uses 3 Figma MCP tools by name: get_design_context, get_screenshot and, for large frames, get_metadata
✓Parses the file key and node ID from a Figma design URL; with the figma-desktop MCP it can use the node you have selected instead (SKILL.md: the remote server needs a link to a frame or layer)
✓Asset rule: use the localhost image or SVG sources the MCP server returns; do not add icon packages or placeholders
✓Hands off to 4 sibling Figma skills for other jobs: figma-use, figma-generate-design, figma-code-connect-components and figma-create-design-system-rules (links point inside the same .curated folder)

When to use Figma Implement Design

1Implement a Figma component in an existing design system
2Build a full page or dashboard from a Figma frame
3Check an implementation against the Figma screenshot
4Map Figma variables to project design tokens

Installation & Setup Guide

Agent Rules / Prompt Setup

Follow these steps (taken from the project's own docs) to configure Figma Implement Design in your development environment.

Step 1: Claude Code (manual)claude

git clone --depth 1 https://github.com/openai/skills /tmp/openai-skills && mkdir -p ~/.claude/skills && cp -r /tmp/openai-skills/skills/.curated/figma-implement-design ~/.claude/skills/

Not documented in openai/skills for Claude Code; Claude Code reads personal skills from ~/.claude/skills/. Figma's own README documents `claude plugin install figma@claude-plugins-official` for its current Figma skills, which use figma-design-to-code instead.

Step 2: Cursorcursor

Not documented by openai/skills for this skill. Figma's documentation covers its MCP server separately.

Usage Example & Verification

Prompt / Request Example

1) SKILL.md example 1: "Implement this Figma button component: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15"
-> The agent parses fileKey and nodeId, calls get_design_context and get_screenshot, checks whether the project already has a button, extends it or creates one, and compares the result with the screenshot.

2) SKILL.md example 2: "Build this dashboard: https://figma.com/design/pR8mNv5KqXzGwY2JtCfL4D/Dashboard?node-id=10-5"
-> It starts with get_metadata to see the page structure, fetches each major section separately, then builds the layout from the project's own primitives.

3) agents/openai.yaml default prompt: "Use $figma-implement-design to implement this Figma design in this codebase, matching layout, states, and responsive behavior."

Security Review

Static review

Reviewed Date

2026-10-14

Audited Ref / Commit

49f948faa9258a0c61caceaf225e179651397431

Reviewer

antigravityskills.org (static code review)

Instruction-only Figma workflow with no scripts; it reads designs through your Figma MCP connection and is governed by Figma's Developer Terms.

Full review: scope, findings, risks

Audit Scope:skills/.curated/figma-implement-design (SKILL.md, agents/openai.yaml, LICENSE.txt, assets) and README.md of openai/skills at 49f948f (2026-06-23; folder last changed 736f600, 2026-03-25); history and README of figma/mcp-server-guide at f049329 (2026-10-05).

Key Findings:Instruction-only skill that drives Figma MCP tools (get_design_context, get_metadata, get_screenshot) and downloads assets from the MCP server's localhost endpoint. No scripts in this folder. agents/openai.yaml declares a dependency on the Figma MCP server at https://mcp.figma.com/mcp (streamable HTTP).

Identified Operational Risks & Permissions:Low. Reads Figma files through the user's MCP connection; licensed under Figma Developer Terms (not open source) and marked Beta; hosted in a deprecated repository.

skills/.curated/figma-implement-design contains SKILL.md, agents/openai.yaml, LICENSE.txt and icon assets (figma.png, figma-small.svg, icon.svg). SKILL.md tells the agent to call Figma MCP tools and to use localhost asset URLs returned by the Figma MCP server without adding icon packages. agents/openai.yaml sets Codex display metadata and lists the Figma MCP server (https://mcp.figma.com/mcp) as a tool dependency. There are no scripts, shell commands or API keys in the folder; access is whatever your Figma MCP connection grants. LICENSE.txt states use is governed by the Figma Developer Terms and that the materials are Beta and may be changed or discontinued.

Operational Notes & Known Limitations

Known Limitations

•Requires the Figma MCP server (agents/openai.yaml lists https://mcp.figma.com/mcp) and access to the Figma file
•Governed by the Figma Developer Terms; offered as Beta and may change or be discontinued (LICENSE.txt)
•openai/skills is marked deprecated in its README; Figma's own repo has replaced this skill with figma-design-to-code
•Selection-based prompting only works with the figma-desktop MCP; the remote server needs a frame or layer link

Frequently Asked Questions

What is the Figma implement design skill?

It is a skill that walks an AI agent through implementing a Figma design as production code: get the node ID, fetch design context and a screenshot through the Figma MCP server, download assets, translate to the project's conventions, and validate for 1:1 visual parity.

Where is the official figma-implement-design SKILL.md?

It is in OpenAI's openai/skills repository at skills/.curated/figma-implement-design. Figma's own repository, figma/mcp-server-guide, removed its figma-implement-design skill on 2026-05-13 and now ships figma-design-to-code.

How do I install Figma Implement Design in Antigravity?

Clone github.com/openai/skills and copy skills/.curated/figma-implement-design into your project's .agents/skills/ folder or into ~/.gemini/config/skills/. Connect the Figma MCP server, then ask "What skills do you have?" (Antigravity CLI: /skills) to check that the skill loaded.

Is the Figma Implement Design skill safe?

The folder has no executable code: SKILL.md, agents/openai.yaml, a license file and icon assets. The agent will call the Figma MCP server and download design assets from its localhost endpoint, so it can read Figma files your account can access. Use is governed by the Figma Developer Terms.

Does it need a Figma account or API key?

It needs the Figma MCP server connected and a Figma file you can access; agents/openai.yaml declares the remote server at https://mcp.figma.com/mcp, and the desktop variant works with the Figma desktop app.

Supported Platforms

antigravityclaudecodex

View Source on GitHub

Keep exploring this topic

Browse the full Antigravity skills directory for more source-linked skills with install steps and static safety reviews.

More coding skills #figma #design-to-code #frontend #mcp Use cases

Related Skills

💻

Web Design Guidelines

@vercel-labs

Vercel's review skill: fetches Vercel's Web Interface Guidelines at run time, checks the files you name and lists violations as file:line findings.

Tested in AntigravityStatic reviewnetwork accessinstructions only

ui-reviewaccessibility

💻

Frontend Design (Anthropic)

@anthropics

Anthropic's official frontend-design skill: guidance for distinctive, intentional UI design, typography and copy that avoids templated AI defaults.

Tested in AntigravityStatic reviewinstructions onlyoffline

frontenddesign

🎨

UI/UX Pro Max

@nextlevelbuilder

Comprehensive UI/UX design intelligence skill for AI coding assistants. Injects structured design tokens, color theory, typography scales, accessibility guidelines, and component patterns into Claude Code, Cursor, and Windsurf.

Tested in AntigravityStatic reviewinstalls packagesnetwork accesswrites files

mediaui