Designers are visual thinkers and their ideation is customer interaction oriented. We stay clear from engineering constraints during ideation so that we are not influenced by status quo and come up with what is the best user experience for our customers.
"Engineering constraints are not helpful but the constructs, structures and code-reuse patterns of software development are integral to an incremental design thought process"
Coming from a computer science background, I have always tried to incorporate those principles in my process. The component states feature in Adobe XD lets me develop designs that have states, and are logical, structured, and easy for incremental developer hand-off in an agile environment.
Component States
Component States are a mechanism of designing different visual representation states for a single component. The states are defined at the component level and can be carried over as is even when you nest components to create complex interaction modules.
The best part of Adobe XD’s component toolset is the ability to stitch together a complete interaction prototype between the component states, and defining animations for each transition. These states are reusable across all instances of the component – in other words saves me about a thousand copy pastes when I am designing complex applications.
Atomic Component States
States can be applied to the most atomic/granular components so that the vision for that single micro interaction persists through when we reuse that component anywhere in the application.
Composite Component State
Components with states can be combined to create composite components. We can define states for the composite component while the child components inherit and retain the traits defined in their own states.
Demo: Composite component with top level states
Developer Hand-off
It is fantastic that we can design components with a code-like approach, but how does this translate to developer hand-offs?
The ability of a developer to accurately translate a designer’s interaction and experience intent into a product depends on how much detail is readily available to them. Adobe XD developer sharing mode translates all the component state information and the actual animation prototype – helping them visualize the exact experience while readily accessing the CSS and component state changes.
"This allows for rapid development-to-design feedback loop and helps in building a shared mental model for where the product is headed."
This shared understanding of components pays dividends when the developer and designer work on adding incremental changes to the same feature. Most likely your developer has a react/angular component that mimic the states and behaviors of the design component – isn’t that the dream.
