Most Figma Teams Don't Know You Can Teach the Design Agent Your Own Rules
Figma's Design Agent can now learn your team's conventions as reusable Skills—so it applies your spacing scales, naming rules, and component standards automatically instead of you re-explaining them every time.
01. What It Is
Figma's Design Agent (currently in open beta) can be extended with custom Skills: Markdown files that package a repeatable workflow into reusable instructions the agent follows. Instead of typing out the same design standards in every prompt, you write them once, upload them, and invoke them with a slash command like /skill-name.
Skills follow the Agent Skills specification, so a single .md file can describe how your team names layers, which spacing scale to use, how to structure components, or which library to pull from. Once added, the agent applies that knowledge consistently across runs and projects—turning generic AI into team-aware AI.
Beyond design conventions, Skills can tap MCP connectors to pull live context from external tools like Notion, Slack, GitHub, Asana, Hex, and Atlassian. The same Skills also work across Figma Make and with MCP-connected coding tools such as Claude Code, Cursor, and Codex, so your conventions travel with you.
Why It Matters
Design consistency usually depends on people remembering the rules—or catching mistakes in review. Skills bake those rules into the agent itself, so spacing, naming, and component usage stay consistent without repeated prompting. Publish a Skill to your team or organization and everyone's agent behaves the same way, cutting review cycles and onboarding time. During the open beta the agent is free to use with no AI credits consumed.
Who Can Benefit
- Design system teams who want conventions enforced automatically instead of policed manually
- Design leads onboarding new members who need standards applied from day one
- Product teams juggling multiple projects that must share a consistent visual language
- Designers who bridge to code via MCP tools like Claude Code, Cursor, or Codex
02. Step-by-Step Guide
- 1
Write your Skill as a Markdown file
Create a .md file that describes one repeatable workflow—for example, your spacing scale, layer naming conventions, or how to build a card component. Keep it clear and instructional, as the agent reads it as guidance.
- 2
Open a chat with the Design Agent
In Figma Design, start a chat with the agent and click into the prompt box where you'd normally type your request.
- 3
Add the skill
Select Skills > Add skill, then either drag in your Skill file or click Upload a file and choose your Markdown (.md) file.
- 4
Review the details
Confirm the name, description, and content the agent parsed from the file so you know exactly what behavior it will follow.
- 5
Invoke it with a slash command
In any prompt, type /skill-name to trigger the Skill. The agent applies your packaged instructions and keeps results consistent across runs.
- 6
Publish it team-wide
Publish the Skill to your team or organization so everyone's agent uses the same conventions automatically.
Pro Tips
- Keep each Skill focused on one workflow—modular Skills are easier to reuse and combine than one giant catch-all file.
- Use MCP connectors inside Skills to pull live context from Notion, Slack, GitHub, Asana, Hex, or Atlassian instead of pasting it manually.
- The same Skills work in Figma Make and with MCP-connected coding tools like Claude Code, Cursor, and Codex—write once, use across your stack.
- Publish battle-tested Skills to the org so new team members inherit your standards on day one.
Warnings & Limitations
- Custom Skills require a paid plan (Professional, Organization, or Enterprise). Full seat users can use them in Figma Design; View/Dev/Collab seats are limited to Draft files.
- When uploaded to Figma Design, custom Skills do not support optional directories such as scripts/, references/, and assets/—this differs from the MCP server implementation.
- The Figma agent is in open beta and free during beta with no AI credits consumed, but it will move to usage-based pricing after general availability.
- Skills only accept Markdown (.md) files following the Agent Skills specification.
Related Tricks
Most Designers Don't Know Figma Motion Turns Animation Into a Reusable System Token
Animate a component once and that motion travels to every instance, every screen, and every teammate's file—just like fill and typography already do.
Most Designers Don't Know Figma's AI Agent Can Spawn Multiple UI Directions at Once
Instead of designing each variant by hand, Figma's new AI Agent can generate several competing style directions in parallel—then line them up side by side in the same file for instant comparison.
Most Developers Don't Know Claude Code Can Send a Live UI Straight Into Figma
Build an interface in code, type one plain sentence, and watch it land in Figma as native editable layers — no screenshots, no copy-paste.