Masonry / A Figma plugin by RAIKEN

Uneven cards. An orderly Figma grid.

Masonry arranges layers and frames of different heights into columns. Create a Pinterest-style layout for a gallery, card feed or moodboard, with control over columns and spacing.

Open Masonry in Figma ↗ How it works ↓

Masonry gallery example showing cards with different heights arranged in three columns. — Example grid from the official Masonry gallery. View the official gallery ↗

Let the content keep its shape.

Image galleries

Arrange portrait and landscape content together in a column layout.

Card feeds

Explore layouts where text and image content make each card a different height.

Moodboards

Bring references, notes and ideas into a grid while retaining their varied proportions.

Getting started

Build a masonry layout.

Open Masonry from its Figma Community page.
Select the layers or frames you want to arrange.
Choose the columns and gaps, then apply the masonry layout to your selection.

A few useful details

What makes this a masonry grid?

Items stack in columns without needing equal heights or a rigid row structure.

Does it replace Auto Layout?

No. Masonry is intended for visual arrangement and layout exploration. Use Auto Layout when your design needs its sizing and layout behavior.

Can I adjust the spacing?

Yes. The plugin provides controls for the number of columns and the horizontal and vertical gaps.