What is the jetbrains-figma skill?
The jetbrains-figma skill is the figma folder in JetBrains' verified skills catalog, originally from OpenAI. Its SKILL.md sets a required flow for an agent using the Figma MCP server: fetch design context, take a screenshot, then translate the output into your project's own components and tokens.
Six numbered steps make up the heart of this skill, and the first is to run get_design_context before anything else. The SKILL.md labels the flow required and says it must not be skipped.
It sits in JetBrains/skills, which the README calls a JetBrains-filtered and verified snapshot of upstream agent skills, 129 in total from 15 upstream repositories. This one credits OpenAI as author in its metadata.
The required flow
- Run get_design_context for the exact node or nodes to get a structured representation.
- If the response is too large, run get_metadata for a node map, then re-fetch only the nodes you need.
- Run get_screenshot for a visual reference of the variant being built.
- Download needed assets, and only after you have both context and screenshot, start implementation.
- Translate the output into the project's own conventions, styles and framework.
- Validate against Figma for look and behavior before marking the work complete.
How it treats the generated code
The Figma MCP output, usually React and Tailwind, is treated as a description of design and behavior rather than final code style. The agent is told to swap in your tokens and reuse existing components instead of duplicating them.
Asset rules are firm. If the server returns a localhost source for an image or SVG, use it directly, add no new icon packages, and never substitute a placeholder when a real source exists.
Who the jetbrains-figma skill suits
Best for
- Developers who already run the Figma MCP server and want a consistent routine for every frame they implement.
- Projects with an established component library and token set that generated code must conform to.
- Pasting a Figma frame link and asking the agent to build exactly that node.
Not for
- Anyone without Figma MCP access. The skill assumes the server exists, with setup notes in a bundled reference file.
- Designing from scratch. It translates an existing Figma design and does not invent one. For that, see figma-generate-design.
- Producing a WordPress site, since the target here is application code.
Use it with UiChemy
This skill ends in React-style application code, not WordPress. If the destination is a WordPress site, UiChemy Figma to WordPress converts the Figma file into editable pages without that code step. Click Get Started on uichemy.com.
For the code route, compare figma-implement-design, the server notes in figma-mcp, and figma-code-connect-components for mapping components.
How to install JetBrains Figma Skill: Figma MCP to Production Code
git clone https://github.com/JetBrains/skills.gitClone the catalog
Run
git clone https://github.com/JetBrains/skills.git. Each skill sits in its own top-level directory, and this one is the figma folder.Copy the skill folder
Copy the whole figma folder into your agent's skills directory so the references and agents files stay beside SKILL.md.
Connect the Figma MCP server
The skill expects the Figma MCP server to be available. Its bundled reference, references/figma-mcp-config.md, covers setup, verification and troubleshooting.
Give it a frame link
Copy the link to the exact Figma frame or layer and ask the agent to implement it. The skill triggers on Figma URLs, node IDs and design-to-code tasks.
Check that it loaded
Share one Figma frame link. The agent should call get_design_context, then get_screenshot, then build the node using your existing components and tokens.
Key features
- Required six-step flowThe SKILL.md names a flow that must be followed for every Figma-driven change, ending with a validation pass against the design before the work is marked complete.
- Design context firstThe agent calls get_design_context for the exact node or nodes so it starts from a structured representation and not a guess.
- Metadata fallback for large nodesWhen the response is too large or truncated, get_metadata returns a high-level node map and the agent re-fetches only the required nodes.
- Screenshot as visual referenceget_screenshot supplies the picture of the variant being implemented, and the skill requires both context and screenshot before any assets are downloaded.
- Output treated as a representationReact and Tailwind from the server describe design and behavior. The agent adapts them to the project's conventions instead of pasting them in.
- Token and component reuseTailwind utilities are replaced with the project's preferred utilities or tokens, and existing buttons, inputs and typography are reused.
- Strict asset handlingA localhost image or SVG source is used directly, no new icon packages are added, and placeholders are banned when a source is provided.
- Link-based promptingYou copy the Figma frame or layer link and give it to the client, which extracts the node ID, so the link must point at the exact variant.
- Bundled reference filesTwo reference files cover MCP setup and troubleshooting, and a tool catalog with prompt patterns for choosing frameworks and fetching metadata.
Frequently asked questions
What is the jetbrains-figma skill?
It is the figma folder inside the JetBrains/skills repository. The SKILL.md tells an agent how to use the Figma MCP server to fetch design context, screenshots, variables and assets, and to translate Figma nodes into production code in a required order.
Who wrote the figma skill?
The SKILL.md metadata credits OpenAI as author and links to a curated figma skill in the openai/skills repository. JetBrains/skills describes itself as a JetBrains-filtered and verified snapshot, so each SKILL.md keeps an exact source link to its upstream path.
How do I install the figma skill from JetBrains/skills?
Clone JetBrains/skills and copy the figma folder into the place your agent loads skills from. Keep the references, assets and agents subfolders beside SKILL.md. Then connect the Figma MCP server and paste a Figma frame link when you ask for an implementation.
Does the skill work without the Figma MCP server?
No. It is written around the Figma MCP server and names its tools, get_design_context, get_metadata and get_screenshot. Without that server connected, the agent has no structured design data to follow. A bundled reference file explains setup and troubleshooting.
Which AI coding agents can use the figma skill?
The repository describes a catalog of agent skills and does not tie this one to a single agent. The folder includes an agents/openai.yaml file. Any agent that loads SKILL.md folders and has the Figma MCP server connected may use it, but a full list is not stated.
Does it generate React and Tailwind code?
The SKILL.md says the server output is usually React and Tailwind, and it treats that as a representation to adapt, not final code. The agent should translate it into your framework, replace Tailwind classes with your preferred tokens and reuse existing components.
How is this different from figma-implement-design?
Both turn Figma designs into code. This skill is a compact rulebook for the Figma MCP workflow. For another take on implementing a design, compare figma-implement-design and pick the one whose steps suit your stack.
What license does the figma skill use?
GitHub shows no license for the JetBrains/skills repository, so this page lists See repository. The skill folder does include a LICENSE.txt file. Read that file and the repository before you redistribute the folder inside a product.