Skip to main content

Create skills for the Figma MCP server

Who can use this feature
  • Starter, Professional, Education, Organization, and Enterprise plans
  • Requires an MCP client that supports skills

Skills package a repeatable Figma workflow into reusable instructions for your agent. Instead of writing long prompts and explaining your conventions every time, a skill gives your agent a consistent set of steps to follow, so results are more reliable from one run to the next.

With the Figma MCP server, custom skills teach your agent to build on your existing design system instead of working around it. A good skill can tell your agent to search your libraries first, use your variable names and modes, and build with your real components and auto layout, following your team’s standards.

For example, you could create a skill to:

  • Move legacy styles or one-off values to variables that follow your library’s structure, including light, dark, or brand modes
  • Create or standardize component sets that match your team’s variant, property, and token conventions
  • Build screens from existing library components, with checks to catch mismatches
  • Run “update and sync” workflows that check what exists, update what changed, and keep design and code aligned
note

Before you create your own skills, try the ones Figma provides. Custom skills work best alongside the figma-use skill, which teaches your agent the basics of writing to Figma. Learn more about Figma skills for MCP and how to use skills with the Figma MCP server.

Set up your skill​

Each skill is a folder that contains a SKILL.md file. Follow the steps for your client:

  • Claude Code: In your repository, create a folder at .claude/skills/<skill-name>/, then add a SKILL.md file to it.
  • Codex: In the Codex CLI or app, run $skill-creator and follow the prompts. Codex creates the skill folder and SKILL.md file for you.
  • Cursor: In Cursor chat, run /create-skill, describe the skill you want, and follow the prompts. Cursor creates the skill folder and SKILL.md file in your workspace.

For other clients, check your client’s documentation for where skills go.

Write your skill​

A SKILL.md file starts with a short header, called frontmatter, followed by your instructions.

  1. Name your skill. In the frontmatter, set name to a short identifier in lowercase with hyphens, such as convert-to-variables. It should match the skill folder name.
  2. Describe when to use it. In the frontmatter, write a description that says what the skill does and when to use it. Be specific: “Build a full-page screen using existing library components and variables” works better than “Generate screens.”
  3. Add a title. Start the body with a # heading that names the workflow, such as # Generate screen.
  4. List when to use it. Add a ## When to use section with a few situations where the workflow applies, such as “Creating new screens that must follow an existing design system library.”
  5. Write numbered steps. Add an ## Instructions section with the steps your agent should follow, in order. Write each step as a direct instruction, such as “Search the library first,” “Bind fills, strokes, and text to variables,” or “Prefer semantic tokens.”
  6. Include an example. Add an ## Examples section with at least one sample request and a summary of the expected result, including what gets created or updated.
  7. Cover edge cases. Add a ## Common edge cases section that says what to do when the ideal path fails, such as missing components or tokens, unclear mappings, or unsupported layer types.
  8. Add other frontmatter only if you need it. Fields like compatibility, metadata, or allowed-tools are optional. Use them for real requirements, such as needing the Figma MCP server tools, or for ownership and versioning.

Add supporting files​

As your skills grow, you can add other files to the skill folder. This keeps SKILL.md focused on the core steps, while your agent loads the extra files only when it needs them.

  • Scripts (scripts/ folder): Code for steps that are easier, safer, or more consistent to do with code, like transforming data, validating a file before making changes, or checking output for errors. Make scripts self-contained, document any dependencies, and return clear error messages so your agent knows what went wrong.
  • References (references/ folder): Detailed guidance that’s too long for SKILL.md, like a naming guide, variable structure, component rules, or a playbook for a specific workflow. Keep each file focused on one topic.
  • Assets (assets/ folder): Reusable materials your agent can read, compare against, or start from, like templates, example files, lookup tables, or a sample of the output structure you want. Assets help keep results consistent across files, teams, and runs.

Example skill​

This skill creates paint styles from a list of hex color values. It uses use_figma and relies on the figma-use skill.

Example: figma-apply-palette 
name: figma-apply-palette
description: "Creates local paint styles in a Figma file from a list of hex color values. Use when seeding or applying a color palette into Figma from an external list of colors. Does not create color variables or bind to design system tokens — use figma-generate-library for that."
compatibility: Requires the figma-use skill to be installed alongside this skill
metadata:
  mcp-server: figma

# Apply Color Palette — Figma MCP Skill

Creates local paint styles in a Figma file from a user-provided list of hex color values using `use_figma`.

**Always pass `skillNames: "figma-apply-palette"` when calling `use_figma` as part of this skill.** This is a logging parameter — it does not affect execution.

## Prerequisites

**You MUST invoke the `figma-use` skill (Skill tool: `skill: "figma-use"`) before every `use_figma` call.** It contains critical Plugin API rules, gotchas, and script templates that prevent hard-to-debug failures. Never call `use_figma` without it.

## Skill Boundaries

**This skill does:** Create local paint styles from a list of hex values with optional names.

**This skill does not:** Create color variables, bind styles to design system tokens, or modify existing styles. For a full design system token workflow, use `figma-generate-library`.

If the user asks for something outside these boundaries, say so and suggest what skill or approach would be appropriate.

## Workflow

### Step 1: Gather inputs

Ask the user for:
- The Figma file URL or file key to write to
- The list of hex values to apply, with optional names (e.g. `Brand/Blue → #3B82F6`)

If names are not provided, derive them from the hex value (e.g. `Color/#3B82F6`).

### Step 2: Check for existing paint styles (optional)

If the user wants to avoid duplicates, or if the file may already have styles, run a read-only inspection first:

```js
(async () => {
  try {
    const styles = (await figma.getLocalPaintStylesAsync()).map(s => ({ id: s.id, name: s.name }));
    figma.closePlugin(JSON.stringify({ styles }));
  } catch(e) { figma.closePluginWithFailure(e.toString()); }
})()

Skip any colors whose names already exist in the result.

Step 3: Create paint styles​

Create all styles in a single use_figma call:

(async () => {
  try {
    const palette = [
      { name: "Brand/Blue", hex: "#3B82F6" },
      // ... populate from user input
    ];

    function hexToRgb(hex) {
      return {
        r: parseInt(hex.slice(1, 3), 16) / 255,
        g: parseInt(hex.slice(3, 5), 16) / 255,
        b: parseInt(hex.slice(5, 7), 16) / 255,
      };
    }

    const created = [];
    for (const { name, hex } of palette) {
      const style = figma.createPaintStyle();
      style.name = name;
      style.paints = [{ type: "SOLID", color: hexToRgb(hex), opacity: 1 }];
      created.push({ id: style.id, name: style.name });
    }

    figma.closePlugin(JSON.stringify({ created }));
  } catch(e) { figma.closePluginWithFailure(e.toString()); }
})()

Confirm with the user how many styles were created.

Error Recovery​

On any use_figma error:

  1. STOP — do not immediately retry
  2. Call get_metadata to inspect partial state and identify orphaned styles
  3. Remove duplicate or partial styles before retrying
  4. Fix the root cause, then retry

For the full validation workflow, load figma-use (Skill tool: skill: "figma-use") and see its validation-and-recovery reference.


</details>

Start with the core instructions, then add client-specific options only where you need them.

## Best practices \{#best-practices}

- **Write descriptions like routing rules.** Your agent decides when to use a skill mostly from its `description`. Say when to use it and when not to.
- **Keep `SKILL.md` focused.** Move long or specialized details into [supporting files](#supporting-files).
- **Make high-risk skills manual only.** For skills that make significant changes, use your client’s option to stop the skill from running automatically, such as `disable-model-invocation`. Check your client’s documentation.

## Test your skill \{#test}

:::caution

Test new skills on a duplicate or example file, not on a file you depend on.

:::

To run your skill:

- **Claude Code**: Type `/<skill-name>` in the chat.
- **Codex**: In the Codex CLI or app, run `/skills` or type `$`, then select your skill.
- **Cursor**: In Agent chat, type `/` and select your skill, or type `/<skill-name>`.

## Find and share skills \{#share}

Browse skills from other teams in the [Figma Community](https://www.figma.com/community/skills) and the [Figma community-resources repo](https://github.com/figma/community-resources/tree/main/agent_skills) on GitHub.