New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Official agent skill

Figma

by JetBrains in JetBrains/skills

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code.

OfficialApache-2.0Auto-check passedFrontend & Design

Install Figma

skills CLI
$ npx skills add JetBrains/skills --skill figma -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install JetBrains/skills figma --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/JetBrains/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/figma .claude/skills/figma && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
figma
GitHub stars
366
Used in
5 other repos
Token cost
~833 tokens
SKILL.md length
401 words
Files
8 (incl. references, assets)
Skills in repo
76
Repo updated
First seen
Licence
Apache-2.0

At a glance

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code.

  • Works in 6 steps: Run get_design_context first to fetch… → If the response is too large or… → Run get_screenshot for a visual… → …
  • A task involves Figma URLs
  • SKILL.md covers Figma MCP Integration Rules and References
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Figma is an agent skill from JetBrains/skills, published by the product's own GitHub organization. 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.

Its SKILL.md is about 830 tokens, which your agent loads only when the skill is triggered. The skill folder holds 10 other files, including reference files and assets (for example `agents/openai.yaml`, `references/figma-mcp-config.md` and `references/figma-tools-and-prompts.md`).

It sits in Frontend & Design, covering Design to code. It works with Figma and Tailwind CSS. The repository describes itself as: Curated agent skills collection verified by JetBrains. The licence is Apache-2.0.

When your agent uses it

  • A task involves Figma URLs
  • Design-to-code implementation
  • Figma MCP setup and troubleshooting

Example prompts

  • “/figma”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  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)…
  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…
  6. Validate against Figma for 1:1 look and behavior before marking complete.

What it can do on your machine

Read from SKILL.md and the folder at commit e0f258b. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Figma loads about 833 tokens when it runs, and up to ~2.1k if it reads all its reference files. Until then it costs about 69 tokens; SKILL.md has 401 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~69
When it runs · the whole SKILL.md, loaded when a task matches
~833
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from JetBrains/skills at commit e0f258b, republished under its Apache-2.0 licence (© JetBrains). 401 words, ~833 tokens.

Download SKILL.mdSave it as .claude/skills/figma/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.
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.
metadata.short-description
Use Figma MCP for design-to-code work
metadata.author
OpenAI
metadata.source
https://github.com/openai/skills/tree/main/skills/.curated/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)
  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.
Show full SKILL.md (139 more words)Show less
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.
  • 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.

© JetBrains, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 7 other files (references, assets) in figma of JetBrains/skills.

  • SKILL.md
  • LICENSE.txt
  • agents/openai.yaml
  • assets/figma-small.svg
  • assets/figma.png
  • assets/icon.svg
  • references/figma-mcp-config.md
  • references/figma-tools-and-prompts.md

Open the folder on GitHubat commit e0f258b

Used in 5 other repositories

We found 5 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 5 other GitHub owners. This page covers the copy in JetBrains/skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Figma next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Figma compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Figma this skillJetBrains/skills3665 repos~833Automated safety check: PassApache-2.0
Design To CodeMigoXLab/coderio1142 repos~1.2kAutomated safety check: PassApache-2.0
Figma Codegenawdr74100/figwright995—~4.2kAutomated safety check: PassMIT
Figmaepam/ai-dial-chat504—~997Automated safety check: PassApache-2.0
React Screenshot Recreatorbuildfastwithai/gen-ai-experiments785—~2.9kAutomated safety check: PassMIT
Figma To Codemajiayu000/spellbook287—~2.1kAutomated safety check: PassMIT

Similar skills

  • Design To Code

    MigoXLab/coderio

    Pixel-perfect Figma to React conversion using coderio. An agent skill from MigoXLab/coderio.

    114 GitHub starsUsed in 2 repos~1.2k tokens
    Frontend & DesignAuto-check passed

  • Figma Codegen

    awdr74100/figwright

    Generate framework-aware code from a Figma design. An agent skill from awdr74100/figwright.

    995 GitHub stars~4.2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Figma

    epam/ai-dial-chat

    Design-to-code workflow for Figma designs. An agent skill from epam/ai-dial-chat.

    504 GitHub stars~997 tokensUpdated today
    Frontend & DesignAuto-check passed

  • React Screenshot Recreator

    buildfastwithai/gen-ai-experiments

    Recreate a UI screenshot, mockup, or design image as production-quality React + TypeScript + Tailwind code with near-pixel-perfect visual fidelity.

    785 GitHub stars~2.9k tokensUpdated 17 days ago
    Frontend & DesignAuto-check passed

  • Figma To Code

    majiayu000/spellbook

    Extract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy.

    287 GitHub stars~2.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Figma use_figma Plugin API Rules

    warpdotdev/warp

    Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

    65k GitHub starsUsed in 4 repos~4.4k tokens
    Frontend & DesignAuto-check passed

More from JetBrains/skills

All 76 skills in this repo

  • Playwright

    JetBrains/skills

    Official

    A skill your agent uses when the task requires automating a real browser from the terminal (navigation, form filling, snapshots, screenshots, data extraction, UI-flow debugging) via playwright-cli…

    366 GitHub starsUsed in 11 repos~986 tokens
    Auto-check passed

  • Skill Creator

    JetBrains/skills

    Official

    Guide for creating effective skills. An agent skill from JetBrains/skills.

    366 GitHub starsUsed in 122 repos~4.7k tokens
    Auto-check passed

  • Transcribe

    JetBrains/skills

    Official

    Transcribe audio files to text with optional diarization and known-speaker hints.

    366 GitHub starsUsed in 4 repos~776 tokens
    Auto-check passed

  • Imagegen

    JetBrains/skills

    Official

    A skill your agent uses when the user asks to generate or edit images via the OpenAI Image API (for example: generate image, edit/inpaint/mask, background removal or replacement, transparent…

    366 GitHub starsUsed in 3 repos~2.5k tokens
    Auto-check passed

  • Speech

    JetBrains/skills

    Official

    A skill your agent uses when the user asks for text-to-speech narration or voiceover, accessibility reads, audio prompts, or batch speech generation via the OpenAI Audio API; run the bundled CLI…

    366 GitHub starsUsed in 3 repos~1.9k tokens
    Auto-check passed

  • Screenshot

    JetBrains/skills

    Official

    A skill your agent uses when the user explicitly asks for a desktop or system screenshot (full screen, specific app or window, or a pixel region), or when tool-specific capture capabilities are…

    366 GitHub starsUsed in 6 repos~2k tokens
    Auto-check passed

Works with

Categories

Questions about Figma

What does Figma do?

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Figma is an agent skill from JetBrains/skills, published by the product's own GitHub organization. Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code.

When should I use Figma?

Figma fits situations like: A task involves Figma URLs; design-to-code implementation; figma MCP setup and troubleshooting.

How do I install Figma in Claude Code?

Run `npx skills add JetBrains/skills --skill figma -a claude-code`. Or copy the skill folder (figma in JetBrains/skills) into .claude/skills/figma in your project. Claude Code loads it when a task matches its description.

How do I install Figma in Codex?

Run `npx skills add JetBrains/skills --skill figma -a codex`. Or copy the skill folder (figma in JetBrains/skills) into .agents/skills/figma in your project. Codex loads it when a task matches its description.

Can I use Figma in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add JetBrains/skills --skill figma -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/figma, .gemini/skills/figma, .github/skills/figma and .opencode/skills/figma in your project.

What does Figma need to run?

SKILL.md names no scripts, command-line tools or credentials: Figma is instructions for the agent only.

Does Figma access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Figma safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Figma use?

Figma is published under the Apache-2.0 licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Figma use?

About 833 tokens (SKILL.md is roughly 3.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.3k tokens, read only when the agent opens those files.

What are the alternatives to Figma?

Skills that share tags, products or a category with Figma: Design To Code (MigoXLab/coderio, 114 stars), Figma Codegen (awdr74100/figwright, 995 stars), Figma (epam/ai-dial-chat, 504 stars) and React Screenshot Recreator (buildfastwithai/gen-ai-experiments, 785 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Figma?

JetBrains (a GitHub organization, an official publisher) maintains it in JetBrains/skills, which has 366 GitHub stars. The repository holds 76 skills in this directory. The repository was last updated on June 29, 2026.

Source: JetBrains/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.