Components & States

Every interactive input component needs five states to be fully specified for development. XD lets you define all five inside one Component master:

1Input Component states:
2  Default:    white bg, #E5E7EB border 1pt, placeholder text muted
3  Focus:      white bg, #2563EB border 2pt, cursor inside, no label change
4  Filled:     white bg, #E5E7EB border 1pt, user text in primary colour
5  Error:      white bg, #EF4444 border 1pt, error message below visible
6  Disabled:   #F9FAFB bg, #E5E7EB border 1pt, muted text, cursor not-allowed
7
8All five defined inside one component master.
9No artboard duplication required.

Having all states in one master means the component documentation is self-contained — a developer opening the XD file sees the complete interaction specification in one place.

Start with the Default state: draw a 343x44 rectangle with white fill, 1pt #E5E7EB border, and 8px corner radius. Add a 'placeholder' text layer in muted gray. Group both and press Cmd+K to create the component. In the Property Inspector, click + beside States to add Focus, Filled, Error, and Disabled states. For each state, double-click the state name to enter edit mode and modify the visual properties: change border color and width for Focus, reveal the error message text layer for Error, change background to #F9FAFB for Disabled. The error message text layer exists in all states but its visibility is toggled per state.

In Prototype mode, select a component instance, click the + on the interaction handle, choose Trigger: Hover or Click, and set Action: Auto-Animate. Auto-Animate automatically interpolates between the current component state and a target state, animating fill color, border, shadow, and position changes. Set the easing to Ease Out and duration to 150ms for hover transitions — this matches the CSS transition timing developers should implement.

1Prototype interaction: Default -> Focus transition
2  Trigger:   Click (or Focus via keyboard interaction)
3  Action:    Auto-Animate
4  Duration:  150ms
5  Easing:    Ease Out
6
7Developer CSS equivalent:
8  .input {
9    border: 1px solid #E5E7EB;
10    transition: border 150ms ease-out, box-shadow 150ms ease-out;
11  }
12  .input:focus {
13    border: 2px solid #2563EB;
14    outline: none;
15  }

XD Developer Specifications shows whichever state is currently active in Design mode. To give developers specs for all states: set each state as active, take a screenshot or use Share > Share for Development to create a spec link per state. Include state-specific annotations: error message text content, transition duration, and easing curve. In the spec, link each state name to its CSS pseudo-class or component prop equivalent — this removes all ambiguity from implementation.

1State specification table for Input component:
2  State      CSS selector / Prop     Transition
3  Default    .input (base styles)    none
4  Focus      .input:focus            border 150ms ease-out
5  Filled     .input.is-filled        none
6  Error      .input.is-error         shake 300ms ease (optional)
7  Disabled   .input:disabled         none
8
9Include in Zeplin annotation or XD Dev Specs comment.

XD's state system and Figma's Component Variants solve the same problem with different architectures. XD states are named visual configurations within one master — you switch between them in the Property Inspector. Figma Variants are separate component definitions organised in a named property grid — you select a variant by choosing from dropdowns (Variant=Hover, State=Error). Figma Variants are more flexible (any property can vary independently) and easier to use in complex design systems. XD states are simpler for straightforward interactive states but less powerful for multi-dimensional component APIs. Teams migrating from XD to Figma map each XD state to a Figma Variant property value.