Responsive layouts

Responsive design ensures that your design adjusts to different screen sizes, and is a critical part of modern web and app design

Before we start

Be familiar with Figma - know how its layout constraints work, fully understand auto layouts, understand the importance of nesting and element hierarchy, and know when to use Frames instead of Groups (hint: just about always).

Do not go any further until you have read this article, and have gone through the basic Buzzy 'getting started' guides.

What we're doing

Here are the basic steps we'll be covering here to make your Figma design responsive with Buzzy:

1. Understand Figma and Buzzy best practices and key concepts

2. Plan your design's responsive behaviours and needs

3. Test your design in Figma - resize, reposition and adjust as needed

4. Ensure your design is working in Figma before moving on to Buzzy

5. Turn on Buzzy responsive mode for your screens

6. Adjust Buzzy responsive settings as needed - min/max, overflow clip, scroll, wrap

7. Publish, test and iterate in a browser

Key concepts

Working with Figma and Buzzy is not like hand-coding an interface - it's easier, but comes with some ground rules:

• Neither Figma nor Buzzy currently support @media or device queries, or breakpoints

• One screen in Figma equals one app screen - you can't dynamically swap screens or views based on screen size or device type

• Figma's auto layouts are very similar to CSS flex layouts

• Figma's layout constraints (positioning, sizing etc) and auto layouts provide the basics of getting a design to behave responsively as the viewport (browser or device) resizes

• Figma lets you define 'fixed' position elements for your screens, such as navigation bars that will remain permanently in view

• Figma lets you define overflow and scrolling behaviours that Buzzy will use for your app

• Buzzy adds handy additional layout options such as minimum and maximum widths 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.

Got it? Right, lets dive in.

Plan your design

Assuming you already have a Figma design ready, or are working on one, stop. Take a deep breath and consider it from a layout perspective.

Here's some questions to ask yourself:

• What screen size have you designed at? Why?

• What should happen for users on other screen sizes?

• Does any part of a screen need to remain always in view?

• Which part (or parts) of the design should scroll if content is longer than the container?

• As the screen is resized (for instance, on different devices, or as a user rotates a device to horizontal), which elements should also get resized? Should they stop resizing after a particular point?

• As the screen is resized, where should elements be anchored? Is that floating button meant to stay a consistent distance from the left, or should it align to the right edge?

Depending on your design, some of the answers to these questions will be self-evident. Others might not become apparent until you do some testing.

Test in Figma

Figma's own layout constraints and settings get you a whole lot of responsive behaviours without leaving Figma. To get a quick idea of how your design resizes, just grab a corner of one of your screens in Figma, and drag it; as it resizes, what happens to your design elements?

Resize your design in Figma - what happens?

Adjust in Figma

Fix any issues using Figma’s layout controls in the right hand design panel — depending on the layer you select, adjust X and Y position and alignment, size and resizing options (for instance Fill or Hug for items in an auto layout).

Getting your Figma design behaving correctly in Figma itself is key to avoiding problems later. Only when this is done should you add Buzzy to the mix.

Add Buzzy settings

Required: Turn on 'responsive mode' in Buzzy

To make a Buzzy screen responsive, select the screen in Figma and turn on the 'Make screen responsive' toggle in the Buzzy plugin. This will also give you the option of setting a min- or max-width on the screen itself.

The first step - make the screen responsive via the Buzzy plugin

Because responsive design is such a tricky concept for novice users, Buzzy defaults to a 'static' layout for screens (meaning a screen is published as a container within the viewport with the exact same dimensions as the Figma frame). This is great for a quick demo or preview, but not for production. Here's a video explaining it.

Required: Turn on screen scrolling, and set overflow clipping and internal scroll on frames as needed

Buzzy supports overflow clipping and internal scrolling settings, including horizontal scrolls. You’ll need to define them on your Figma design using Figma's own settings, the same way you do for your Figma designs and prototypes. Check this article for details.

NEW: Buzzy now supports Figma's newly-released min-width, max-width and wrapping options. Simply apply these to your Figma design and Buzzy will render accordingly when published.

Optional: Set min and max widths on individual elements

Defining a Figma element as a Buzzy 'Layout' component lets you set a min- or max-width just on that element. This means it will resize as needed (in the published app) until it hits the min or max limit - even if it has a fixed width in Figma.

NEW: Simply use Figma's own min- and max-width options to apply this - no need for a dedicated additional Buzzy wrapper.

In the example below, we want the screen itself and the purple background to be full width, and the content to resize - on small screens it will shrink to fit the viewport, on larger screens it will remain fixed at 940px.

We can set min or max widths on specific elements

Optional: Turn on flex wrap

Buzzy 'Layout' components also allow you to turn on flex wrapping - this is the equivalent of setting CSSflex-wrap: wrap;and means nested elements will wrap as needed. Note this only works with Figma 'auto layout' frames.

NEW: Simply use Figma's own wrap option to apply this - no need for a dedicated additional Buzzy wrapper.

In the example below, we want the 3 feature items to wrap as the viewport shrinks. Note that the other auto layout settings such as the center alignment of elements still applies.

Toggle 'Enable flex wrapping' on...

... et voila! The items wrap as needed

Publish, test and iterate

Work through your design as needed and test as you go - publish your app with the Buzzy plugin, and test your key layouts and screens. Get the basics right in one spot before moving on to the next screen or section of your app.

Using the simple techniques above in combination, you can build up some fairly complex responsive designs, including forms that shift from horizontal to vertical layouts as needed.

Examples

Most of the Buzzy templates and files available in the Figma community are set up to be responsive. Here's some relevant ones:

Responsive sign up page

The landing page example shown above; includes flex wrap and a resizing signup form.

Responsive layout tests

An example app showing a bunch of layout tests to see how Figma's layout constraints, sizing and positioning settings translate to a browser via the Buzzy Figma plugin.

Overlays, modals & alerts

Working examples showing how Buzzy handles a variety of overlay or modal elements.