Skip to main content
Question

Page/frame alignment


Richard_Moore

trouble getting a frame/page to vertically align to the top of the window (phone) when loading. New page loads in the middle of the screen/content. Looked for answers online - too many unrelated search results. Seems like there is a simple command somewhere I’m just not seeing. Using Figma online version, MAC OS.

demo:

Figma – 3 Mar 22

page 2 of this project comp “EXCITE ME” button

4 replies

Brian_Saunders

Hi Richard, this is just the default behavior of the prototype view if you haven’t opted to use a device frame, and it can’t be changed. If the frame you’re showing is not as tall as the canvas it will appear centered in the view. Unless there’s a specific reason why you’re not using a phone device frame, I would just turn that on so that all your content is clipped properly. When I’m designing a desktop view of a web app or something, I like to set all my frames to the same height to simulate a consistent viewport size for my prototype viewers, and that would also be an option here if you don’t want to use a phone frame for this prototype.


Richard_Moore

thanks. This is a first project for an online class so I may have missed some basic settings early on. I can see the device settings options - initially I set that to iPhone 8 but subsequent frames were stretched vertically to work on content. Will futz around with it and see if i can get it to behave. thx again.


Brian_Saunders

Just FYI, if you set it to iPhone 8, you don’t need to have your design frames set to 667px tall. You can make them as tall as you want in the design view, and they will be cropped appropriately in the prototype view. If you need a sticky header or footer you can do that as well in the design view. Just let me know if you run into any issues 😃


Richard_Moore

Well, that means I have something out of whack. Let me do a little digging. thx


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings