How to make a click on a nested component change the state of its parent component

Report · Oct 21, 2023

I'm tying to mock up a dropdown/combo box. The dropdown is a component. It has a state for every available choice that drops down in its list. Its toggle state shows the list of choices. Each choice is a component within the dropdown component, with a default, hover, disabled, and possibly other states. When I hover on one of the available choices, I want the tap action to change the state of the *parent* dropdown to be the dropdown's state corresponding to the list choice that was just tapped. Like how a real dropdown works.

It looks like with component states, a tap (or other action) can either a) change the state of that component; or b) link to another artboard. So if I have a dropdown with, say, 6 choices, I need to create a whole artboard for each possible choice (plus others as required for things like disabled, in-focus, mandatory AND optional states for every dropdown choice that needs both...it starts to add up when I'm trying to mock up a page with maybe a dozen dropdowns, each with a handful of choices plus required/optional states. PLUS I have to consider *all* the possible *sequences* in which a user can make each permutation of possible choices/non-choices for every choice in every dropdown. Each requires its own artboard. That's a lot of artboards.

Without being able to change the state of parent or child components, the number of permutations that have to be considered individually, and the number of artboards required to mock up a single screen is exponential based on the number of dropdowns and the number of choices in each one's list, and the possible sequences. The labor, not to mention local CPU, internet, and adobe cloud performance required gets pretty heavy pretty fast.

I'm making a mockup of one screen of a web app, not mining crypto-tokens here. The ROI is looking vanishingly small, and an estimate of the time required (even assuming I make zero errors) is, well, you get the idea... 😞

I can see how asking Xd, or any mockup tool, to make an action on a component affect parent/child components is a big ask. Does anyone know a tool that can do that, short of VB or some other kind of full-on development environment? Clearly this is pushing the limits of Xds intended use cases. How do people mock up realistic screens with any kind of fidelity?

Thanks

-F