skilld
All skills
openai avatar

/figma

@dad3072 official
by openaiopenai/skills28k stars
1,891

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.

Ask your Agent

Use this Skill: https://skilld.dev/gh/openai/skills/figma

This session only. Nothing lands on disk.

referencesfigma-tools-and-prompts.md

≈699 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Figma MCP tools and prompt patterns

Quick reference for the Figma MCP toolset, when to use each tool, and prompt examples to steer output toward your stack.

Core tools

  • get_design_context (Figma Design, Figma Make): Primary tool. Returns structured design data and default React + Tailwind code. Selection-based prompting works on desktop; the remote server uses a frame/layer link to extract the node ID.
  • get_variable_defs (Figma Design): Lists variables/styles (colors, spacing, typography) used in the selection. Useful to align with tokens.
  • get_metadata (Figma Design): Sparse XML outline of layer IDs/names/types/positions/sizes. Use before re-calling get_design_context on large nodes to avoid truncation.
  • get_screenshot (Figma Design, FigJam): Screenshot of the selection for visual fidelity checks.
  • get_figjam (FigJam): XML + screenshots for FigJam diagrams (architecture, flows).
  • create_design_system_rules (no file context): Generates a rule file with design-to-code guidance for your stack. Save it where the agent can read it.
  • get_code_connect_map (Figma Design): Returns mapping of Figma node IDs to code components (codeConnectSrc, codeConnectName). Use to reuse existing components.
  • add_code_connect_map (Figma Design): Adds/updates a mapping between a Figma node and a code component to improve reuse.
  • get_strategy_for_mapping (alpha, local only): Figma-prompted tool to decide mapping strategy for connecting a node to a code component.
  • send_get_strategy_response (alpha, local only): Sends the response after get_strategy_for_mapping.
  • whoami (remote only): Returns the authenticated Figma user identity (email, plans, seat types).

Prompt patterns (design context)

  • Change framework: “generate my Figma selection in Vue” or “in plain HTML + CSS” or “for iOS”.
  • Use my components: “generate my Figma selection using components from src/components/ui”.
  • Combine: “generate my Figma selection using components from src/ui and style with Tailwind”.
  • Note: On the remote server, selection-based prompting requires a frame/layer link; the server extracts the node ID from the URL.

Prompt patterns (variables/styles)

  • “get the variables used in my Figma selection”
  • “what color and spacing variables are used in my Figma selection?”
  • “list the variable names and their values used in my Figma selection”

Prompt patterns (code connect)

  • “show the code connect map for this selection”
  • “map this node to src/components/ui/Button.tsx with name Button”

Best-practice flow reminder

Use get_design_context → (optionally get_metadata for large nodes) → get_screenshot, and keep project rules from SKILL.md in mind when applying the generated output.

Source: SKILL.md on GitHub

Third-party checks

2 warnings17d5 checks · Risk SAFE
  • Gen Agent Trust Hub17d

    This skill facilitates integration with Figma to assist with design-to-code workflows. It includes some standard security considerations such as interaction with an external service and guidance on environment variable configuration, which are consistent with its intended use as a developer tool.

  • Socket17d

    No alerts

  • Snyk17d

    Risk: MEDIUM · 1 issue

  • Runlayer7mo

    5/5 files flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at dad3072. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 months ago.

Activeupdated 8 months ago

Topics

README badge

README badge for openai/skills/figma

What it does

Fetches design context, screenshots, variables, and assets from Figma using the MCP server, then translates Figma nodes into production code while respecting the project's design system tokens and component conventions. Requires the Figma MCP server setup and is triggered by Figma URLs, node IDs, or design-to-code tasks.

Generated from the current SKILL.md.

Frequently asked

What Figma MCP tools does this skill use?
The skill uses get_design_context to fetch structured node data, get_metadata for high-level node maps, get_screenshot for visual references, and an assets endpoint to serve images and SVGs directly from Figma.
Do I need to set up environment variables or config to use this skill?
Yes. See references/figma-mcp-config.md for setup instructions, environment variables, and verification steps.
Can I use Figma design tokens and colors directly in my code?
The skill translates Figma output to React + Tailwind but requires you to replace those utilities with your project's design-system tokens, color system, and typography scale instead of using Figma's raw values.
What should I do if Figma assets are served as localhost URLs?
Use the localhost source directly in your code. Do not create placeholders, import new icon packages, or fetch from elsewhere — the MCP server is providing the asset for you.
Do I need to paste Figma links or node IDs to use this skill?
Yes. The skill is link-based: copy the exact Figma frame or layer link pointing to the node you want implemented and provide that URL to the MCP client.

Generated from the current SKILL.md. These answers refresh after source changes.