<aside> 💡 The correct structure of layers: One of the most important steps is to create the right layer structure, the quality of the code you get when you export the design to code depends on this. You should use a nested structure where you alternate between frames for scrolling and frames with auto layout

</aside>

1. Examples by Sizze

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d19f30d2-6e99-49da-bba1-ddd2b74dbd4a/Frame_6580.png

Do: use the scroll area on the topmost frame. Set scroll value

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1c81545c-ea74-4ea2-b3c5-d85162f274d9/Screenshot_2021-05-11_at_22.49_2.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8064a277-d1d2-4d16-a13a-9fe8974d72d6/Frame_6580.png

Do: set the border at the top of the auto layout block for horizontal scrolling

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ce23792d-5469-4c9c-b768-0b9503aeccd8/Screenshot_2021-05-11_at_22.49_3.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8eb6bf65-7002-474d-a86e-933367af228a/Frame_6579.png

Don’t: stretch the height of the main screen unit screen

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/43cd5682-d5cd-4f97-8c39-d0692b91afc5/Screenshot_2021-05-11_at_22.49_1.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c3bb9aeb-d4d7-4950-8806-97465df40148/Frame_6579.png

Don’t: stretch the border of the scroll area

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/43cd5682-d5cd-4f97-8c39-d0692b91afc5/Screenshot_2021-05-11_at_22.49_1.png

Example in Figma

🔥Examples Sizze