Using Adobe XD Component States to Build Interactive Button Prototypes

Why interactive prototypes often bloat the file

When a design needs to show button feedback — default, hover, pressed — many designers duplicate the same artboard for each state. This approach quickly clutters the file, makes global edits tedious, and can slow down performance on larger projects.

How Component States keep a single source of truth

Adobe XD’s Component States feature lets you define multiple visual variations inside one component. Each state inherits all properties from the base component, and you only override the attributes that should change (fill, opacity, text, etc.). Because the base component remains the source, editing it updates every state unless a property was explicitly overridden.

Creating a state

1. Select the object (e.g., a rectangle) and convert it to a component (Object → Component or Cmd+K/Ctrl+K).
2. With the component selected, open the Properties panel and click the States tab.
3. Press New State, give it a name (e.g., Hover), and modify the properties you want to differ from the default.
4. Repeat for additional states such as Pressed.

Worked example: a button with three states

Imagine a primary button that should change background color on hover and appear slightly scaled when pressed.

• Default state: fill #1E90FF, text white, corner radius 4px.
• Hover state: fill #1C86EE (override), no other changes.
• Pressed state: fill #1A75CC (override), transform scale 0.95 (override).

Only the overridden properties are stored per state; everything else (text content, font size, corner radius unless changed) comes from the base component.

Wiring the interactions in Prototype mode

1. Switch to Prototype mode.
2. Select the Default state, click the blue arrow that appears, and drag it to the Hover state.
3. In the interaction panel set the trigger to While hovering, action to Auto‑Animate, and choose a duration (e.g., 200 ms).
4. Repeat the process from Hover to Pressed with trigger While pressing, and from Pressed back to Default with trigger Mouse leave or While releasing.
5. Click the preview button to see the button change color on hover and shrink slightly when pressed.

Trade‑offs and limitations

• File size: Each state stores only the overridden properties, but a large number of states with many overrides can still increase the XD file size and affect responsiveness on lower‑end machines.
• Static exports: When you export the design as PDF, PNG, or SVG, the state interactions are not preserved; you get only the currently selected state’s appearance.
• Editing discipline: Because overrides are stored per state, it is easy to forget which properties have been overridden. A change to the base component will not affect those overridden values, which can lead to inconsistencies if not reviewed.

Verifying that states behave as expected

1. Create a simple component (e.g., a rectangle) and add two states: Default and Alternate.
2. In the Alternate state, override only the fill color.
3. Return to the Default state and change the base component’s corner radius.
4. Check the Alternate state: the corner radius should have updated (inherited) while the fill remains the overridden color.
5. Switch to Prototype mode, wire a Tap trigger from Default to Alternate with Auto‑Animate, and preview to confirm the transition animates only the fill change.

If the corner radius did not update in the Alternate state, the property was likely overridden unintentionally; you can clear an override by selecting the property and clicking the reset icon in the Properties panel.

When to reach for Component States

Use this feature whenever you need multiple, closely related visual variations of the same UI element — buttons, toggles, input fields, or cards — especially when you anticipate future global edits. For completely unrelated designs or when you need to export each variation as a standalone asset, duplicating artboards or using separate components may still be appropriate.

By keeping a single source of truth and letting states handle only the differences, you reduce file clutter, simplify maintenance, and create prototypes that feel closer to the final product.