• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

component does not show a state when hover is chosen as a trigger

New Here ,
Nov 10, 2022 Nov 10, 2022

Copy link to clipboard

Copied

Hi everybody,

I am currenlty learning using XD, so be patient please if my query is silly or my vocabulary not very professional. I am working on my first project for a course I am doing. 

I am having problems with prototyping components.

I have created a component with different states (it's a collapsed/open menu). My aim was to highlight the menu entris when hovering over them (on the open state). So I have added for each entry a semibold entry, with appeareance set at 0% and a regular entry with appearance set at 100% on the Default state. I have created a "menu open" state, and a "selected entry" state, in which the appearance of the entry was set to show the bold one only.

When prototyping I added the trigger "hover" on the entry "dog" with destination "state selected"

I have tried to prototype directly the main component and the instance in the artboard but the result is the same; the "bold" state when hovering on the menu entry is not displayed. 

I have tried everything I could think of, but more changes I make more confused everything appears. I have read a few articles online but I am still not sure what I am doing wrong. Can somebody help with this? your feedback is much appreciated! 

I cannot share the link apparently, but if needed I can invite to edit. Also I hope the screenshots below make things more clear.

Thank you!!

Stella26523307r66v_0-1668078145884.png

Stella26523307r66v_1-1668078188319.png

Stella26523307r66v_2-1668078217022.png

 

Views

111

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

Community Expert , Nov 10, 2022 Nov 10, 2022

Hey there! You need to handle the menu items as nested components. You will make 1 component for a menu item, add a hover state inside it, and then use that component for the entries. This way the parent menu component will only be used for the collapse part, and the item components will be used for the hover interaction.

 

An annoying detail - for each of the component instances, you will have to manually change the text for the default and hover states. The Xd team never fixed that.

 

A very i

...

Likes

Translate

Translate
Community Expert ,
Nov 10, 2022 Nov 10, 2022

Copy link to clipboard

Copied

Hey there! You need to handle the menu items as nested components. You will make 1 component for a menu item, add a hover state inside it, and then use that component for the entries. This way the parent menu component will only be used for the collapse part, and the item components will be used for the hover interaction.

 

An annoying detail - for each of the component instances, you will have to manually change the text for the default and hover states. The Xd team never fixed that.

 

A very important note: When adding triggers/links to nested components that point to other pages or states of the parent component, you must first wrap the nested component in a group, and add the link to that group instead.

 

I have made a simple example for you, so you can see how it's set up. One tip: when adding a hover trigger, always make it a transition without animation. Otherwise it's annoying because it waits for the animation to run before you can interact with the hover state.

 

Here's the .xd file, and here's the prototype link.

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
New Here ,
Nov 11, 2022 Nov 11, 2022

Copy link to clipboard

Copied

LATEST

And it worked like a charm! 🙂

Thank you so much for your help and the tips. I have spent days trying to figure it out. Loads of things to learn still. Thanks again!

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