How to use the Figma Expert agent skill: setup and examples

What an agent skill is and what figma-expert changes

An agent skill is a folder containing instructions that an AI agent can load when a task matches them. The figma-expert skill is packaged as a single file, SKILL.md, and the only thing it contributes is guidance.

Once installed, the agent structures its advice around auto-layout, reusable component variants, design tokens stored as Figma variables, and clean handoff to engineers. The skill contains no code to run and does not connect to Figma, so it cannot edit a file on its own.

• Build components with auto-layout from the start, for consistent spacing and responsive resizing.
• Use variants and component properties instead of many separate frames.
• Store colours, typography, spacing and radii as Figma variables and reference them everywhere.
• Separate styles (visual appearance) from variables (semantic tokens) so theming and light/dark modes work.
• Test with real content and edge cases rather than placeholder text.
• Name and organise layers so engineers in Dev Mode can map designs to code components.

Install the figma-expert skill from the ZIP

Download the ZIP for figma-expert from this page and unzip it. You will get a folder containing SKILL.md.

For a personal setup, place the folder in ~/.claude/skills/. To limit the skill to one project, place it in that project's .claude/skills/ folder instead.

You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/figma-expert
• Single project: .claude/skills/figma-expert inside the project folder

Trigger the skill with natural requests

You do not need a special command. Describe the design task in plain language that matches the skill's topics: components, auto-layout, design systems, variants, tokens, or developer handoff. The agent will use the skill's guidance when the request fits.

Give context such as what the component is, what states it needs and which tokens already exist. The more specific the request, the more useful the advice.

• "Help me restructure this button component so it uses variants for size and state."
• "Set up design tokens for colours and spacing in Figma variables, with light and dark modes."
• "Review my component naming so engineers can map the layers to code in Dev Mode."
• "Suggest an auto-layout setup for a card that needs to resize on mobile and desktop."

Use the guidance on your Figma files

The skill gives advice, so you apply it yourself in Figma. Ask the agent for a plan, then carry out each step in the file, and bring back questions or screenshots if you need a second review.

Good uses include planning a library structure, deciding which elements should become variants, drafting a naming convention, and checking a file for hardcoded values or detached instances.

• Ask for an atomic structure: atoms (icons, colours, typography), molecules (inputs, badges), organisms (cards, headers), templates (page layouts).
• Ask for a theme plan: semantic variables that resolve differently per mode.
• Ask for a handoff checklist covering spacing, assets and layer names.

Know what the skill does not do

The skill does not connect to Figma, so it cannot change your file. It also does not generate and run Plugin API code automatically. The source mentions the Figma Plugin API only in passing, for ideas such as batch-renaming layers or exporting tokens to JSON. If you need that automation, you will have to write or obtain the code separately.

Figma is required to apply the guidance to real files. The skill runs no scripts and uses no network access, according to its listing.

• Requires: Figma
• Runs scripts: no
• Uses network: no