Components that change appearance based on user interactions are invaluable for creating high-fidelity prototypes.
You can create a component, add multiple variations (states) to it, and wire it to mimic real-world user behavior (without having to copy your components multiple times).
Having components with states also makes it easier to manage your assets and to create interactive design systems.
Once you have created a component, the Property Inspector has a new section that lists the component with a Default State. You can now add two types of states for your components — New State and Hover State. Read on to know how to add a state.
Use New State for scenarios where you want to show variations of a component such as a disabled or clicked version of a component.
Click the + button next to the master component's Default State in the Property Inspector, and select New State.
New State does not have any interactivity baked into the state. You have to wire the interaction in Prototype mode. For more information, see Add interactivity to components.
Use Hover State if you want your component to change and display a different state when a user hovers over the component.
In Design mode, click the + button next to the Master component's Default State in the Property Inspector, and select Hover State.
When using Hover State, you don't have to go to Prototype mode to wire the interaction. It's automatically done for you.
You can add states only to a Master component. Component instances always inherit their states from the Master component.
You can wire hover and tap interactions between component states in Prototype mode. Wiring component states interactions is similar to adding interactions between artboards. The main difference is when wiring component states interactions you choose a state as a destination instead of an artboard.
1. Select a component and switch to Prototype mode.
You can see all the states you created in the Component section in the Property Inspector.
2. Click the > icon on the component or the + in the Interaction section in the Property Inspector to add an interaction.
3. Select the state where you want to add the interaction.
4. Choose Tap (for click events) or Hover (for mouse over actions) as a trigger.
5. Pick an action type (such as Auto-Animate or Transition).
6. Pick a state as a destination.
7. Switch to the Preview window and test your component's interactivity.
You can define multiple interactions for the same component state. For example, if you have a toggle switch that has both hover and tap states, you can define those interactions by repeating steps 4-7 twice to define the tap and hover states. After you create multiple interactions, you can see the Interaction section displaying the defined interactions. Toggle between those interactions and modify the interaction properties to fit your requirements.
When you define an interaction on a Master component state, all instances of that component automatically inherit those interactions. This means if you wire a component to a specific artboard or state, all instances of that component also contain those interactions.
When you have an instance selected on canvas and you want to edit existing states or add new states to the Master component, you can do so through one of the following options:
Component instances are linked with the master component. Changes to a master component cascade to the instances. For more information, see Manage components with a single source.
Rename a component state: Double-click the component state name in the Property Inspector and type in a new name.
Delete a component state from a Master component: Right-click the component state and select Delete. When you delete a component state from the Master component, component instances that have that state active on canvas switch back to the Default State.
To simplify the management of component states, you can only add, rename and delete states from a Master component. Instances of that component automatically inherit any state changes made in the Master component. You can easily identify the Master component from the green filled diamond on canvas or from the Component section in the Property Inspector. Instances have a hollow green diamond.
- You can override properties (text, bitmap, size, appearance, or structure changes) for states just like you can override a component instance.
- When you edit the state in a Master component, that state updates across all instances.
- When you edit the state in an instance, it is treated as a unique override and no longer syncs that property with changes from the master state.
If you are not happy with the results of your overrides, reset it back to the original Master component by right-clicking an instance and selecting Reset to Master State. This clears all overrides on an instance and resets it back to the Master component.
For more information on how component overrides work, see Work with components in XD.
You can create and maintain a single source for all your reusable components along with their states and defined interactions. For example, if you have a button component with 5 defined states: Primary, Secondary, Hover, Tap, and Disabled states, when you copy and paste that component across documents, XD creates a linked component that maintains all the defined component states along with the state interactions.
If you change your linked component properties (styling, interactions, and so on) in the source document, XD notifies documents with instances of that linked component with those updates. From there, you can preview the changes and choose to accept or ignore them.
- Download the toggle button sample file and open it in XD.
- Select the entire object (make sure the circle is selected) and press Cmd + K (macOS) or Ctrl + K (Win).
- Add a new state and name it Disabled.
- In the Disabled state, select the Rounded rectangle and change the fill to gray. Select the circle and move it to the left.
- In Prototype mode, wire the following interactions:
- Default State: Set the Trigger to Tap, Action to Auto-Animate, and Destination to Disabled.
- Disabled State: Set the Trigger to Tap, Action to Auto-Animate, and Destination to Default State.
- (Optional): If you want the toggle button to glow on hover, select the component, add a Hover State, and then edit the component to have a glow effect.
Watch this video to learn more about how you can build interactivity using components with states.
Viewing time: 7 minutes.
We've got you started with using components with states. Follow this community post to learn how to use this feature to create checkboxes.
If you have a question to ask or an idea to share, come and participate in Adobe XD Community. We would love to hear from you and see your creations.