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. Use the Buzzy Figma Plugin to define min and/or max widths on screens that need it, or on individual elements via the Buzzy 'Layout' component (learn more)

6. Use the Buzzy Figma Plugin to enable flex wrapping on all auto layout elements where you need the child items to wrap (learn more) NEW: 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.

7. Publish and test each screen in a browser