Adobe XD Adds Coediting theblog.adobe.com3 years ago in #Apps Love175

Creating component states is easy. With a component selected, you’ll see a new section in the Property Inspector on the right side of your screen where you can create and manage different states for the selected component. When a specific state is selected, you can change properties like the component’s fill color or character styles, just like editing a normal component. You can also work with component states in Prototype mode, making it possible to create interactive user interfaces, as well as implement microinteractions as part of your prototype’s experience. If a selected component has any states, you’ll see the different states as destinations for a prototyping action. For example, you can define a hover state for a button component in Design mode, and then set the hover state as a destination for a prototyping interaction in Prototype mode. To help you get a better understanding of how component states work in Adobe XD, we partnered with Danksy to create the XD Fresh UI Kit. In the kit, you’ll find a fictional app that simulates the experience of buying fruits and vegetables online. The kit uses component states to switch on and off a variety of ‘ordering’ elements, such as checkboxes, switches, and buttons, without the need for additional artboards. Hover trigger One of the most common use cases for component states is to create hover states for your components. For some, hover support has been a long time coming to XD, but we wanted to hold back delivering on this until we could combine it with the power of component states to make it as useful as possible for design teams. As the name implies, the hover trigger is invoked whenever a user ‘hovers’ a cursor over an element, such as hovering over a button in a desktop application. As part of defining states for your components (as described above), you can choose to define a hover state, which will automatically wire up the necessary interactions to respond to a user hovering their cursor over the component. You can also choose to manually apply the hover trigger to any element in prototype mode using the trigger dropdown in the Property Inspector. Hover joins a growing list of triggers supported in XD including tap, drag, voice commands, keyboard input, and gamepad input. Support for multiple interactions As we support more and more user inputs in XD, interaction designers can prototype fully interactive experiences without having to write any code. Oftentimes, prototype interactions will vary based on a user’s input, such as having one action when a user taps on an object and another when a user drags on an object. Until now, this required duplicating artboards to wire up different prototyping flows — but not any more! URL Out – – theblog.adobe.comDate – 2019-11-06 19:29:18

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply