Skip to main content

Hey community! Just got into Figma for a week and loving it.


I made a short video to demonstrate (sorry I had to use my laptop camera in order to show how it looks on 2 different phones): https://youtu.be/lW4-uYgZZyg


I was blown away how you can design a mobile website and show up changes in realtime just by copying the url onto my phone’s chrome browser. But now I’m running into a problem with being able to see my design in the same way from one phone to another.


Basically, I designed it on “Large Android” with 360x700px screensize. When I view it on galaxy, it looks perfect of course. But when I view it on an iphone (big or small), the scrolling height is resctricted, meaning the scrolling stops before some content at the bottom shows on the screen. I understand it’s because in my original design, the frame for the elements that are scrolling is set for one phone size and not another.


So, does this mean Figma is just limited to being able to demonstrate your design on a per-phone-screensize basis? Or is there a way to make it responsive in height scrolling across all phone sizes?


Thanks!!

You can achieve a more responsive design using constraints, auto-layout, or a mix of both.


Below is an example where I mix both. I have some content set as auto-layout with the elements inside it set to “fill-container”. This makes it so that as I scale the width of the content frame the inner elements scale with it. And auto-layout is great if I want to quickly reorganize those inner elements.


I then put that content within a frame and set that content’s constraints to “left-right”. This way, as I change the frame’s size, the content will adjust accordingly. I also set the main frames’ scrolling behavior to “vertical”, so the content inside will scroll.


This is just one way, as mentioned there are other ways to achieve the same using just auto-layout or constraints.




Hey Nate, thank you so much!! OMG this was driving me nuts, even though it’s only a prototype, I just knew there had to be a way lol.

Glad to help! Best of luck along your Figma journey, it is a great tool.

Reply


Terms & ConditionsCookie settings