Components & States

Select any element or group, then right-click and choose Make Component (Cmd+K / Ctrl+K). XD creates a master Component stored in the document's Components panel (the grid icon in the left toolbar). Every placed instance links back to this master. Edit the master by double-clicking any instance and clicking the master icon, or by opening the Components panel and double-clicking the component entry directly. The Components panel groups components by the '/' separator in their names — name a component 'Button/Primary' and it appears under a 'Button' folder in the panel.

XD's most distinctive feature versus Sketch was built-in component states. Select a component master and click the + beside States in the Property Inspector. Add states named Default, Hover, Active, Disabled, Error — or any custom name. Each state stores independent visual properties: fill, border, shadow, text content, element visibility. Switch between states to edit each independently. In Prototype mode, wire interactions to trigger state changes via Auto-Animate — the button's Hover state transitions smoothly when the user mouses over.

1Button Component states:
2  Default:  bg=#2563EB, label=white, shadow=none
3  Hover:    bg=#1D4ED8, label=white, shadow=0 4 12 rgba(0,0,0,0.2)
4  Active:   bg=#1E40AF, label=white, scale=0.98
5  Disabled: bg=#E5E7EB, label=#9CA3AF, cursor=not-allowed
6
7Each state is a named visual variant of the same component master.
8No separate artboards needed.

Double-click any component instance to edit it without detaching. You can override: text content of any text layer, image fill of any shape with an image fill, and visibility of individual child layers. Changes made at the instance level are overrides — they do not affect the master or other instances. To reset an override, right-click the instance and choose Reset to Master State. XD's override system is less powerful than Sketch's (you cannot override fill colors on individual instances without detaching) — a known limitation that was never fully resolved before discontinuation.

XD's Components panel uses '/' as a folder separator. Name components to match your code component names so design and development share a vocabulary. Use Category/Variant/State as the naming pattern — the same convention as Sketch Symbols.

1XD component naming -> code component mapping:
2  Button/Primary/Default    -> <Button variant="primary">
3  Button/Primary/Disabled   -> <Button variant="primary" disabled>
4  Button/Secondary/Default  -> <Button variant="secondary">
5  Input/Text/Default        -> <Input type="text">
6  Input/Text/Error          -> <Input type="text" error>
7  Card/Product              -> <ProductCard>
8  Badge/Success             -> <Badge variant="success">
9
10Shared naming eliminates translation overhead in design reviews.

XD component states map directly to CSS pseudo-classes and React component props. Default state = base CSS class. Hover state = :hover pseudo-class. Active state = :active pseudo-class. Disabled state = :disabled pseudo-class or disabled prop. Error state = a BEM modifier class (.input--error). Document this mapping in a shared table so developers know which XD state corresponds to which CSS selector — this prevents the common mistake of implementing hover styles from a screenshot rather than reading the XD state definitions.

1/* XD Component states -> CSS */
2.btn-primary {
3  background: #2563EB;  /* Default state */
4  transition: background 150ms ease, box-shadow 150ms ease;
5}
6.btn-primary:hover {
7  background: #1D4ED8;  /* Hover state */
8  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
9}
10.btn-primary:active {
11  background: #1E40AF;  /* Active state */
12  transform: scale(0.98);
13}
14.btn-primary:disabled {
15  background: #E5E7EB;  /* Disabled state */
16  color: #9CA3AF;
17  cursor: not-allowed;
18}