Figma Skills are markdown-based instructions that guide how the AI Design Agent behaves in your specific context. Think of them as reusable custom prompts — you write them once, and they encode your team's conventions, component rules, and quality standards so the agent follows them automatically every time.
Anyone can write a skill. No code required. No plugin development. No API integration. Just markdown text that describes what the agent should do and how it should do it. Skills are the difference between an agent that generates generic UI and an agent that generates YOUR team's UI.
Key Takeaway
Skills turn the Design Agent from a generic AI into YOUR team's AI. Without skills, the agent uses default conventions and guesses your preferences. With skills, it follows your spacing system, component naming rules, accessibility requirements, and brand guidelines automatically. 30 minutes writing 3-4 skills saves hours of correction over weeks of agent use.
What Makes Up a Figma Skill?
| Skill Element | What It Does | Example |
|---|---|---|
| Name (with /) | How you invoke it | /create-settings-page |
| Purpose | What the skill does (one sentence) | "Generate a settings page following our team conventions" |
| Steps | Ordered instructions the agent follows | "1. Use Section Header for each group..." |
| Conventions | Rules the agent must follow | "Always use 8px grid, never use absolute positioning" |
| Components | Which published components to use | "Use Toggle/Switch for boolean settings" |
| Variables | Which design tokens to apply | "Use color-surface-primary for backgrounds" |
| Don'ts | What the agent should avoid | "Never use more than 3 heading levels per page" |
Figma launched with 9 example skills covering: building component libraries, generating new designs from briefs, producing accessibility specs, coordinating multi-agent workflows, and syncing design tokens with code. Explore them at figma.com/community/skills. The foundational skill, /use-figma, gives the agent a shared understanding of how Figma works structurally. Teams customize from there.
Writing Your First Skill (With Example)
Start with your most repeated design task. If you create form layouts weekly, write a /form-layout skill. Here's a complete, real-world example:
This skill tells the agent exactly how your team builds forms. Without it, the agent uses Figma's default conventions. With it, every form the agent generates follows your specific standards — consistent across team members, consistent across projects.
📬 Getting value from this?
One actionable AI insight per week. Plus a free prompt pack when you subscribe.
Subscribe free →How Skills Compare to Other AI Custom Instructions
Skills are conceptually similar to custom instruction systems in other AI tools:
| Tool | Custom Instructions | Created By | Shared? |
|---|---|---|---|
| Figma Skills | Markdown files that guide the Design Agent | Manually by team | Yes (Community library) |
| ChatGPT Custom Instructions | Text that shapes all ChatGPT responses | Manually by user | No (personal only) |
| Claude Code CLAUDE.md | Project-level instructions for coding agent | Manually by team | Yes (via repo) |
| Hermes Agent Skills | Auto-generated reusable task patterns | Automatically from usage | Yes (skill library) |
The key distinction: Hermes Agent creates skills automatically from completed tasks — learning as you work. Figma requires manual skill creation — you teach it explicitly. Hermes's approach scales with usage; Figma's approach gives you more control but requires upfront investment. Both produce better AI output than using the tools without custom instructions.
The underlying principle is the same across all these systems: AI performs better with explicit context about your preferences, conventions, and standards. Whether you're writing a Figma Skill, ChatGPT Custom Instructions, or a Claude CLAUDE.md file, the ICCSSE framework produces better instructions. The free Prompt Optimizer applies this structure automatically — paste your skill draft, get a clearer version back.
4 Essential Skills Every Design Team Needs
1. /form-layout — Standardizes form design across the team. (Example above.)
2. /page-layout — Defines your page structure conventions: header placement, sidebar width, content max-width, footer structure, navigation patterns, responsive breakpoints.
3. /component-variant — Tells the agent how to create new component variants that match your existing system: naming conventions, state definitions (default, hover, active, disabled, error), size scale (sm, md, lg), and documentation requirements.
4. /accessibility-check — Defines your accessibility standards: WCAG level (AA vs AAA), minimum touch target sizes, contrast ratios, heading hierarchy rules, required ARIA labels, and screen reader annotation format. See our accessibility specs guide for details.
📬 Want more like this?
One actionable AI insight per week. Plus a free prompt pack when you subscribe.
Subscribe free →Frequently Asked Questions
How many skills should I create?
Start with 3-4 covering your most common design tasks: a form skill, a page layout skill, a component variant skill, and an accessibility check skill. These cover 80% of daily design work. Add more skills as you identify repeated patterns that the agent handles inconsistently.
Can skills call other skills?
Yes — skills can reference other skills, creating chained workflows. A /new-feature skill could invoke /form-layout for input sections, then /accessibility-check for compliance review. This enables complex multi-step workflows from a single invocation.
Do skills consume credits?
The skill itself (the markdown instructions) doesn't consume credits. The agent actions that the skill triggers (generating designs, editing components) consume credits at the normal rate. A well-written skill may actually save credits by producing better output on the first attempt — fewer iterations means fewer credit-consuming regenerations.
Can I share skills with the Figma community?
Yes — Figma's community skills library lets you publish and browse skills. This means you can use skills written by other design teams for common patterns (dashboard layouts, onboarding flows, settings pages) without writing them from scratch.
Where are skills stored?
Skills are associated with your Figma organization or personal account. Team-level skills are accessible to all team members; personal skills are only accessible to you. Store your most important skills at the team level so all designers benefit from the same conventions.
Disclosure: Some links in this article are affiliate links. We only recommend tools we've personally tested and use regularly. See our full disclosure policy.