# 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](/getting-started-with-buzzy/getting-started-guide.md) 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](/working-with-buzzy/buzzy-for-figma/responsive-layouts.md#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](/working-with-buzzy/buzzy-for-figma/responsive-layouts.md#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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.buzzy.buzz/working-with-buzzy/buzzy-for-figma/responsive-layout-checklist.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.