Highlighted

Apply states to components to simulate rollovers, click-throughs, and enabled/disabled states

Adobe Employee ,
Oct 30, 2019

Copy link to clipboard

Copied

Your wait to create objects that simulate interactive experiences is now over. Applying states to components enables you to create effects that simulate actions such as onMouseHover and onMouseClick for objects like buttons, check boxes, radio-buttons and so on. For more information on applying states to Components, see Add multiple states to components

 

component-select-500.gif

 

Adding interactions between states is as simple as adding interactions between artboards. The only difference is, you can choose a state as a destination instead of an artboard. 

component-state-change-on-tap.gif

Video Tutorial

Limitations in the current version

  • You cannot preview interactions associated with states on a mobile browser or mobile application.
  • Handling states in nested components can get complicated. The team is looking for feedback on your experience with nested components.
  • There isn’t a way to rename the Default State in this version.
  • States are not supported in Design Specs in this version of XD.

Suggest improvements 

There will be several enhancements to the experience in the year ahead, and it is just the beginning. To help the team prioritize requests, search for requests on your mind in this link https://adobexd.uservoice.com/ and upvote them. In case you do not find anything that is similar to what you want, feel free to create a request.

Feedback and questions

Reply to this post to share your feedback on this feature, and any questions you have around using it. Our team of experts here will do their best to assist you.

TOPICS
Create a post

Views

266

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Apply states to components to simulate rollovers, click-throughs, and enabled/disabled states

Adobe Employee ,
Oct 30, 2019

Copy link to clipboard

Copied

Your wait to create objects that simulate interactive experiences is now over. Applying states to components enables you to create effects that simulate actions such as onMouseHover and onMouseClick for objects like buttons, check boxes, radio-buttons and so on. For more information on applying states to Components, see Add multiple states to components

 

component-select-500.gif

 

Adding interactions between states is as simple as adding interactions between artboards. The only difference is, you can choose a state as a destination instead of an artboard. 

component-state-change-on-tap.gif

Video Tutorial

Limitations in the current version

  • You cannot preview interactions associated with states on a mobile browser or mobile application.
  • Handling states in nested components can get complicated. The team is looking for feedback on your experience with nested components.
  • There isn’t a way to rename the Default State in this version.
  • States are not supported in Design Specs in this version of XD.

Suggest improvements 

There will be several enhancements to the experience in the year ahead, and it is just the beginning. To help the team prioritize requests, search for requests on your mind in this link https://adobexd.uservoice.com/ and upvote them. In case you do not find anything that is similar to what you want, feel free to create a request.

Feedback and questions

Reply to this post to share your feedback on this feature, and any questions you have around using it. Our team of experts here will do their best to assist you.

TOPICS
Create a post

Views

267

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 30, 2019 0

Have something to add?

Join the conversation