Is this really how you create a drop down menu component?

[Jason Burnett]

I want to create a simple combo box drop down menu with about 10  menu items.

I ad a rectangle shape and a caret icon in the corner then add a text field.

I then draw the same shape without the icon and just the text.

With the second rectangle and the text selected I create a component. called InactiveItem

I next create a hover state on the InactiveItem and change the color of the component artwork.

That covers the hover interaction for each menu item (except the selected menu item).

Next, I create a repeating field where this component is copied for each menu item.

I change the text on each menu item.

Next, I select the entire collection of things and create a component. called MenuOpen

Since I have 10 menu items, do I have to then create 20 states so that each menu item (when selected) appears at the top with the others hidden and then 10 additional states for when the menu is open?

Then I link all of the items (9) in the menu to their related closed state. And the closed states to the open states for each menu item? That is so many opportunities to mess up. That is so much duplicated work. 

That is absolute bonkers. 

There has to be a better way to do a dropdown menu. 

[Spas K. · Accepted solution]

Hi Jason. It would help if you post a screenshot with your setup (including layers panel), so we can see this better.

Xd is mostly good for making flows and planning some interactions. It falls short when you want to create really high fidelity prototypes that look like the real thing, especially with menus and dropdowns that have many options.

For these complex elements you have to prototype every possible case as a component state or separate artboard. In your case, if you want to show the selected item in the initial field, and show the dropdown menu with the selected item, you will indeed have a lot of states to cover for each option. I think you should be able to get away with around 10 states. Post some screenshots with a few different options, or a prototype with fewer items, so we can see if we can make it simpler.

When I have to use Xd, I usually only show 1 interaction so devs see the principle, and not every possible option (if it's not absolutely necessary).

Furthermore, component states never really worked as they should have and are still not fully functional - check this thread. You have already faced the issue where if you have multiple instances of a button or menu/dropdown items that have multiple states, you have to change the text for each state manually, on every instance.

[Jason Burnett]

I honestly cannot believe someone would use XD instead of just learning CSS and HTML to do prototyping of these basic things. Heck, a little JS and you can create super high fidelity prototypes pretty easily. XD, not so much..

It seems like Adobe rushed XD to market to bite on Figma and Invision--Gawd forbid someone compete with them. How long before Adobe buys them up and shuts them down?

Thanks for your response. This is how we used to develop websites back in the Mosaic days. Created a separate page with duplicate menus reflecting different selected states.

[Spas K.]

Yeah, depends on how confident one is with their front-end skills. But I definitely agree it's more quick and dirty, rather than fully fledged, high-fidelity prototyping. Axure is probably the most feature-rich, but it lacks design features, and is html/css/js based anyways.

I think Xd was made mostly for mobile apps, and websites were more of an afterthought. Some rather important cases such as the one you mentioned, scroll triggers, sticky items etc. still haven't been implemented.