Issue with components feature- hover state

[nehaannb]

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!

[AshaBC]

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

[nehaannb]

Hi Asha, 

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

[Spas K. · Accepted solution]

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.

[jaym81457689]

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.

[ralline5C51]

Hey,

Im having that same problem with mine since I only had one element (image) inside my component. Was just wondering if you found a way to fix this?

[Martin5C9B]

No, this is not a correct answer. I am more than sure I did everything as you instructed. It doesn't work.

[Martin5C9B]

Oh I managed to get it to work. This is weird, something is very confusing about it.

[Martin5C9B]

I think what is missing from your answer is to specify how each state builds on each other. There is something about the sequence of actions that breaks the functionality.

[Martin5C9B]

Probably that every time you change the default state, it resets SOME parameters of the hover state.

[mehrdad25662059g7eo]

may i Know what did u do ? 

Because still i have this problem

[Bettina24132327vukq]

To make it clear - you need to adjsut the layers within the componenet itself. if you want a different opacity on hover, select the hover state then double click to get to the layers within the component - adjsut the layers opacity within the component, group the layers within the component if you need to adjsut the opacity of everything, this is the same logic for rotating different component states.... or just make it easy on yourself and use figma. 

[CleverMissFox]

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.