Figma Skills for AI Agents
Open-source skills that connect Figma to your codebase, your tokens, and your production environment. Not locked to a canvas. Run them from Claude Code, Cursor, or Cowork.
Figma launched built-in skills on March 24, 2026, as canvas instructions for their MCP server. skill.design ships open Figma skills that work across tools: audit systems, sync tokens, check accessibility, and bridge the gap between design and code.
The core distinction
Figma built-in skills
Canvas instructions. They tell an agent what to draw, where to place it, which style to apply. They work inside Figma. They read Figma Variables. They produce Figma output.
skill.design Figma skills
Cross-boundary skills. They connect Figma data to your codebase, your token system, and your production pipeline. They run anywhere. Pair them with LESS MCP for runtime resolution, not just static instructions.
Figma skills teach agents how to work on a canvas. skill.design skills teach agents how to think about design, across any tool, any agent, any codebase.
skill.design vs Figma built-in skills
| Feature | Figma Skills | skill.design |
|---|---|---|
| Platform support | Figma MCP server only | Claude Code, Cowork, Cursor, and any compatible agent |
| Skill format | Markdown files (Figma-specific conventions) | Markdown files (open Agent Skills standard, 9 section types) |
| Scope | Canvas operations inside Figma | Cross-boundary: Figma + codebase + tokens + production |
| Skill creation | Write markdown manually or fork community skills | Visual designer with live preview, drag-and-drop sections |
| Design system integration | Figma Variables and styles only | Figma Variables + CSS tokens + JSON + designtoken.md + LESS MCP |
| Runtime validation | None (static instructions) | Pair with LESS MCP for runtime token resolution and validation |
| Vendor lock-in | Requires Figma ecosystem | Open standard, vendor-agnostic |
| Pricing | Free beta (usage-based pricing planned) | Free, no limits, no account required |
Why open skills for Figma workflows
Cross-boundary
Figma's skills stop at the canvas edge. These skills cross the boundary into your codebase, your CI pipeline, and your production tokens. One skill, full coverage.
Runtime validation
Pair with LESS MCP to validate tokens at runtime. A Figma skill checks the design. LESS MCP checks the running code. Static plus dynamic.
Composable
Stack these with any other skill.design skill. Run a Figma audit, pipe results into a code review skill, then into an accessibility checker. No platform walls.
Figma skills in the registry
Ready to install. Or design your own Figma skill.
Figma Design System Auditor
Connects to the Figma MCP server to audit your design system for consistency, orphaned components, token drift, and naming violations. Works with any Figma file.
Figma Component Generator
Generates new Figma components from natural language descriptions using the Figma MCP server. Creates frames, applies styles, and registers them as components in your library.
Figma Token Sync
Synchronizes design tokens between Figma Variables, your codebase, and designtoken.md. Detects drift, resolves conflicts, and keeps every surface in sync.
Figma Accessibility Checker
Checks Figma designs for WCAG 2.2 compliance before they reach code. Reads frames through Figma MCP and flags contrast failures, missing alt text, small touch targets, and focus order issues.
Figma to Code Bridge
Reviews and refines code generated from Figma designs. Compares the Figma MCP output against your design system tokens and skill.design conventions to catch gaps before they ship.
The bigger picture: skills are not enough
Skills teach agents what to do. But agents also need something to think with. A skill says “use 8px grid spacing.” Expression infrastructure resolves the right spacing for this specific component, brand, and context.
Skills are the dictionary. Expression infrastructure is the grammar plus the judge. Figma skills work at one layer. The full stack is:
The values (colors, spacing, typography). Generate them at designtoken.md.
The behavior (how agents use those tokens). Design them here at skill.design.
The runtime (resolve tokens in context, validate output, enforce brand). Install LESS MCP.
How Figma Skills Work: Architecture Deep Dive
MCP server, 16 tools, SKILL.md format, use_figma Plugin API, distribution model, and limitations.
Also: skill.design vs Google Stitch Skills
Same pattern, different vendor. Stitch skills are locked to Google. See the comparison.
Browse all 37 skills
Engineering, Security, Data, Marketing, Design, and more
Frequently asked questions
What are Figma skills?+
How are skill.design Figma skills different from Figma's built-in skills?+
Do I need Figma's MCP server to use these skills?+
Can I use Figma skills with LESS MCP and expression infrastructure?+
What is the difference between a Figma skill and a design token?+
Are Figma's built-in skills open source?+
Why did Figma launch skills after skill.design?+
Design your own Figma skill
Encode your Figma workflow into a portable skill. No code required. Works with any agent, not just Figma's.