How can the overlay move up when the state changes of the component when clicking the link in XD?

Community Beginner ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

Hey there,

I'm trying to mock-up a fairly simple cookie banner, using the overlay feature in prototyping mode.

The banner is built as a component with different states
Screen Shot 2021-05-28 at 21.10.27.png

 

But and the states differ in height because for the second and 3rd state there is more information to show.

Screen Shot 2021-05-28 at 21.10.37.png

 

But now using overlay to slide up this banner from the bottom of an artboard, I can't figure out how to keep it sticking to the bottom without having the content offscreen when the state change.
See this example:
make component expand up instead of down.2021-05-28 21_21_22.gif

As you can see expands down pusing content off the viewport.
Is ther somehow a option have the overlay move up when the state changes of the component when clicking that link?

 

 

<Title was renamed by moderator>

TOPICS
How to

Views

398

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 , May 30, 2021 May 30, 2021
Hi there. Make sure the boxes in your two states are bottom aligned to each other. Also, the component should be bottom-aligned to the overlay artboard. Here's an example:

Likes

Translate

Translate
Adobe Employee ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

Hi there,

 

Thank you for reaching out. I have tried to search for something which might help you. Please check out this video: https://www.youtube.com/watch?v=eaDtD3Uwo4Y and see if you can achieve your workflow.

 

I am also keeping the discussion open for our experts if they have more tips and tricks for your workflow.

 

Thanks,

Harshika

Adobe Xd Components States, create a Pop-Up window. In this Adobe XD tutorial, I will teach you how to create a pop-up window using multiple components state...

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 ,
May 30, 2021 May 30, 2021

Copy link to clipboard

Copied

Hi there.

Make sure the boxes in your two states are bottom aligned to each other. Also, the component should be bottom-aligned to the overlay artboard.

Here's an example:

 

image.png

image.png

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
Community Beginner ,
May 31, 2021 May 31, 2021

Copy link to clipboard

Copied

I'm not sure how to do that, because if I change the y position of 1 state it carries over to the others. How should I change the position of different states independently?
2021-05-31 09-48-22.2021-05-31 09_49_58.gif

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
Community Beginner ,
May 31, 2021 May 31, 2021

Copy link to clipboard

Copied

Oh nevermind, found it 😄 

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
Community Beginner ,
May 31, 2021 May 31, 2021

Copy link to clipboard

Copied

LATEST

Key is that you select your layers in each component state and move those, not the component itself.

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