Figma agent skills for Claude Code, Cursor and RevampKey

3 ready-made playbooks that teach an AI agent how to do real Figma work: which tools to call, what to check first, and when to stop and ask you.

Download RevampKey, free I have it: connect Figma

Connect Figma once and all 3 skills install themselves and stay up to date. Mac, Windows and Linux.

All 3 Figma skills

Each skill is one job. You ask in plain words and the agent loads the skill that matches, then follows its steps.

Start hereAsks before writing9 Figma tools

Use the Figma connector well and safely

Teaches an AI agent to confirm the account, file and frame before reading Figma data, pick the right tool for the question, and ask before changing anything on the canvas.

Use it when

You want an agent to read a specific Figma frame without pulling the whole file
You are unsure whether a question needs a screenshot, design context or variables
You want the agent to stop and ask before writing to a Figma file

Tools it uses

whoami
get_design_context
get_screenshot
get_metadata
get_variable_defs
get_code_connect_map
get_figjam
generate_diagram
create_design_system_rules

Example

Check the login frame in this Figma link and tell me which colour token the primary button uses.

Account confirmed as the design team workspace. Node 'Login / Mobile / v2' (id 412:880). I read its variables rather than the screenshot, since the screenshot only shows appearance: the primary button uses the token color/brand/primary. I did not change anything in the file.

Use in RevampKeyRead the full skill →

Read-only6 Figma tools

Turn a Figma frame into a build-ready handoff

Reads a selected Figma frame and produces a spec that maps each element to a real code component and each value to a design token. It flags anything unmapped and asks before changing anything in Figma.

Use it when

An engineer needs to build a Figma screen and wants existing components reused
A designer wants to check which code components and tokens a frame should use
A team wants to find design values that have no matching variable

Tools it uses

get_metadata
whoami
get_screenshot
get_design_context
get_variable_defs
get_code_connect_map

Example

Build the checkout summary frame from our Figma file. Use our existing components and tokens where they exist.

I pulled the checkout summary frame. 12 component instances: 9 map to code components (Button, Card, PriceRow and others), 3 are unmapped. 14 colour and spacing values: 11 map to tokens, 3 have no matching variable, including a 15px gap where the scale uses 16px. Not specified: the disabled and error states, and layout below 768px. I have not changed anything in Figma.

Use in RevampKeyRead the full skill →

Read-only1 Figma tools

Extract structure from a FigJam board

Turns a FigJam board into structured notes, user flows and architecture summaries, separating what is drawn from what is inferred and flagging gaps. It reads the board and does not edit it.

Use it when

A team whiteboard needs to become a written flow or spec
Sticky notes from a workshop need grouping into themes and actions
You want to know what is unclear or missing on an architecture diagram

Tools it uses

get_figjam

Example

Summarise the checkout flow on our FigJam board and tell me what is missing.

Read the checkout section of the board: 6 steps and 2 decision points. The 'payment failed' branch has no outcome and the 'guest checkout' arrow is unlabelled. I listed both as open questions for the board owner, and marked the step order as inferred from position.

Use in RevampKeyRead the full skill →

Get all 3 without copying a file

RevampKey adds the skills when you connect Figma, updates them for you and removes them when you disconnect.

Download RevampKey

How Figma skills work

Connect Figma
The Figma MCP server gives the agent its tools.
Ask in plain words
“Build the checkout summary frame from our Figma file. Use our existing components and tokens where they exist.” Each SKILL.md says when it applies, so only the one that fits is loaded.
Approve any change
The agent calls the tools in order, checks its work, and shows you any change before it makes it.

How to install Figma skills

In RevampKey the skills install themselves when you connect Figma. In other tools each skill is one folder with a SKILL.md file, and you also need the Figma MCP server connected there.

About 1 minute · nothing to copy

Download RevampKey for Mac, Windows or Linux and sign in.
Open Connectors and connect Figma. All 3 skills come with it and stay up to date; they go away when you remove the connector.
Ask in plain language, for example “Build the checkout summary frame from our Figma file. Use our existing components and tokens where they exist.”
Download RevampKeyConnect Figma · 1 click
Get RevampKey to connect Figma
RevampKey is a free desktop app for Mac, Windows and Linux. Install it, sign in, and Figma is one click away with its skills already attached.
Download RevampKey
Not now? Use the skills in your current tool
for s in essentials design-to-code-handoff figjam-diagram-extraction; do curl -fsSL --create-dirs -o .claude/skills/figma-$s/SKILL.md https://revampkey.com/marketplace/figma/skills/$s/SKILL.md done
Other tools

Into this project’s .claude/skills folder

Connect the Figma MCP server in Claude Code.

Run this in your project folder to add all 3 skills:

for s in essentials design-to-code-handoff figjam-diagram-extraction; do
  curl -fsSL --create-dirs -o .claude/skills/figma-$s/SKILL.md https://revampkey.com/marketplace/figma/skills/$s/SKILL.md
done

Ask in plain language, for example “Build the checkout summary frame from our Figma file. Use our existing components and tokens where they exist.”

Into the shared .agents/skills folder

Connect the Figma MCP server in Cursor.

Run this in your project folder to add all 3 skills:

for s in essentials design-to-code-handoff figjam-diagram-extraction; do
  curl -fsSL --create-dirs -o .agents/skills/figma-$s/SKILL.md https://revampkey.com/marketplace/figma/skills/$s/SKILL.md
done

Ask in plain language, for example “Build the checkout summary frame from our Figma file. Use our existing components and tokens where they exist.”

Into the shared .agents/skills folder

Connect the Figma MCP server in Codex.

Run this in your project folder to add all 3 skills:

for s in essentials design-to-code-handoff figjam-diagram-extraction; do
  curl -fsSL --create-dirs -o .agents/skills/figma-$s/SKILL.md https://revampkey.com/marketplace/figma/skills/$s/SKILL.md
done

Ask in plain language, for example “Build the checkout summary frame from our Figma file. Use our existing components and tokens where they exist.”

Into the shared .agents/skills folder

Connect the Figma MCP server in VS Code.

Run this in your project folder to add all 3 skills:

for s in essentials design-to-code-handoff figjam-diagram-extraction; do
  curl -fsSL --create-dirs -o .agents/skills/figma-$s/SKILL.md https://revampkey.com/marketplace/figma/skills/$s/SKILL.md
done

Ask in plain language, for example “Build the checkout summary frame from our Figma file. Use our existing components and tokens where they exist.”

RevampKey or copy the files?

In RevampKey

One click when you connect Figma
Updated for you when a skill improves
Removed when you disconnect
The MCP server is set up for you
800+ other connectors, same way

Download free

Copy into your project

One command per project
Run it again to get updates
You connect the Figma MCP server yourself
Works in Claude Code, Cursor, Codex and VS Code

See the command

Figma skills FAQ

What is a Figma agent skill?

A SKILL.md file: a short playbook an AI agent loads when your request matches it. Each Figma skill describes one job, which Figma tools to use in which order, what to check first and when to stop and ask you.

Do the Figma skills change anything on their own?

2 of the 3 only read. The others tell the agent to show you the change and wait for a yes before it creates, edits or deletes anything in Figma.

Which tools can use these skills?

Any agent that reads the open Agent Skills format: Claude Code, Cursor, Codex, VS Code with Copilot and RevampKey. In RevampKey they are attached when you connect Figma; elsewhere you copy the folders into your project or skills directory.

Do I need the Figma MCP server too?

Yes. The skills tell the agent how to do the work; the Figma MCP server gives it the tools to do it. The Figma MCP setup guide covers every client.

Figma MCP server setup · This page as Markdown

Put Figma’s best workflows in your agent

Download RevampKey, connect Figma and ask your first question in about a minute.

Download RevampKey Connect Figma · 1 click

All 3 Figma skills

Use the Figma connector well and safely

Use it when

Tools it uses

Turn a Figma frame into a build-ready handoff

Use it when

Tools it uses

Extract structure from a FigJam board

Use it when

Tools it uses

Get all 3 without copying a file

How Figma skills work

How to install Figma skills

RevampKey or copy the files?

In RevampKey

Copy into your project

Figma skills FAQ

Put Figma’s best workflows in your agent

Skills for related tools