I’m working on designing a website layout and I want to create an image gallery that has a nice spread-out appearance. I’ve been trying to figure out how to use auto layout in Figma to make my images distribute evenly across the container.
Right now when I apply auto layout, all my images just stack up in a row or column. What I really want is for them to be positioned more naturally - some aligned to the center, others to the left or right side of the frame.
Is there a specific setting in auto layout that lets me control how images are distributed across the available space? I want them to fill the frame nicely instead of being bunched together. Any tips on achieving this kind of gallery effect would be really helpful.
for sure, auto layout ain’t ideal for galleries. try using constraints to position your images more freely. pin them to different sides of the frame, and center a few. gives way more flexibility compared to sticking to auto layout.
Auto layout works best when you control direction and spacing, not free positioning. For galleries, I make multiple auto layout frames - one main vertical container, then horizontal frames inside for each image row. Set your spacing between items and use distribute options to control how images spread in each row. The trick is getting alignment right - center the main container and use space-between for individual rows. This gives you natural distribution. Way more reliable than forcing auto layout to act like absolute positioning, which it wasn’t built for.
i feel ya - auto layout can be a bit limiting for galleries. u might want to consider using grid layout instead. just set up a frame, change it to grid, and adjust the rows/cols to get that nice spaced-out look. good luck!
You’re facing one of the limitations of auto layout—it thrives on linear arrangements rather than the organic feel typical of galleries. To achieve the layout you desire, start with auto layout for the overall structure to maintain consistent spacing. Then, create duplicates of this frame and switch to absolute positioning for the specific placement of images. Use the spacing values from the auto layout as guides. This mixed approach allows for both flexibility in image placement and a structured layout. It may require more effort, but the results are worth it compared to forcing auto layout into a role it isn’t meant for.
You’re talking about a masonry gallery layout - auto layout hates these because it expects predictable spacing. Hit the same wall building a portfolio site last year. Here’s what worked: I built a component system using auto layout frames as building blocks, but nested them smart. Made different sized image containers as components, then mixed them into various auto layout rows. Some rows got one big image, others got two or three smaller ones. The trick is planning your image sizes upfront and creating templates for different row setups. More work initially, but once you’ve got the component library ready, you can mix and match for that natural gallery feel without losing auto layout’s responsive perks.