playbooks

home / skills / openai / skills / figma

figma skill

/skills/.curated/figma

This skill uses the Figma MCP server to fetch design context, screenshots, assets, and translate nodes into production code.

npx playbooks add skill openai/skills --skill figma

Review the files below or copy the command above to add this skill to your agents.

Files (8)
SKILL.md
3.1 KB
---
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.

Overview

This skill integrates with a Figma MCP server to fetch design context, screenshots, assets, and to translate Figma nodes into production-ready code. It’s built for tasks that involve Figma URLs, node IDs, design-to-code implementation, or MCP setup and troubleshooting. Use it to extract precise node data, download provided assets, and generate implementation guidance aligned with project conventions.

How this skill works

First, the skill retrieves a structured representation of the exact Figma node(s) using get_design_context. If responses are truncated, it fetches a high-level node map with get_metadata and then re-requests only needed nodes. It also captures visual references with get_screenshot and downloads assets from the MCP assets endpoint. Finally, it generates suggested React + Tailwind code and concrete instructions to convert that output into the project’s preferred tokens, components, and frameworks.

When to use it

  • When a task includes any Figma URL or node ID and you need exact design context
  • When implementing UI from Figma and you need screenshots and assets for visual parity
  • When translating Figma output into project conventions (components, tokens, routing)
  • When debugging MCP setup, env vars, or link-based prompting
  • When you must validate implementation 1:1 against Figma visuals

Best practices

  • Always run get_design_context first; do not skip that step
  • If output is too large, use get_metadata to scope and re-fetch specific nodes
  • Call get_screenshot before starting implementation to keep a visual reference
  • Download assets from the MCP server; if a localhost source is returned use it directly
  • Map Tailwind output to the project’s design tokens and reuse existing components instead of adding new packages
  • Validate final UI against the Figma screenshot for both look and behavior

Example use cases

  • Implement a Figma frame as a responsive React component using existing design-system tokens
  • Extract and inline SVGs and images provided by MCP without adding new icon libraries
  • Troubleshoot MCP link-based access by verifying node IDs and re-fetching metadata to narrow scope
  • Convert a Figma variant set into component states and wire up routing/state according to repo patterns
  • Fetch a high-fidelity screenshot and design context to verify spacing and typography against the project scale

FAQ

What if get_design_context response is truncated?

Run get_metadata to get a high-level node map, then re-request only the specific node(s) with get_design_context.

Can I add new icon packages if icons are missing?

No. Use the assets returned by the MCP server; do not add new icon libraries or placeholders when a localhost source is provided.

Should I treat MCP React+Tailwind as final code?

No. Treat it as a representation. Replace Tailwind classes with project tokens and reuse existing components, aligning with routing and state patterns.