Responsive layout checklist
Use this to ensure your design works as intended in various systems and resolutions.
Last updated
Use this to ensure your design works as intended in various systems and resolutions.
Last updated
Follow the tips on Buzzy article on Figma best practices
Make sure you understand how to work with auto layouts and constraints in Figma
Complete the Buzzy getting started guides to learn how to mark up and publish an app with Buzzy and Figma
Make sure your Figma design is laid out and structured according to best practices as per the articles above
Test your screen designs in Figma by resizing them: all your design elements should reposition, resize or scale as intended (within Figma)
Turn on 'Responsive Mode' in the Buzzy Figma Plugin for all the screens that require it ()
Define overflow clipping and scrolling for all screens and elements that need it (via Figma's Design and Prototype panels) ()
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.)
Publish and test each screen in a browser