Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
DeepSeek
Muse+22 moreClaude CodeCursorCodex CLIDeepSeekMuse
Dots
Manus
Grok
Grok Bot+18 agentsFigma Component Audit — Variants, Properties & Tokens
Scores a Figma component or component set on variant naming, component properties, layer structure, auto layout, and design tokens. Returns a 25-point report with concrete fixes to make in Figma.
Free
Figma Component Audit — Variants, Properties & Tokens
Example session with this skill installed
/figma-component-audit https://www.figma.com/design/<fileKey>/tidy-up-claude?node-id=17-16
- Read your context and instructions
- Compiled the figma component audit
Figma Component Audit Report
File: tidy-up-claude (HILMA storefront)
Component: Button (17:16)
Type: Component Set (6 variants)
Overall score: 20 / 25
| Dimension | Score | Rating |
|---|---|---|
| A. Variant definition & naming | 4 / 5 | 🟢 Good |
| B. Component properties | 3 / 5 | 🟡 Room for improvement |
| C. Layer naming & structure | 4 / 5 | 🟢 Good |
| D. Auto-layout & spacing | 4 / 5 | 🟢 Good |
| E. Color & typography tokens | 5 / 5 | 🟢 Good |
Variant map
| State \ Size | Large | Small |
|---|---|---|
| Default | ✓ | ✓ |
| Hover | ✓ | ✓ |
| Disabled | ✓ | ✓ |
All six combinations exist. There is no Pressed or Focus state for either size.
Strengths
- The properties are named Size and State, and the values are clean PascalCase (Large, Small, Default, Hover, Disabled).
- Every variant has the same shape: one container and one text layer, so only style differs between variants.
- Fills and the label color use variables (brand/primary, brand/primary-hover, brand/primary-a40, base/white), and the label uses the Body-sm text style.
- Padding uses space tokens (space/40, space/32, space/16) and the component is built with auto layout.
Improvement suggestions
B. Component properties: the label is baked into the variants
- Problem: There is no text property. The Small variants say "Subscribe" and the Large variants carry a different Japanese label, so the label depends on the variant instead of being content.
- Impact: The generated code decides the label with a conditional on size and state, so a developer cannot pass the label in from outside.
- Suggestion: Add a Text property named label on the component set, link every label layer to it, and give all six variants the same default text.
D. Auto-layout & spacing: a hardcoded 17px makes Small taller than Large
- Problem: Small uses a vertical padding of 17px with no token, while Large uses space/16. Small comes out 52px tall and Large 50px.
- Impact: The smaller button is the taller one, and the value cannot be traced to a token in generated code.
- Suggestion: Set the Small vertical padding to a spacing token that is smaller than space/16, so Small is shorter than Large.
A. Variant definition & naming: interactive states are incomplete
- Problem: A button with Default, Hover, and Disabled is missing Pressed and Focus.
- Impact: Developers have to invent those styles, and the keyboard focus state is easy to miss.
- Suggestion: Add Pressed and Focus for both sizes, using the existing state colors and a visible focus ring.
Also worth checking (not scored): the Disabled variants use a 40 percent alpha fill with white text, so the label contrast changes with the background. Run a contrast check on those two variants.
Summary
This is a well-structured button: clear property names, a complete Size and State matrix, and tokens for color, type, and spacing. The most useful next step is to turn the label into a text property, then remove the 17px padding so Small is really smaller than Large.
Note: layer names inside the variants are not exposed by the metadata, so dimension C was judged from the generated code, which shows the same container-and-text structure in all six variants.
Connects securely to your tools. The creator never sees your data.
About this skill
A component is only as easy to use as its structure is clear. A button whose label is baked into each variant, whose padding is a stray number, or whose variants stop at Default and Hover produces code with the same gaps: hardcoded text, untraceable values, and states nobody defined. This skill reads one Figma component or component set and tells you what to fix.
What it does
- Scores the component 0–5 on each of 5 dimensions (25 points total): variant definition and naming, component properties, layer naming and structure, auto layout and spacing, and color and typography tokens
- Checks variant property names and values, the states that exist (Default, Hover, Pressed, Disabled, Focus, Error), and whether every combination of properties is present
- Finds text, boolean, and instance-swap properties that should exist but do not, and slots that are generically named or empty by default
- Compares the layer structure across variants and flags auto-generated names, duplicate sibling names, and hidden layers that should be a boolean property
- Checks whether padding, gap, fills, and text styles use variables, based on the code Figma actually generates
- Lists what the component already does well, and adds a variant map that shows any missing combination
How it works
- Give it the URL of a component or component set (right-click the component in Figma and choose Copy link to selection)
- It fetches the generated code, screenshot, layer hierarchy, and variable definitions through the official Figma MCP server
- It checks the component against a fixed checklist for each dimension
- It returns a scored report. For each issue, it names the exact location, explains how it hurts code generation or handoff, and gives a specific fix to make in Figma.
What it is not
This is a read-only report. It never edits the Figma file and does not write any code. It tells you what to fix, and you make the changes in Figma. It expects a component or component set URL; if you give it a frame URL, it says so and asks for the component itself. For a whole frame or page, use a frame-level audit instead.
Requirements
Runs inside an agent connected to the official Figma MCP server, the same connection used for Figma-to-code work. It uses only get_design_context, get_metadata, and get_variable_defs. No local file access and no other network calls.
Works well with
Figma AI-Readiness Audit, the free companion skill, for whole frames and pages. Use this one for the components inside them.
Find more skills like this on the Claude Skills Marketplace, the Codex Skills Marketplace and the Gemini Skills Marketplace, or browse Claude Skills for Branding & Design.
Read-only report for one component or component set at a time — it does not edit the file or write code. Frame, page, FigJam, and Slides URLs are not supported. Layer names inside variants are not always exposed by the Figma metadata, so the layer-structure score can rest on the generated code alone.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before buying a skill.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
3 uses
Times used to date
Free to use
No account required to browse
Trust & safety
Security scan
Security scan passed 1 month ago
- Free with an Agensi account
- Accounts
official Figma MCP
Permissions
Allowed Hosts
This skill's only external interaction is through the Figma MCP server the user's agent already has connected, using the read-only tools get_design_context, get_metadata, and get_variable_defs (see https://www.figma.com/mcp-catalog/). There is no local file read/write, no direct network or HTTP calls, no terminal use, and it never writes to the Figma file — it only returns a report.