domains / families / design / design-component

design-component

separate

Design a UI component spec to the house quality bar — anatomy, variants, sizes, the 8 states, token mapping, and accessibility. Use when the user wants to design or document a component (button, input, tabs, toast, combobox, date picker, modal, etc.) at the spec level before or alongside code. For generating framework code, use design-code.

When to use

• designing UI component specs
• documenting component anatomy
• defining component variants and sizes
• mapping component tokens
• specifying component accessibility
• defining component states

When not to use

• generating framework code

Skill page

Source