Skip to main content

Hey Figma community,

I’ve created a prototype of a website on Figma and when I view the prototype, I have an endless amount of white space above the frame where I want it to start.

Figma – 19 Dec 22

Can anybody help me out?

Ellen.

The empty space above the header is due to the “Button” component. This component is in the screen frame and is positioned well above the header. Drag the “Button” component outside the frame and play the prototype.


I came across the same issue and saw the solution you proposed here, which is very helpful and solves the “unwanted white space” at the top of the prototype.

However, by not having the unwanted white space at the top, somehow it creates another interaction glitch when I click to expand and collapse my accordion components (at the bottom of my page) ☹ It no longer retains the scroll position, but instead, for a nanosecond, it would scroll the page all the way to the top, before it anchors to the bottom of the page.

I tried troubleshooting it and the only way to get it to retain the scroll position is by keeping that unwanted white space at the top.


Hi All,

I am facing issue with unwanted white space when scrolling. All my cards are within the frame. Could you please help identify the issue.

Screenshots of the prototype and the outline mode is attached.


Thank you,
Vandana


Hey @Vandana_Vasudevan, thank you for reaching out! Would you be able to indicate on your screenshot where you see the white spacing?

Also do you have a background layer? If so, could you check if it has the same measurement as your frame. When the background layer is smaller than your frame size you would see a white spacing.

It would be easier for me to have a copy of your file so I can take a look at it. You can invite support-share@figma.com with “can edit” permission. Note that users with @figma.com emails on your team do not count towards your billing.

Thanks,
Gayani


Hi Gayani,

Thank you for your response. I was able to resolve this issue.

Thank you,
Vandana


Hey @Vandana_Vasudevan, glad to hear you were able to resolve this on your own. Feel free to reach out if you should run into any further issues, happy to help out!

Best,
Gayani


Hi all :) I have a similar unwanted white space appearing at the bottom of my homepage when vertical scroll is selected. Have resized the frame of the content to fit my device and never ran into this issue before.
Will leave access to my prototype here
 


Hi all :) I have a similar unwanted white space appearing at the bottom of my homepage when vertical scroll is selected. Have resized the frame of the content to fit my device and never ran into this issue before.
Will leave access to my prototype here
 

Hi. Just check clip content on content frame


Hi Nellya, 

Solved the issue, thank you so much <3


Hey! I just checked again and the white space is still there after I selected clip content. Is there anything im missing?

https://www.figma.com/design/l4QtaZo9pcWY0SQu4SrZYA/2025-Kemptown-bookshop-app---FINAL?node-id=3109-5255&t=KdjBqGLAZaOk4Tlg-1


Hey! I just checked again and the white space is still there after I selected clip content. Is there anything im missing?

https://www.figma.com/design/l4QtaZo9pcWY0SQu4SrZYA/2025-Kemptown-bookshop-app---FINAL?node-id=3109-5255&t=KdjBqGLAZaOk4Tlg-1

Hi. I checked your file — you didn’t select clip content on Content frame


Right, thank you so much!


The empty space above the header is due to the “Button” component. This component is in the screen frame and is positioned well above the header. Drag the “Button” component outside the frame and play the prototype.

THANK YOU FOR YOUR ANSWER!! i found that my hidden layers are accounted for the height apparently. when i deleted the hidden layer the scrolling stopped at the precise place where the container edge is.

SIGH thank you! i had to read 5 different ways to get rid of the extra space that was giving for my scrolling prototype.