Figma skills for MCP

Skills are pre-built instructions that teach your AI assistant how to handle common Figma tasks reliably, such as creating a new file, building a screen from your design system, or generating code from a design. Without skills, you'd need to describe each step yourself every time. With them, you can ask your assistant to do something like "create a new Figma file" or "implement this design" and it already knows what to do.

Figma provides a number of skills for use with the Figma MCP server:

• figma-use
• figma-code-connect-components
• figma-create-design-system-rules
• figma-create-new-file
• figma-implement-design

As well as two example skills that demonstrate how to write to the canvas in Figma:

• figma-generate-library
• figma-generate-design

Additionally, you can browse a collection of curated skills in the Figma Community.

Get the Figma skills

Figma plugin

The easiest way to get the Figma skills is through an agentic tool that supports the Figma plugin, such as Claude Code or Cursor. When you install the Figma plugin in one of these tools, the skills are included automatically.

The instructions for setting up the remote Figma MCP server describe how to get the Figma plugin for several common clients.

Download the skills

If your AI tool doesn't have a Figma MCP plugin, you can download and manually install the skills.

Click here to download the skills.

You can also view the skills in our mcp-server-guide repository on GitHub.

Once you've downloaded the skills, the easiest way to install them is to ask your AI assistant to unzip the file and place the contents in the right folder for your tool. Your assistant will know where skills are expected to live.

Troubleshooting

If you run into issues downloading or installing skills, see our Figma MCP server FAQs.

Figma skills

This article dives into the skills that Figma provides and some example use cases, but don't think of the examples as the limits of a skill; they're just a way to get started!

The skills you'll use depend on the task you're doing.

figma-use, for example, is the foundational skill for anyone who wants to write content to a Figma canvas. The skill is used for creating frames, components, variables, and layouts directly in a file. Other skills build on top of it for more specific workflows.

Some skills, like figma-create-new-file and figma-generate-design, are useful for designers working directly with Figma files.

Others, like figma-implement-design and figma-code-connect-components, are more relevant if you write code or are working closely with developers.

figma-use

figma-use is the skill that powers write-to-canvas. When you want your assistant to create or modify content directly in a Figma file, such as building frames, placing components from your design system, setting up variables, arranging auto layout, this is the skill that makes it possible.

Instead of generating a static image or a rough approximation, your assistant uses figma-use to write real, editable Figma content: the same components, variables, and layout rules your team already relies on. The result lands directly on the canvas and is ready to inspect, refine, and extend.

You can write to any Figma Design file you have edit access to. To get started, share a Figma file URL or a link to a specific selection in your prompt, then describe what you want to create or change. For example:

• "Using this Figma file: <URL>, create a new page and build a settings screen using our existing components."
• "Using this selection: <URL>, add an empty state that matches the existing design system."
• "Using this Figma file: <URL>, convert the raw color values in this frame to variables."

When to use it: Use this skill any time you want your assistant to create or modify content on the Figma canvas, whether you're building a new screen, updating components, or working with variables and tokens.

Requirements:

• A Figma Design file URL or a link to a specific selection
• Edit access to the file

figma-code-connect-components

figma-code-connect-components connects your published Figma components to their matching code implementations using Figma's Code Connect feature. Once connected, developers can open a component in Figma's Dev Mode and navigate directly to the corresponding code without having to hunt for it.

To use it, point your assistant at a Figma selection or share a Figma URL containing the components you want to connect. The assistant will scan your codebase for matching components, show you the proposed connections for review, and then create them in bulk once you confirm.

When to use it: Use this skill when you want developers in Dev Mode to be able to see code references linked from the design component to its implementation in the codebase.

Requirements:

• A Figma URL for the components you want to connect, or the components selected in the Figma desktop app
• Components must be published to a team library
• Organization or Enterprise plan

figma-create-design-system-rules

figma-create-design-system-rules teaches your AI assistant the conventions your team uses when translating Figma designs into code, such as where components live, which design tokens to use, and how files should be named. It does this once, saving the rules to a configuration file, so you don't have to explain your team's standards every time.

The skill analyzes your codebase to understand how it's structured, then writes a rules file for your specific AI tool.

When to use it: Use this skill at the start of a new project, when onboarding your AI assistant to an existing codebase, or when you want to make sure everyone on the team gets consistent output when turning Figma designs into code.

Requirements:

• Access to the project codebase

figma-create-new-file

figma-create-new-file creates a new blank Figma file in your drafts. It works for both design files and FigJam boards.

Usage: /figma-create-new-file [editorType] [fileName]

Examples:

• /figma-create-new-file creates a design file named "Untitled"
• /figma-create-new-file figjam My Whiteboard creates a FigJam file named "My Whiteboard"
• /figma-create-new-file design My New Design creates a design file named "My New Design"

When the file is created, your assistant returns a link you can open directly in Figma.

If your account belongs to multiple Figma organizations, your assistant will ask which one to create the file under before proceeding.

When to use it: Use this skill whenever you need a fresh Figma file, typically as the first step before asking your assistant to build something on the canvas with figma-use.

figma-implement-design

figma-implement-design turns a Figma design into working code in your project. Share a Figma URL with your assistant and it will read the design, pull in any needed assets, and generate code that matches the design using your project's existing components and conventions. It checks its output against the original design before finishing.

When to use it: Use this skill when you want to generate application code from a Figma design, such as when you're building a new component, implementing a full page layout, or matching a handoff spec.

Requirements:

• A link to the specific Figma frame or component you want to implement

Example skills: Write to canvas

figma-generate-library and figma-generate-design are examples of what's possible when you build on top of figma-use. Each one shows how write-to-canvas can be combined with design system awareness and multi-step orchestration to tackle a larger workflow.

Both skills are fully functional and ready to use. They're also provided as references: if you want to build your own skill for a workflow specific to your team, these are good starting points to learn from and adapt.

figma-generate-library

figma-generate-library builds or updates a Figma design system library from your codebase. It works in phases: first understanding what you have (in both code and Figma), then creating token collections, building out component pages, and running a final quality check. It pauses for your review between phases before continuing.

The phases are:

• Discovery: Reviews your codebase and existing Figma file to understand what tokens and components are already there, then confirms scope with you before creating anything
• Foundations: Creates variable collections for colors, spacing, and other tokens; sets up text and effect styles
• File structure: Sets up standard pages (Cover, Getting Started, Foundations, Components, Utilities) with documentation for color swatches, type specimens, and spacing
• Components: Builds each component with variants, auto-layout, and variable bindings; validates with screenshots before moving on
• Integration and QA: Finalizes Code Connect mappings, checks naming and accessibility, and takes final screenshots

When to use it: Use this skill when you want to generate or sync a Figma design system library from your codebase, including themes like light and dark mode, token collections, and component libraries.

Requirements:

• Access to the project codebase
• An existing Figma file to build into (create one first with figma-create-new-file if needed)

figma-generate-design

figma-generate-design builds full-page screens in Figma using real components, variables, and styles from your design system. Point it at a page or view in your codebase and it will find the matching design system assets, import them, and assemble the screen section by section.

For web apps, it can also take a live screenshot of the running application to use as a layout reference, helping it match the real proportions and spacing.

When to use it: Use this skill when you want to push a page, screen, or multi-section layout from your application into Figma.

Requirements:

• Access to the project codebase
• A Figma file with a connected design system, or a linked library

Community skills

The Figma Community features a growing library of skills that can enhance how you’re using the Figma MCP server. Take a look at the available skills to find good fits for your use cases: Skills in the Figma Community