User Guide Cancel

Add multiple states to components

Search
XD

XD

Open app
  1. Adobe XD User Guide
  2. Introduction
    1. Release updates
    2. Common questions
    3. Design, prototype, and share with Adobe XD
    4. Color Management
    5. System requirements
      1. Hardware and software requirements
      2. Adobe XD, Big Sur, and Apple silicon | macOS 11
    6. Workspace basics
    7. Change app language in Adobe XD
    8. Access UI design kits
    9. Accessibility in Adobe XD
    10. Keyboard shortcuts
    11. Tips and tricks
  3. Design
    1. Artboards, guides, and layers
      1. Get started with artboards
      2. Use guides and grids
      3. Create scrollable artboards
      4. Work with layers
      5. Create scroll groups
    2. Shapes, objects, and path
      1. Select, resize, and rotate objects
      2. Move, align, distribute, and arrange objects
      3. Group, lock, duplicate, copy, and flip objects
      4. Set stroke, fill, and drop shadow for objects
      5. Create repeating elements
      6. Create perspective designs with 3D transforms
      7. Edit objects using Boolean operations
    3. Text and fonts
      1. Work with drawing and text tools
      2. Fonts in Adobe XD
    4. Components and states
      1. Work with components
      2. Work with nested components
      3. Add multiple states to components
    5. Masking and effects
      1. Create a mask with shapes
      2. Work with blur effects
      3. Create and modify gradients
      4. Apply blend effects
    6. Layout
      1. Responsive resize and constraints
      2. Set fixed padding for components and groups
      3. Create dynamic designs with stacks
    7. Videos and Lottie animations
      1. Work with videos
      2. Create prototypes using videos
      3. Work with Lottie animations
  4. Prototype
    1. Create interactive prototypes
    2. Animate prototypes
    3. Object properties supported for auto-animate
    4. Create prototypes with keyboard and gamepad
    5. Create prototypes using voice commands and playback
    6. Create timed transitions
    7. Add overlays
    8. Design voice prototypes
    9. Create anchor links
    10. Create hyperlinks
    11. Preview designs and prototypes
  5. Share, export, and review
    1. Share selected artboards
    2. Share designs and prototypes
    3. Set access permissions for links
    4. Work with prototypes
    5. Review prototypes
    6. Work with design specs
    7. Share design specs
    8. Inspect design specs
    9. Navigate design specs
    10. Review and comment design specs
    11. Export design assets
    12. Export and download assets from design specs
    13. Group sharing for enterprise
    14. Back up or transfer XD assets
  6. Design systems
    1. Design systems with Creative Cloud Libraries
    2. Work with document assets in Adobe XD
    3. Work with Creative Cloud Libraries in Adobe XD
    4. Migrate from linked assets to Creative Cloud Libraries
    5. Work with design tokens 
    6. Use assets from Creative Cloud Libraries
  7. Cloud documents
    1. Cloud documents in Adobe XD
    2. Collaborate and coedit designs
    3. Coedit documents shared with you
  8. Integrations and plugins
    1. Work with external assets
    2. Work with design assets from Photoshop
    3. Copy and paste assets from Photoshop
    4. Import or open Photoshop designs
    5. Work with Illustrator assets in Adobe XD
    6. Open or import Illustrator designs
    7. Copy vectors from Illustrator to XD
    8. Plugins for Adobe XD
    9. Create and manage plugins
    10. Jira integration for XD
    11. Slack plugin for XD
    12. Zoom plug-in for XD
    13. Publish design from XD to Behance
  9. XD for iOS and Android
    1. Preview on mobile devices
    2. Adobe XD on mobile FAQ
  10. Troubleshooting
    1. Known and fixed issues
      1. Known issues
      2. Fixed issues
    2. Installation and updates
      1. XD appears as not compatible on Windows
      2. Error code 191
      3. Error code 183
      4. Issues installing XD plugins
      5.  Prompt to uninstall and reinstall XD on Windows 10
      6. Issues with preferences migration
    3. Launch and crash
      1.  XD crashes when launched on Windows 10
      2.  XD quits when you sign out of Creative Cloud
      3. Issue with subscription status on Windows
      4. Blocked-app warning when launching  XD on Windows
      5. Crash dump generation on Windows
      6. Crash log collection and sharing
    4. Cloud documents and Creative Cloud Libraries
      1. Issues with XD cloud documents
      2. Issues with linked components
      3. Issues with libraries and links
    5. Prototype, publish, and review
      1. Unable to record prototype interactions on macOS Catalina
      2. Issues with publish workflows
      3. Published  links do not appear in browsers
      4. Prototypes do not render correctly in browsers
      5. Commenting panel suddenly showing up on shared links
      6. Unable to publish libraries
    6. Import, export, and working with other apps
      1. Import and export in XD
      2. Photoshop files in XD
      3. Illustrator files in XD
      4. Export to After Effects from XD
      5. Sketch files in XD
      6. Third-party apps not visible in Export

Learn how to add multiple states to components in your design system to develop interactive content easily.

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. 

Common examples of components with states are buttons, checkboxes, and animated toggle buttons. These components need to change when users interact with them by tapping or hovering over them.

Add component states

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 three types of states for your components — New State, Hover State, or Toggle State. Read on to know how to add a state.

New 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 main 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.

Hover State

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 Main 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.

Toggle State

Use Toggle State when you want to create components with interactive toggle behavior such as toggle, radio button, checbox and so on. 

In Design mode, click the + button next to the Default State of the Main Component in the Property Inspector, and select Toggle State.

Once the toggle state is created, by default, XD will automatically bake in two bi-directional Tap interactions between the Default State and the Toggle State, making it fully interactive.

Adding states to a component
Adding states to a component

 You can add states only to a Main component. Component instances always inherit their states from the Main component.

Visualize components in different states

After you create the states for your component, you can edit the properties of your component and visualize how your component appears to the user who interacts with it. 

  1. Select the component.
  2. Go to Property Inspector and toggle or switch between various states.
Switch states using the Property Inspector
Switch states using the Property Inspector

Add interactivity to components

You can use Tap, Hover, Keys & Gamepad, and Voice triggers for wiring interactions between component states in the Prototype mode. Wiring interactions between component states is similar to wiring interactions between artboards. The main difference is that when wiring interactions between component states, you choose a state as a destination instead of an artboard.

Add interactivity
Wiring up component states to create a tap interaction

  1. Switch to the Prototype tab.
  2. Select the component state from which you want to create the interaction. 
  3. Click the > icon on the component state or the + in the Interaction section in the Property Inspector to add an interaction.
  4. Choose Tap (for click events), Hover (for mouseover actions), Keys & Gamepad (navigation and accessibility use cases), or Voice (navigation and accessibility use cases) as a trigger.
  5. Pick an action type (such as Auto-Animate or Transition).
  6. Pick a state as the destination.
  7. Switch to the Preview window and test your Component's interactivity.

 States are listed above the artboards in the dropdown separated with a divider.

 

Multiple interactions for a component state
Multiple interactions for a component state

You can define multiple interactions for the same component state. For example, if you have a toggle switch that has a default on state, an off state, and a hover state, you can define separate interactions on the default state. Repeat the steps 4-7 to define the interaction with the additional state. 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.

Edit component states

When you define an interaction on a Main 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 Main component, you can do so through one of the following options:

Option 2

Click Edit to switch the selection to the Main component to add or edit states.

Click Edit to switch the selection to the Master component to add or edit states

Option 1

Right-click the component instance and select Edit Main Component.

Component instances are linked with the main component. Changes to a main component cascade to the instances. For more information, see Manage components with a single source.

Rename, reorder, and delete component states

Rename a component state: Double-click the component state name in the Property Inspector and type in a new name.

Reorder main component states: Drag the states of a main component in the Property Inspector to reorder them.

Delete a component state from a main component: Right-click the component state and select Delete. When you delete a component state from the Main component, component instances that have that state active on canvas switch back to the Default State.

 You can only rename and delete states in the Main component. You cannot rename the Default State.

Publish and share component states

You can publish components and its associated states to a Creative Cloud Library from the Libraries panel and distribute them as part of a design system. For more information, see Work with Creative Cloud Libraries in XD.

Manage components with a single source

To simplify the management of component states, you can only add, rename and delete states from a Main component. Instances of that component automatically inherit any state changes made in the Main component. You can easily identify the Main component from the green filled diamond on canvas or from the Component section in the Property Inspector. Instances have a hollow green diamond. 

Inheritance of component states

Follow these principles while editing states across Main components and instances:

  • 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 Main 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 main state.

If you are not happy with the results of your overrides, reset it back to the original Main component by right-clicking an instance and selecting Reset to Main State. This clears all overrides on an instance and resets it back to the Main component.

Reset a state override back to the original Main component
Reset a state override back to the original Main component

For more information on how component overrides work, see Work with components in XD.

Linked component states across documents

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. 

Linked Components only support interactions defined between states and not artboards.

Examples and sample files

Want to create a toggle switch that turns on and off when a user taps on it? 

Create an animated toggle button using our sample asset
Create an animated toggle button using our sample asset

  1. Download the toggle button sample file and open it in XD.
  2. Select the entire object (make sure the circle is selected) and press Cmd + K (macOS) or Ctrl + K (Win).
  3. Add a new state and name it Disabled.
  4. In the Disabled state, select the Rounded rectangle and change the fill to gray. Select the circle and move it to the left.
  5. 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.
  6. (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.

Learn more

Watch this video to learn more about how you can build interactivity using components with states. 

Viewing time: 7 minutes.

What's next?

We've got you started with using components with states. Follow this community post to learn how to use this feature to create checkboxes. 

Have a question or an idea?

Ask the Community

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.

More like this

 Adobe

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links
Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now
Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Legal Notices    |    Online Privacy Policy