What this module should change
You will be able to document a component so designers and engineers make the same decisions under normal, edge, and failure conditions.
Module guide
Four decisions to understand
Anatomy and slots
Anatomy identifies stable parts; slots describe where controlled composition is allowed.
Annotate a component with required, optional, replaceable, and prohibited regions.
Variants and properties
A variant represents a meaningful choice. Properties should expose user or product needs, not every styling possibility.
Remove any property that can create an unsupported combination or has no documented use case.
States and behavior
State models include focus, hover, pressed, selected, busy, invalid, disabled, and system feedback where relevant.
Write the transition that enters and exits every state, including failure and interrupted requests.
Component APIs
Design and code APIs need shared concepts and testable outcomes even when their property names cannot be identical.
Map a Figma property to code, semantics, content constraints, and an acceptance test.
Working principles
Document the decision boundary
Explain what the component owns, what the parent pattern owns, and where product policy begins.
Invalid combinations are a design problem
A flexible API that allows inaccessible or contradictory states shifts system work onto every consumer.
Examples need edge cases
The most useful previews show long content, errors, loading, empty states, localization, and assistive behavior.
Saved in this browser
Practice and check your understanding
Explore next