AutoGineer
Generated banner for Figma
Generated logo for Figma

Figma

JetBrainsOfficialCreated by OpenAIDistributed by JetBrains

  • Skill
  • Tool integration
  • Software development
  • Apache-2.0
  • No issues found
Download ZIP

From the author

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.
— the description by OpenAI

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The Figma MCP skill provides a structured approach to bridging the gap between design and production code. By leveraging the Figma MCP server, developers can fetch design context, visual screenshots, and variable definitions directly from Figma links. The skill mandates a specific workflow to ensure that generated code adheres to project-specific design systems, component libraries, and styling conventions rather than relying solely on default outputs.

What it does

  • Fetches structured design data and node metadata from Figma links
  • Generates visual references for design-to-code implementation
  • Retrieves variable definitions for colors, spacing, and typography
  • Maps Figma nodes to existing project components
  • Provides configuration and troubleshooting steps for the Figma MCP server

When to use it

  • When implementing UI components based on Figma designs
  • When you need to extract design tokens or variables from a Figma file
  • When verifying visual parity between implemented code and design mocks
  • When setting up or debugging the Figma MCP server connection

Advantages

  • Ensures 1:1 visual parity with design files
  • Promotes reuse of existing project components and design tokens
  • Standardizes the design-to-code process through a required multi-step workflow
  • Reduces manual effort in translating design properties to code

Usage examples

“Implement the design from this Figma link using our existing button and input components.”
The agent will fetch the design context and screenshot, then generate code that integrates your local component library with the design specifications.
“What color and spacing variables are used in this Figma selection?”
The agent will query the Figma MCP server to return the specific design tokens used in the selected node.
“Map this Figma node to my existing Button component.”
The agent will update the code connect map to associate the Figma node ID with your specified local component.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/jetbrains/figma/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip figma.zip -d .agents/skills

Documentation by OpenAI

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.

Files

references/figma-tools-and-prompts.md

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.

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs an MCP server, Needs Node.js

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
OpenAI
Publisher
JetBrains (Official)
Distributed by
JetBrains
Source
JetBrains/skills · figma · commit 3f53782
Licence
Apache License 2.0 (redistribution allowed)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by OpenAI or JetBrains.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download figma.zip