Figma Component Audit — Variants, Properties & Tokens

Figma Component Audit Report

File: tidy-up-claude (HILMA storefront)
Component: Button (17:16)
Type: Component Set (6 variants)

Overall score: 20 / 25

Variant map

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.