Figma Component / Layout
Masonry
Masonry manages content with different heights.
Documentation
What is Figma Masonry?
Masonry is a layout pattern that arranges variable-height content cards in compact columns. It reduces unused vertical space and helps content-heavy views feel efficient and visually balanced.
When to Use Masonry?
Use Masonry for feeds, galleries, and discovery pages where cards have different heights due to mixed text and media lengths. It is useful when strict row alignment is less important than dense content presentation.
How to Design Masonry?
Define column count behavior by breakpoint and maintain consistent gutters between cards. Test with highly varied content lengths, loading placeholders, and edge cases so the layout remains stable during dynamic updates.
How Masonry Component is Designed in Ant Design System for Figma?
In Ant Design System for Figma, Masonry guidance emphasizes token-based gaps, scalable columns, and reusable card building blocks. Designers can prototype uneven-content layouts while preserving Ant visual rhythm and spacing logic.
Related components
- Divider
Divider component in Ant Design of React helps to separate items from each other.
- Flex
Flex in Ant Design of React is a component that helps to align items vertically and horizontally.
- Grid
Grid in Ant Design of React is a component that helps to align items horizontally.
- Layout
Layout manages the overall arrangement and organization of elements on a page.
This component is part of the Ant Design System for Figma. Browse Ant Design Figma templates or view kit pricing.