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

Contributor ,
Sep 15, 2021 Sep 15, 2021

Copy link to clipboard

Copied

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. 

 

 

TOPICS
Prototyping

Views

235

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
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Sep 15, 2021 Sep 15, 2021
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...

Likes

Translate

Translate
Adobe Community Professional ,
Sep 15, 2021 Sep 15, 2021

Copy link to clipboard

Copied

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.

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
community guidelines
Contributor ,
Sep 16, 2021 Sep 16, 2021

Copy link to clipboard

Copied

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.

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
community guidelines
Adobe Community Professional ,
Sep 16, 2021 Sep 16, 2021

Copy link to clipboard

Copied

LATEST

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.

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
community guidelines