Figma Components

Figma components are only valuable if other people can find the right variant without opening six pages. The craft is naming, property design, and knowing when a variant should be a slot instead of a boolean soup.

Name for search

Match the language engineers and designers already use: Button / Primary, Input / Error. Emoji prefixes and internal jokes make the assets panel worse. Properties should be the words people would type.

Prefer properties over exploded variant matrices

Size, state, and icon presence can often be properties on one component. A grid of 40 nearly identical variants is hard to maintain. When states truly change structure, split the component rather than hiding layers with a dozen booleans.

Slots beat fake content

If a card can contain arbitrary body content, expose a slot. Hard-coding three lines of dummy text trains files to look finished when they are not flexible.

Common mistakes

• Detaching components to make a one-off, then never contributing the real variant back.
• Putting every product screen in the same file as primitives.
• Variants that differ only by color when a variable mode would have been enough.

How to judge the work

A Figma component set is usable when someone can find the right variant by searching the words they already use, when properties describe real states instead of a combinatorial explosion, and when slots exist for content that should change. If every file detaches the button, the system never became the path of least resistance.

Practice this on UI Coach

After a challenge, extract the button, input, and list row into components. That is closer to professional file hygiene than a single artboard of a pretty mock.

Sources

• Figma guide to components