Hi Figma Team,
I am writing to suggest the addition of a native Masonry Layout feature within the current Auto Layout system, specifically as an extension of the "Wrap" property.
1. The Current Problem: The current Auto Layout "Wrap" feature is incredibly helpful, but it only wraps items horizontally (Rows). When designing interfaces with cards of varying dynamic heights—such as complex enterprise dashboards, product catalogs, or dynamic data grids—we cannot automatically create a vertical masonry effect.
The current workaround requires manually dividing items into separate vertical columns (Vertical Auto Layout) and grouping them in a horizontal parent container. This method is rigid, time-consuming, and breaks the logical flow when rearranging elements or demonstrating dynamic data flows in prototypes.
2. Proposed Solution: Introduce a "Masonry" (or "Vertical Wrap / Pack") behavior option when Auto Layout Wrap is enabled. This feature should allow elements (with Hug contents height) to automatically flow into the next available vertical space, dynamically adapting to the varying heights of the components, similar to how CSS Masonry works.
3. Value & Impact:
-
Design Efficiency: Drastically reduces the time spent manually maintaining and re-balancing rigid column structures when content changes.
-
Better Developer Handoff: Aligns the design model perfectly with actual frontend development practices (CSS Masonry, CSS Columns, or Flexbox workarounds), making handoff specs much more accurate.
-
Enterprise & Data-Heavy UIs: Greatly empowers designers working on complex systems, enterprise applications, and content-rich platforms where dynamic data visualization is crucial.
Thank you for constantly improving the tool!