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

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

779

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 , 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:

 

image.png

image.png

Votes

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

Votes

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 Expert ,
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

Votes

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

Votes

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 😄 

Votes

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.

Votes

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