Difficulty: Intermediate · Last updated: May 23, 2026 · By Mantlr Editorial
A working guide to Figma skills — what they are, how to choose good ones, and how to build your own.
Quick Answer
A Figma skill is a markdown file that tells an AI agent how to behave in a specific situation — which components to use, which patterns to follow, which anti-patterns to avoid. Skills work with Figma's native agent and MCP-connected tools like Cursor and Claude Code. Good skills are narrow in scope, include concrete do/don't examples, and fit in under 200 lines. Building your own takes one afternoon; iterating to useful takes a week of real usage.
Key takeaways
Figma skills are a new asset category most designers don't know about yet. Six things to know:
1. Skills are markdown files that shape how Figma's AI tools behave — like "instructions" for an agent
2. They work across Figma's native agent and MCP-connected tools (Cursor, Claude Code, Codex)
3. Good skills are atomic — one job, clearly described, with concrete examples
4. Common skill types: design system enforcement, accessibility audits, write-to-canvas, code generation patterns
5. You can use other people's skills (when available) or build your own — both are valid
6. As of May 2026, this is an emerging category — first-movers benefit from low competition
On this page
- What is a Figma skill?
- How do Figma skills actually work?
- The most useful skill categories right now
- How do you evaluate a free Figma skill?
- What should a good Figma skill include?
- How to build your own Figma skill
- Common mistakes designers make with skills
- Where can you find Figma skills?
- Frequently asked questions
- Related articles
If you've been following Figma's AI ecosystem in 2026, you've heard the word "skills" appear more often. Most articles mention skills in passing without explaining what they are or how to use them. The result is a new asset category that almost nobody is writing about properly — and that's the opportunity. Skills are likely to become as fundamental to AI design workflows as components were to design systems, but right now most designers don't know they exist.
A Figma skill is a markdown file that tells an AI tool how to behave in a specific situation. Think of it as a written instruction set — "when someone asks you to build a button, follow these rules, reference these tokens, avoid these patterns." Skills work with Figma's native agent, with MCP-connected tools like Cursor and Claude Code, and across the broader Agent Skills ecosystem that Anthropic, OpenAI, and others have standardized in 2026.
This guide explains what skills are, how to evaluate them, where to find good ones, and how to write your own. The category is new enough that there's no canonical list. We'll cover the foundations and equip you to evaluate skills as they appear.
Quick wins
1. Check if your AI tool's Figma plugin (Cursor's, Claude Code's) already ships bundled skills — most do, and they're a free starting point.
2. A good skill fits in one screen of text. If a skill is longer than ~200 lines, it's probably trying to do too much.
3. Write your first skill as a simple "use these tokens" rule before attempting anything complex. Skills compound — start small.
What is a Figma skill?
A Figma skill is a markdown file containing natural-language instructions for an AI agent working with Figma. The skill describes a specific behavior the agent should exhibit — how to build buttons, how to audit accessibility, how to generate code that matches your design system, how to write back to the Figma canvas — in plain prose with optional examples.
Skills are not Figma plugins. They don't have a UI. They don't add buttons to Figma's toolbar. They're text files that shape how AI agents reason about Figma work. When an AI agent reads a relevant skill before responding, it follows the skill's instructions instead of using generic defaults.
Skills exist as part of the broader Agent Skills standard that emerged in 2025-2026. Anthropic's Claude products, OpenAI's Codex, and various other agent frameworks all support skills with compatible structure. Figma's plugin for these tools bundles a handful of pre-built skills — the most common is /figma-use, which lets agents write to the Figma canvas through the MCP server.
The simplicity is the point. Skills don't require installation in the traditional sense, don't need maintenance like plugins, and don't add complexity to the design tool itself. They're prose that shapes behavior.
How do Figma skills actually work?
Skills work through three mechanisms, depending on the AI tool reading them.
1. Pre-loaded skills (bundled with plugins)
When you install the Figma plugin for Cursor, Claude Code, or another supported client, the plugin includes a set of pre-built skills. These skills are automatically available to the agent — you don't load them manually. The most common pre-loaded skill is /figma-use (write-to-canvas), but plugins also include skills for design system extraction, component mapping, and code generation patterns.
2. User-invoked skills (slash commands)
Some skills are designed to be invoked explicitly. In Claude Code, you type /figma-use create a button to trigger the write-to-canvas skill. The slash command tells the agent which skill to follow. User-invoked skills are useful when you want predictable behavior — you know exactly which rules the agent will apply.
3. Auto-applied skills (context-triggered)
Modern agent frameworks support skills that auto-trigger based on context. If a skill says "apply when the user is working in a Figma Design file with a published design system library," the agent applies that skill automatically whenever those conditions hold. The user doesn't have to invoke anything — the skill activates itself.
Skills run alongside system prompts
Skills don't replace the agent's underlying behavior. They layer on top of it. Think of skills as specialized instructions for specific situations, while the agent's core system prompt handles general behavior. A skill might say "when generating buttons, use the @PrimaryButton component from our design system" — but the rest of the agent's behavior (formatting, tone, error handling) still comes from its default configuration.
The most useful skill categories right now
After watching this space develop, four skill categories deliver the most value today.
1. Design system enforcement skills
These skills encode your design system rules: which components to use, which tokens to reference, which anti-patterns to avoid. The agent reads the skill before generating designs or code, and the output respects your system instead of using generic defaults.
A simple example: a "button usage" skill says "always use @PrimaryButton for the main action, never duplicate primary buttons in the same view, use @SecondaryButton for less prominent actions." The agent generates designs that follow this rule.
2. Write-to-canvas skills
The most-used skill type. The /figma-use skill (or equivalent) lets an external agent (Cursor, Claude Code, Codex) create or modify Figma designs through the MCP server. Without the skill, the agent only reads from Figma. With the skill, the agent can write back.
Write-to-canvas skills typically include detailed instructions about how to construct Figma structures correctly: how to nest auto-layout, when to use variants vs separate components, how to set up constraints. The detail matters — naive write operations create messy Figma files.
3. Accessibility audit skills
These skills give the agent a structured way to evaluate designs for accessibility issues. The skill describes WCAG 2.2 criteria, common accessibility anti-patterns, and how to report findings. When you ask the agent "audit this design for accessibility," it follows the skill's checklist instead of generating an ad-hoc response.
4. Code generation pattern skills
For developers working with the Figma MCP server, these skills shape how generated code looks. "Use functional React components, never class components." "Use Tailwind utility classes from our config, never inline styles." "Import from our internal component library at @company/ui, not from external packages." The agent follows the skill, and generated code matches your conventions.
How do you evaluate a free Figma skill?
Skills are emerging fast and quality varies. Five things separate useful skills from noise.
1. Scope clarity
A good skill has one job. "Generate accessible buttons" is a good scope. "Generate accessible buttons, audit all accessibility issues across the design, and write back to canvas" is three jobs masquerading as one. Look for skills with narrow, well-defined scope. Multi-purpose skills usually do nothing well.
2. Concrete examples
Skills written in pure abstract prose ("ensure outputs follow accessibility best practices") produce inconsistent results. Skills with concrete examples ("✓ Use this: <button aria-label='Search'>..." / "✗ Avoid this: <div onClick={...}>...") give the agent specific patterns to imitate. Examples are the highest-signal element of any skill.
3. Anti-patterns documented
Just as in design system docs, the negative examples matter. A skill that says "use semantic HTML" without specifying what unsemantic HTML looks like gives the agent less to work with. Skills that document both "do this" and "don't do this" produce more consistent output.
4. Recent updates
Skills written for early MCP setups may use outdated patterns. Look for skills updated since the Agent Skills standard formalized in 2026. Updated skills follow current conventions; older skills may rely on patterns that have been deprecated.
5. Author credibility
Skills published by Figma, Anthropic, OpenAI, or established design system teams generally follow best practices. Skills published by individual developers vary widely. This isn't gatekeeping — it's pattern recognition. New tools benefit from following early best practices set by tooling vendors.
What should a good Figma skill include?
The structure of an effective skill follows a predictable pattern. The components below are common across well-designed skills.
A clear name and purpose statement
The first lines describe what the skill does and when to apply it. "This skill helps agents generate accessible button components in Figma that follow WCAG 2.2 standards. Apply when the user requests button creation in any Figma Design file."
When to use the skill (and when not to)
Explicit application conditions help the agent decide whether to activate. "Apply when generating button-like UI elements (CTAs, action buttons, link buttons). Do not apply for navigation elements (use the navigation skill) or for icon-only controls (use the icon button skill)."
The instructions themselves
The core of the skill — natural-language rules the agent should follow. Often organized as numbered or bulleted lists. Specific enough to act on, not so specific that they break for edge cases.
Examples (do/don't pairs)
The most-cited section of any skill. Concrete patterns the agent should match (✓) and patterns to avoid (✗). The more examples, the more reliable the skill.
Constraints or invariants
Things the skill must never do. "Never produce buttons with color contrast below 4.5:1." "Never use placeholder text as the only label." Invariants are stronger than guidelines — the agent treats them as hard rules.
Optional: related skills
References to other skills the agent should consult or combine with this one. Useful for skills that are part of a larger system.
How to build your own Figma skill
Building a skill is writing a markdown file. The technical bar is low; the design clarity bar is higher.
Step 1: Pick a problem narrow enough to be useful
The skills that work are narrow. Pick one specific behavior you want to shape — not your entire design system, not all of accessibility. "How buttons should be generated for our marketing site." "How form inputs should be labeled in customer-facing dashboards." Single-purpose skills succeed; multi-purpose skills usually don't.
Step 2: Write the rules in plain prose
Open a markdown file. Describe the rules as if you're writing onboarding documentation for a new designer who has never seen your system. Be specific. Use real component names, real token names, real examples from your work.
Step 3: Add concrete examples
For every rule, add a "do this" example and a "don't do this" example. The examples are what the agent actually copies — abstract rules produce inconsistent results. Use real code or real Figma structure, not pseudocode.
Step 4: Test with your AI tool
Save the skill to the location your AI tool expects (varies by tool — Claude Code uses ~/.claude/skills/, Cursor and others have their own conventions). Open your AI tool and trigger the skill (slash command or descriptive prompt). Generate output. Does it follow your rules? If not, the rules are ambiguous — refine and retest.
Step 5: Iterate based on real usage
Skills improve from real-world feedback. Use the skill on actual work for a week, note where it fails or produces unexpected output, and refine. Most skills go through 3-5 iterations before stabilizing.
Where to save skills
Different AI tools store skills in different locations:
- Claude Code:
~/.claude/skills/[skill-name].md(or in the project's skills folder) - Cursor: Depends on configuration — check Cursor's plugin docs
- Codex CLI: Within Codex's plugin or skills directory
- Figma's native agent: Skills are bundled with Figma plugins for the agent; user-authored skills are not yet directly supported (as of May 2026)
Check current documentation for your tool — the exact paths may shift as tooling evolves.
Common mistakes designers make with skills
After reviewing how teams have introduced skills into their workflows, these five mistakes are most common:
Mistake 1: Writing skills too broadly. "Make all designs follow our brand" is not a skill. "When generating CTA buttons, use @PrimaryButton from our library, with the primary brand color, sized md by default" is. Narrow scope is what makes skills work.
Mistake 2: Skipping examples. Skills without concrete do/don't examples produce inconsistent output. The agent reads abstract rules and interprets them — sometimes correctly, sometimes not. Examples remove the interpretation step.
Mistake 3: Treating skills as a one-time setup. Skills need iteration. Write the first version, use it for a week, note the failures, refine. Most useful skills take 3-5 iterations.
Mistake 4: Building skills for someone else's design system. Skills work because they encode YOUR rules. Generic skills downloaded without modification produce generic results. Customize before using.
Mistake 5: Not version-controlling skills. Skills are code-like assets. They should live in your team's repository (or design system docs), be reviewed when changed, and be versioned alongside the design system itself.
521 free design resources. Zero email walls.
Mantlr is curating a Figma skills directory as the category matures — same vetting as UI kits and resources: verified, designer-tested, no email walls.
Browse Mantlr →
Check back for skill listings as they go live.
Where can you find Figma skills?
The Figma skill ecosystem is fragmented. There's no single canonical directory. Three starting points worth your time:
1. Bundled with Figma plugins
The Figma plugin for each AI tool (Cursor, Claude Code, Codex) ships with pre-built skills. These are the highest-quality skills available right now because they're maintained by Figma and the tooling vendors. Install the plugin for your tool of choice and explore what's included before looking elsewhere.
2. Anthropic and OpenAI skill repositories
As Agent Skills became a standard, Anthropic and OpenAI began maintaining example skills in public repositories. These aren't Figma-specific but include design-adjacent skills (UI generation, design system enforcement) that work across MCP-connected tools.
3. Open-source design system repositories
Some design system teams now publish their skill files alongside their token packages. Search for "Figma skills" or "agent skills design system" in GitHub. Quality varies — apply the evaluation criteria above before using.
4. Future: Mantlr
Mantlr is building a free Figma skills directory as the category matures — same vetting applied to UI kits and resources: verified, designer-tested, no email walls. Check mantlr.com for skill listings as they go live.
Skip generic "AI prompts" libraries that don't follow the Agent Skills standard. Skip skills that claim to do everything. Skip skills authored more than 12 months ago — the standard is still moving fast.
Frequently asked questions
What are Figma skills?
Figma skills are markdown files containing natural-language instructions for AI agents working with Figma. They shape how the agent behaves in specific situations — which components to use, which patterns to follow, how to audit accessibility, how to generate code. Skills work with Figma's native agent and MCP-connected tools like Cursor, Claude Code, and Codex.
Are Figma skills free?
The skills bundled with Figma plugins (Cursor, Claude Code, etc.) are free. Skills published in open-source repositories are usually free. Some teams may eventually publish premium skills, but as of May 2026, the ecosystem is dominated by free, open content.
How do I install a Figma skill?
Skills install in two ways: (1) through a Figma plugin for your AI tool, which bundles skills automatically — nothing extra needed; or (2) by saving the skill's markdown file to your AI tool's skills directory. Paths vary by tool — check current documentation for the exact location.
Can I write my own Figma skill?
Yes. Skills are markdown files. Write your rules in plain prose, add concrete do/don't examples, save to your AI tool's skills directory, and test. Most useful skills are 100-200 lines. The technical bar is low; the design clarity bar is higher — narrow scope and concrete examples are what make skills actually work.
Do Figma skills work with the native Figma agent?
The Figma plugins for tools like Cursor and Claude Code ship skills that work via the MCP server. Figma's native agent (inside Figma Design) has its own built-in behaviors but doesn't yet support user-authored skills directly. This is likely to change as the agent evolves.
What's the difference between a Figma skill and a Figma plugin?
A plugin is software with a UI that runs inside Figma and requires installation. A skill is a markdown file that shapes how an AI agent reasons and responds. Plugins are about user-driven actions inside Figma; skills are about agent behavior. They serve different purposes and aren't interchangeable.
What's the difference between Figma skills and the Figma agent?
The Figma agent is the AI assistant built into Figma Design. Skills are markdown files that configure how agents behave for specific use cases. The agent is the tool; skills are the configuration. You can use the agent without skills — but skills make the agent's output more consistent and system-aware.
Are Figma skills the same as Anthropic's Agent Skills?
Figma skills follow the broader Agent Skills standard that Anthropic, OpenAI, and others aligned on in 2026. A skill written in the standard format works across multiple AI tools (Claude Code, Codex, Cursor) and is portable. Figma-specific skills add Figma context but follow the same markdown structure.
Where can I find more design tools and resources?
Mantlr curates 521+ free design resources across 43 categories — UI kits, fonts, icons, mockups, dashboards, mobile UI — license-verified, no email walls. Browse at mantlr.com.
Build with Mantlr's curated library
You've learned about skills. The next step is using them — or building your own — to make your AI tools work the way your team works.
Mantlr lists 521 designer-vetted free resources across 43 categories — every one license-verified, production-tested, free of email walls.
Browse Mantlr → · Get weekly editorial →
Related articles
If you're exploring the Figma AI ecosystem, these articles cover adjacent ground:
- How to Use the Figma AI Agent — The native Figma agent that bundled skills are built around.
- How to Set Up the Figma MCP Server — Skills run on top of the MCP server. Setup is a prerequisite.
- Figma Agent vs Figma Make vs Figma MCP — Decision framework for picking which Figma AI tool to enhance with skills.
- How to Prepare Your Design System for AI Agents — Design system prep work that makes skills more effective.
About Mantlr Editorial
Mantlr is a free directory of designer-vetted, license-verified design resources. We test every resource before listing. No email walls. No paid placements. No affiliate dressing.
This article was written by Mantlr Editorial, the team behind a curated library of 521 free design resources. We work in production design daily and only recommend resources we'd use ourselves.
Last updated: May 23, 2026. Article reviewed quarterly for accuracy.