Responsive layout checklist

Use this to ensure your design works as intended in various systems and resolutions.

Learn the basics

1. Follow the tips on Buzzy article on Figma best practices

2. Make sure you understand how to work with auto layouts and constraints in Figma

3. Complete the Buzzy getting started guides 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)

4. Define overflow clipping and scrolling for all screens and elements that need it (via Figma's Design and Prototype panels) (learn more)

5. Buzzy now supports Figma's newly-released min-width, max-width and wrapping 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