# Build a masonry layout as a native Figma grid

> Turn on Use Figma grid layout before you apply, and Masonry builds the arrangement as a real Figma grid auto layout instead of loose positions.

## Goal

Get a masonry arrangement that lives in Figma’s own grid layout, with fixed column tracks and a frame that hugs the grid.

## Before you start

- Masonry Pro: Use Figma grid layout is a Pro feature.
- A frame, group or section with layers inside, or several layers that share the same parent.

## Steps

1. **Select the layers** Select the container, or select the layers you want in the grid.
2. **Turn on Use Figma grid layout** In Masonry, turn on Use Figma grid layout below the column settings. Without Pro the switch shows a lock instead; clicking it opens Supporter Feature with Get Pro.
   ![Masonry with a Pro licence: Use Figma grid layout switched on below Auto columns.](https://raiken.io/assets/kb/masonry/masonry-figma-grid-layout/grid-layout-on.png)
   ![Without Pro: Supporter Feature explains Figma Grid Layout, with Later and Get Pro.](https://raiken.io/assets/kb/masonry/masonry-figma-grid-layout/grid-layout-locked.png)
3. **Set columns and gap** Choose the gap and the columns as for any masonry layout. The gap becomes the grid's spacing.
4. **Apply** Click Apply Layout. A frame becomes a Figma grid. A group or section is replaced by a frame with the same name, and several separate layers are wrapped in a new frame called Masonry Grid. Each item fills its column’s width and spans as many grid rows as its height needs.

## Tips

- Frames Masonry creates have no fill, so the grid sits on whatever is behind it.
- Re-applying to a grid frame first resets its grid, so the items go back to their natural sizes before the layout is worked out again.

## Result

A frame in Figma’s grid layout with your items in masonry columns and the frame sized to the grid.

## If something goes wrong

- **"Native Figma Grid Layout is a Pro feature. Upgrade to Pro to unlock this feature!"** -> The option needs Masonry Pro. Without it, turn Use Figma grid layout off and apply a regular masonry layout.
- **I selected layers inside an existing Masonry grid and nothing new was wrapped.** -> That is on purpose: when the parent is already a Masonry or Figma grid, Masonry re-applies the layout to that parent instead of nesting another frame.

## Common questions

### What is the difference between a regular masonry layout and the Figma grid option?

A regular layout places each layer at an exact position on a frame without auto layout. The Figma grid option builds Figma’s own grid auto layout: fixed column tracks, items set to fill their column’s width, and a frame that hugs the grid.

### Why was my group replaced by a frame?

Figma's grid layout only works on frames, so Masonry moves the group's layers into a new frame with the group's name.

## Related guides

- [Get started with Masonry: select, preview and apply a layout](https://raiken.io/kb/masonry/masonry-create-grid): Select a frame or a few layers, check the preview, then click Apply Layout. Masonry puts every layer in the shortest column.
- [Set the columns, gap and column widths of a masonry grid](https://raiken.io/kb/masonry/masonry-columns-and-gap): Choose auto or fixed columns, set the gap, and use Advanced options for column widths, hidden and locked layers, and layer order.

---

Source: https://raiken.io/kb/masonry/masonry-figma-grid-layout (Masonry help centre). Reviewed: 2026-10-30.