---
id: sm-figma
name: "figma"
url: https://skills.yangsir.net/skill/sm-figma
author: openai
domain: design
tags: ["figma", "ui/ux-design", "prototyping", "design-collaboration", "vector-graphics"]
install_count: 2700
rating: 4.40 (56 reviews)
github: https://github.com/openai/skills
---

# figma

> 使用Figma MCP服务器进行Figma驱动的设计实现。，AI Agent Skill，提升工作效率和自动化能力

**Stats**: 2,700 installs · 4.4/5 (56 reviews)

## Before / After 对比

### Figma驱动的UI实现

## Readme

# figma

# 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)

- Run get_design_context first to fetch the structured representation for the exact node(s).

- 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.

- Run get_screenshot for a visual reference of the node variant being implemented.

- Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.

- 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.

- 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.

- Use the project's color system, typography scale, and spacing tokens consistently.

- Respect existing routing, state management, and data-fetch patterns already adopted in the repo.

- Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design-system tokens and adjust spacing or sizes minimally to match visuals.

- Validate the final UI against the Figma screenshot for both look and behavior.

### Asset handling

- The Figma MCP Server provides an assets endpoint which can serve image and SVG assets.

- IMPORTANT: If the Figma MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly.

- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload.

- IMPORTANT: do NOT use or create placeholders if a localhost source is provided.

### Link-based prompting

- The server is link-based: copy the Figma frame/layer link and give that URL to the MCP client when asking for implementation help.

- The client cannot browse the URL but extracts the node ID from the link; always ensure the link points to the exact node/variant you want.

## References

- `references/figma-mcp-config.md` — setup, verification, troubleshooting, and link-based usage reminders.

- `references/figma-tools-and-prompts.md` — tool catalog and prompt patterns for selecting frameworks/components and fetching metadata.

Weekly Installs762Repository[openai/skills](https://github.com/openai/skills)GitHub Stars14.5KFirst SeenFeb 2, 2026Security Audits[Gen Agent Trust HubFail](/openai/skills/figma/security/agent-trust-hub)[SocketPass](/openai/skills/figma/security/socket)[SnykWarn](/openai/skills/figma/security/snyk)Installed oncodex673gemini-cli640opencode636github-copilot616cursor589amp553

---
*Source: https://skills.yangsir.net/skill/sm-figma*
*Markdown mirror: https://skills.yangsir.net/api/skill/sm-figma/markdown*