<aside> 💡 Warning: In order for the layout to be uploaded with maximum quality, you need to adhere to a certain set of rules that are important for exporting to code. These rules are easy to understand and do not require additional study. When you learn how to do such a layout you will be able to create any application you want. Good luck with your new material 🤓.

</aside>

0. General rules

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5ae68716-2de3-4e3e-b610-97e6f32de962/Rule_3.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/696249f8-78ef-4af3-86a6-9b6e1d5e1674/Rule_2.png

1. Content building rule


Scroll Bar

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c14ddb83-3bff-4390-a7a7-cbc4a77cca9b/Rule_4.png

<aside> âš™ Example in Figma

</aside>

🔥Examples Sizze

  1. Create a set of cards

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/43e4de51-6ec0-4244-9588-95c3f1808c32/Rule_5.png

  2. Combine into cards in auto layout and indent on the left and right sides

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3fd57b21-e74f-492e-b16d-e944c2b31a77/Rule_6.png

  3. Wrap your frame again with auto layout in a frame that clearly sticks to the borders of the screen and make the horizontal scroll value

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fc7b744f-b543-4af2-80d0-1ab6d252590d/Rule_7.png

  4. The result should have been

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ee95a56c-095a-41b4-a3a8-1e457d1d10d2/Screen_Recording_2021-06-27_at_23.05.38.gif