# Responsive layout checklist

## Learn the basics 

1. Follow the tips on [Buzzy article on Figma best practices](https://medium.com/buzzy-blog/8-figma-tips-for-ease-of-use-developer-handoff-and-production-bliss-694b5ed5364a)
2. Make sure you understand how to work with [auto layouts and constraints](https://www.uiprep.com/blog/ultimate-guide-to-mastering-auto-layout-in-figma) in Figma
3. Complete the Buzzy [getting started guides](https://docs.buzzy.buzz/getting-started-with-buzzy/getting-started-guide) to learn how to mark up and publish an app with Buzzy and Figma

## Apply what you learn  

1. Make sure your Figma design is laid out and structured according to best practices as per the articles above
2. Test your screen designs in Figma by resizing them: all your design elements should reposition, resize or scale as intended (within Figma)
3. Turn on **'Responsive Mode'** in the Buzzy Figma Plugin for all the screens that require it ([learn more](https://docs.buzzy.buzz/working-with-buzzy/responsive-layouts#required-turn-on-responsive-mode-in-buzzy))
4. Define **overflow clipping and scrolling** for all screens and elements that need it (via Figma's Design and Prototype panels) ([learn more](https://docs.buzzy.buzz/working-with-buzzy/responsive-layouts#required-turn-on-screen-scrolling-and-set-overflow-clipping-and-internal-scroll-on-frames-as-needed))
5. Buzzy now supports Figma's newly-released [<mark style="color:blue;">min-width, max-width and wrapping</mark>](https://help.figma.com/hc/en-us/articles/360040451373-Explore-auto-layout-properties#h_01HB9Q1371C7FP7ZPSEHDN1A9B) options you can apply to Figma autolayout frames. Simply apply these to your Figma design and Buzzy will render accordingly when published. \
   (Note: prior to these settings being available in Figma, Buzzy implemented its own responsive settings. Older Buzzy apps and files may still contain these.)
6. Publish and test each screen in a browser&#x20;