Layout Tool

Creating Layouts

To start, you can select the Layout tool and pick from one of the four presets: Rows, Columns, Wrap and Grid. If you are already familiar with Framer, the first three use "Stack" and the last one uses "Grid" functionality.

With a preset selected, you can click-and-drag to draw a Layout top of your page. Here, we selected Rows and then drew it on top of our Desktop breakpoint. Notice how it’s pinned to the left and right side automatically, and scales down nicely on Tablet as well.

Adding Frames

You can add new Frames to any Layout by clicking the Plus icon on the Canvas. It will add Frames to your Layout, and they will automatically try filling the available space. They are tinted blue by default, but you can customize and style these to your liking. As they are Frames, you can also draw or paste layers on top of them.

Customizing Layouts

After drawing your layout, you can always customize the layout (and even turn it into one of the other presets, manually) via the property panel on the right. For example, if you inserted Rows but later want Columns, you can still change the Direction property.

This means you can also override properties and layouts per breakpoint. Often times, you might want a horizontal layout on larger viewports, like on your Desktop breakpoint, but a stacked (vertical) layout on smaller viewports, like Tablet and Phone. If you set properties on your Desktop breakpoint, the other breakpoints will inherit these changes. But if you customize properties from the Tablet breakpoint, for example, it will be an override. So if you wanted to flip the direction on tablet, you can simply select the your Layout, and flip the direction via the property panel.