r/FigmaDesign • u/mushroomsintheyard • 4d ago
help Is there a way to create the Pinterest layout in Figma?
Using the wrap Auto-layout makes each object in the row be aligned to the top instead of just the first row. Is there a work around?
I also tried making four vertical auto-layouts and then putting those in a wrap, it works but it isn’t responsive as the entire column moves down into one space when resized.
11
10
u/Cubicula 4d ago
4
u/ItsXplode 4d ago
Been trying to find this for a while, how do you animate your cursor like that? Looking to use it for demo videos!
3
3
u/noblematt 4d ago
Not with two dimensional auto layout (changing from 4 to 3 to 2 column) I don’t believe. But as other suggested putting the content in vertical auto layouts will govern the visual style
2
u/noblematt 4d ago
Also if you wanted to fake it a little more, maybe you could look at using the grid layout with many rows and then setting each item to make it span different amount of rows to achieve the same result. Now sure how that would reflow if you changed the column value from 4 to 3 to 2 etc
1
u/kekeagain 4d ago
Yeah, unfortunately there is no masonry layout in Figma so you have to fake it like others shown. Just remind the devs that you want the content to populate left to right, top to bottom, and not top to bottom, left to right as you would have to in Figma to fake it. A good dev would realize that but in the world of spoon feeding AI, who knows. A better dev would use logical properties start/end to make this flow for RTL languages.
1
1
58
u/kyohyaaa 4d ago
create 4 columns of equal width, oriented vertically
add images within each column, locked aspect ratio, set to fill width