figma

Savant verdict: Review advised

SkillSpector or the source hub flagged patterns to review before use.

Live evaluation

1 pass · 1 investigate · 5 fail across 7 cases. Jev accepted 7 of 14 LLM-drafted cases. Drafted and run by nvidia/nemotron-3-super-120b-a12b, validated and scored by jev-latest.

• Implement the primary button from the Figma design at https://www.figma.com/file/abc123/Button-Design?node-id=101%3A202 using the project's design system.positive case · fail
• Convert the navigation menu variant labeled 'Header-LoggedIn' from the Figma file at https://www.figma.com/file/xyz789/Navigation-System?node-id=50%3A150 into reusable React components using our existing UI library.positive case · investigate
• Build the user profile card from the Figma frame at https://www.figma.com/file/profile456/User-Profile?node-id=5%:300 using the project's styling and asset handling rules.positive case · fail
• Implement the Figma design at https://www.figma.com/file/design123?node-id=10%3A20 but I'm not sure if it's a button or a badge.edge case · fail
• Make the login form from the Figma file look like the one in the screenshot I'll describe: blue background, rounded inputs, and a submit button.edge case · pass
• Explain how to use Figma's auto-layout feature to resize components dynamically.negative case · fail
• What are the best practices for naming layers and organizing frames in a Figma file for developer handoff?negative case · fail

Safety (NVIDIA SkillSpector)

2 patterns found

• Agent Snooping: ~/.codex/config.tomlhigh · references/figma-mcp-config.md:3 · Skill reads from agent configuration directories (.claude/, .codex/, .gemini/). These directories may contain API keys, personal settings, and other credentials that the skill has no legitimate need to access.
• Agent Snooping: ~/.codex/config.tomlhigh · references/figma-mcp-config.md:24 · Skill reads from agent configuration directories (.claude/, .codex/, .gemini/). These directories may contain API keys, personal settings, and other credentials that the skill has no legitimate need to access.

SKILL.md

---
name: figma
description: 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.
---

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