How to use the Figma Designer agent skill

What is an agent skill and what does this one do?

An agent skill is a folder of instructions, usually a SKILL.md file, that an AI agent loads when a task matches its description. It gives the agent working rules without you having to write them into every prompt.

The figma-designer skill applies to any work you do in a Figma file through the Figma MCP, including screens, landing pages, components, mockups, design systems, tokens and general UI. When it is active, the agent checks what already exists in the file, sets up color, spacing, radius and text-style tokens, and binds every fill, padding and text layer to those tokens so the design updates when a token changes.

The skill follows a fixed visual system: Tailwind type and radius scales, spacing steps, two layers of color tokens, and light and dark modes. It builds pages one section at a time and checks each section along the way. It is a layer of design rules on top of the official Figma skills, not a standalone tool.

• Checks the file for existing variables, text styles and components before creating new ones
• Creates a spacing and radius variable set, two color layers and a set of text styles
• Binds fills, strokes, radii, padding and gaps to variables instead of typed numbers
• Uses auto layout on every frame that has children
• Places a Foundations frame on the canvas that shows the tokens and updates with them

What do you need before you install it?

The skill cannot act in Figma on its own. It needs three things in place before it is useful.

The skill also depends on three official Figma skills, named figma-use, figma-generate-design and figma-generate-library. The skill tells the agent to load figma-use before any use_figma call, because that skill holds the Plugin API rules for color ranges, font loading and layout sizing.

• A Figma account
• A Figma MCP connection that provides the use_figma tool
• The official Figma skills figma-use, figma-generate-design and figma-generate-library

How do you install the Figma Designer skill?

Download the skill ZIP from this page and unzip it. You can install it in one of two ways depending on how you use your agent.

For Claude Code or a similar setup, place the unzipped skill folder in your personal skills directory at ~/.claude/skills/, or in a project's .claude/skills/ folder if you want it available only inside that project.

In the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.

• Personal install: ~/.claude/skills/
• Project install: the .claude/skills/ folder inside your project
• Claude apps: Settings → Capabilities → Skills, then upload the skill

How do you trigger the skill with natural requests?

You do not need to name the skill. The skill description tells the agent to use it whenever you create, edit or review anything in a Figma file through the Figma MCP. Requests such as design a page in Figma, make a button component, mock this up, or a message that includes a figma.com link should all be enough.

Be specific about the outcome. Say what the piece is, what it is for and any brand details you have, such as a font name or base colors. The agent will apply the token and layout rules from the skill, so you do not need to repeat them in each prompt.

• Design a page in Figma for a SaaS pricing page with a hero, three plans and a FAQ
• Make a button component with primary, secondary and disabled states
• Mock this up in Figma using our brand colors and the font Inter
• Review this figma.com link and tell me where the spacing and text styles are not bound to tokens

What does a typical session look like?

When you ask for a new screen, the agent first inspects the file and reuses anything that already exists. If the foundations are missing, it creates the spacing and radius variables, the Core Colors and Color System collections with Light and Dark modes, and the text styles, then draws them on a Foundations frame.

After that it builds the hero first and then one section per step. It takes a screenshot after each section and fixes problems before moving on. At the end it runs a self-check and reports what it built and what it skipped.

• Inspect local variable collections, text styles and libraries
• Set up foundations only if they are missing
• Build the hero, then each section, checking as it goes
• Run the final checklist and report results

What are the safety notes for scripts and network access?

This skill is made of instructions only. The skill ships as a single SKILL.md file and does not run scripts. It does not use the network on its own.

Any changes happen in your Figma file through the Figma MCP connection you have already set up, so review the output in Figma as you would with any generated design. Check that the file, library and font choices match what you intended before you share the file.

• Runs scripts: no
• Uses network: no
• Files included: SKILL.md
• File changes are made through your Figma MCP connection

What tips help you get better results?

Start from a file that already has your brand colors and fonts if you have them, so the agent builds Core Colors from your real palette rather than defaults. Ask for one page or one section at a time when you are reviewing the work.

The visual system is fixed. If your project needs different type scales, radius values or token rules, the skill would need to be rewritten rather than adjusted with a single prompt.

• Give the agent your brand base colors and font name at the start
• Ask for sections one at a time to review screenshots as they come in
• Keep the Foundations frame in the file so you can see token changes
• Expect the Tailwind scales and token naming to stay as written