Highlighted

How to hide element in default state and show in other state in XD?

Community Beginner ,
Apr 15, 2020

Copy link to clipboard

Copied

Hi folks.

 

I'm trying to create a header component in default (logged in) and logged out state.

 

I managed easily to hide the user avatar in the derived (logged out) state.

 

But I don't manage to have a log-in link displayed only in the derived state. When I repeat the same as for the avatar (that is 1) selecting default state 2) selecting the element 3) pressing delete), the element is gone in both states.

 

I also tried changing opacity to 0 in the default state, and setting it to 1 in the derived state, but when I change back to default state, it keeps opacity 1.

 

Is this a bug for now? It's definitely not what I would expect (at least the opacity issue). Or am I missing something. Is there another way to achieve what I wanna do?

 

Adding a rectangle that covers that link, which is hidden in the derived state would probably work, but seems like quite a clumsy work-around.

 

Thanks!

 

<The Title was renamed by moderator>

Adobe Community Professional
Correct answer by Sjaani | Adobe Community Professional

Instead of using the Opacity slider, try using the transparency slider within the fill/stroke colour picker.

This seems to allow me to have a blank space which shows the colour when I hover over the area.

TOPICS
How to

Views

426

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

How to hide element in default state and show in other state in XD?

Community Beginner ,
Apr 15, 2020

Copy link to clipboard

Copied

Hi folks.

 

I'm trying to create a header component in default (logged in) and logged out state.

 

I managed easily to hide the user avatar in the derived (logged out) state.

 

But I don't manage to have a log-in link displayed only in the derived state. When I repeat the same as for the avatar (that is 1) selecting default state 2) selecting the element 3) pressing delete), the element is gone in both states.

 

I also tried changing opacity to 0 in the default state, and setting it to 1 in the derived state, but when I change back to default state, it keeps opacity 1.

 

Is this a bug for now? It's definitely not what I would expect (at least the opacity issue). Or am I missing something. Is there another way to achieve what I wanna do?

 

Adding a rectangle that covers that link, which is hidden in the derived state would probably work, but seems like quite a clumsy work-around.

 

Thanks!

 

<The Title was renamed by moderator>

Adobe Community Professional
Correct answer by Sjaani | Adobe Community Professional

Instead of using the Opacity slider, try using the transparency slider within the fill/stroke colour picker.

This seems to allow me to have a blank space which shows the colour when I hover over the area.

TOPICS
How to

Views

427

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
Apr 15, 2020 0
Adobe Community Professional ,
Apr 15, 2020

Copy link to clipboard

Copied

Instead of using the Opacity slider, try using the transparency slider within the fill/stroke colour picker.

This seems to allow me to have a blank space which shows the colour when I hover over the area.

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
Reply
Loading...
Apr 15, 2020 1
Community Beginner ,
Apr 16, 2020

Copy link to clipboard

Copied

Thanks Sjaani.

 

That sounds like a great tip.

 

In the end I realised that the link element wasn't actually inside the component. After moving it inside the component, the transparency setting for the states worked.

 

I noticed based on behaviour when selecting the elements: To edit an element inside a component you need to double click the master component. I could single click the link. Also when opening the layers panel, the hierarchy showed the link outside the component (diamond symbol).

 

Have a great one.

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
Reply
Loading...
Apr 16, 2020 0
Adobe Employee ,
Apr 16, 2020

Copy link to clipboard

Copied

Great nice to hear you're back on track. Please feel free to reach out to us in the future for any assistance in XD.

 

We'd be happy to help.

 

Thanks Sjaani for your constant support on the community. 

 

Thanks,

Harshika

 

 

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
Reply
Loading...
Apr 16, 2020 0