Skip to main content
nehalee
nehalee
Participant
July 7, 2020
Answered

Issue with components feature- hover state

  • July 7, 2020
  • 3 replies
  • 4201 views

Hi there,

Im having an issue with using the different component states on XD. I have added a video as reference. As you can see whenever i change the hover state it is affecting the defaut state as well. Am i doing something wrong ? Help!

Correct answer Spas K.

You're changing the opacity of the component, not the opacity of the elements inside it. A component contains all its states and elements, so if you change the opacity of the component, you change it for all the states and elements within it.

 

First - go to the layers tab, so you can see what is happening. Don't edit things while on the Assets tab, because you're basically blind as to what you are doing.

 

Here's a video I made recently to show another user how component editing works.

 

 

You have to make sure you select elements inside the components, not the component itself, if you want the change to propagate between instances and/or states.

Even when you switch to a different state, you have to make sure you're working with the contents of the component.

 

 

3 replies

C
CleverMissFox
Inspiring
March 7, 2023

I had the same problem and came here for help. If I can put it another way maybe it will be clearer. A "component" is essentially a group, and a "state" is essentially a snapshot/screenshot of the layers. We used to have to make a whole new art board for each state, even if it was just to change one fill colour of one layer. 

so make your group, like a hamburger menu with two rectangles underneath with text. Make sure you select the hamburger, both rectangles and all the text (using shift+select). Press + next to component or cntrl/cmd + K. Look in your Layers panel. It will have a "group" named conponent and underneath it will have your 5 layers (stay organized and rename everything as you go!). Rename Group  "Component" to "Menu" for clarity and make sure your layers are named (hamburger, rectangle 1, rectangle 2, text 1, text 2). Now look: Select your group "Menu". See how it has a green diamond in the upper left hand corner? That means the group is selected. Then select a layer like "rectangle 1"; see the lack of green diamond? You don't want to make your changes with the green diamond selected. 

select "menu" again and add a hover state. Make sure hover state is selected. Now go to layers panel and select "rectangle 1" (notice lack of green diamond). Change the fill color or opacity. xd is taking a snapshot/new art board of everything on it with that rectangle color/opacity changed instead of you having to make that art board.  Now select group "menu" again and toggle between hover and default state. That one rectangle should toggle fill/opacity. So make sure the group is selected, click on the state you want to change, then go to layers panel and shift + click to select all the layers under the "component"/"menu" group you want to adjust for that state. 

tldr: make sure you're selecting the layers within the group named "component" to make changes to. If you are making changes to items with a green diamond in the upper left hand corner, it will change it for all states. 

nehalee
nehaleeAuthor
Participant
July 7, 2020

Hi Asha, 

I still dont quite follow. It does a similar thing even in the edit mode..

Spas K.
Community Expert
Spas K.Community ExpertCorrect answer
Community Expert
July 7, 2020

You're changing the opacity of the component, not the opacity of the elements inside it. A component contains all its states and elements, so if you change the opacity of the component, you change it for all the states and elements within it.

 

First - go to the layers tab, so you can see what is happening. Don't edit things while on the Assets tab, because you're basically blind as to what you are doing.

 

Here's a video I made recently to show another user how component editing works.

 

 

You have to make sure you select elements inside the components, not the component itself, if you want the change to propagate between instances and/or states.

Even when you switch to a different state, you have to make sure you're working with the contents of the component.

 

 

    J
    jaym81457689
    Participant
    September 25, 2020

    I'm having the same problem and I don't understand this answer. I have a component with only one element inside it (a layer of text). When I try to change the opacity on either default or hover states, it changes on both states. If I select the text layer within the component, it doesn't give the option to change state, because it is not a component. What am I missing? I appreciate the help.

    A
    Adobe Employee
    AshaBC
    Adobe Employee
    July 7, 2020

    Hi,

     

    Thank you for reaching us.

    If you change the opacity by selecting the component it will propogate to all states. If you want to change in particular state then go to edit mode and change its opacity.

     

    Thanks,

    Asha

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices