Figma

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.

28,426 stars 1,972 forksFrontend & DesignOfficial

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add openai/skills --skill figma
Manual install
git clone --depth 1 https://github.com/openai/skills.git /tmp/skills
mkdir -p ~/.claude/skills
cp -r /tmp/skills/skills/.curated/figma ~/.claude/skills/figma

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Figma MCP

Use the Figma MCP server for Figma-driven implementation. For setup and debugging details (env vars, config, verification), see `references/figma-mcp-config.md`.

## Figma MCP Integration Rules
These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

### Required flow (do not skip)
1. Run get_design_context first to fetch the structured representation for the exact node(s).
2. If the response is too large or truncated, run get_metadata to get the high-level node map and then re-fetch only the required node(s) with get_design_context.
3. Run get_screenshot for a visual reference of the node variant being implemented.
4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework. Reuse the project's color tokens, components, and typography wherever possible.
6. Validate against Figma for 1:1 look and behavior before marking complete.

### Implementation rules
- Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
- Replace Tailwind utility classes with the project's preferred utilities/design-system tokens when applicable.
- Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
Read the full skill on GitHub

Details

Skill name
figma
Repository
openai/skills
Path
skills/.curated/figma/SKILL.md
Repo updated
28 October 2026
Listed in
heilcheng/awesome-agent-skills, skillmatic-ai/awesome-agent-skills

FAQ

What does the Figma skill do?

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.

How do I install the Figma skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add openai/skills --skill figma. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Figma popular?

It lives in openai/skills, which has 28,426 GitHub stars and 1,972 forks, and is included in 2 curated skill lists.

Related skills

Cloudflare Deploy

28k

openai/skills

Deploy applications and infrastructure to Cloudflare using Workers, Pages, and related platform services. Use when the user asks to deploy, host, publish, or set up a project on Cloudflare.

DevOps & CloudIn 2 lists2k

Figma Implement Design

28k

openai/skills

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

Frontend & DesignIn 2 lists2k

Gh Address Comments

28k

openai/skills

Help address review/issue comments on the open GitHub PR for the current branch using gh CLI; verify gh auth first and prompt the user to authenticate if not logged in.

Git & Code ReviewIn 2 lists2k

Web Design Guidelines

33k

vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

Frontend & DesignIn 2 lists2.9k

Huashu Design

28k

alchaincyf/huashu-design

花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选（指定风格/品牌也不豁免），选定后才执行。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。

Frontend & Design3.1k

Vercel React View Transitions

33k

vercel-labs/agent-skills

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating bet

Frontend & DesignIn 2 lists2.9k

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.