Shipped today in Figma auto layout
Auto layout's vertical flow can now wrap: objects fill a column to the frame's fixed height, then start the next one. Designers have faked it sideways since at least 2023.
Read the release noteToday's art direction
A SaaS feature launch page pulled in two inks, with the headline set in the column the print never filled.
The page sells one feature the way a product team would: a hero, a how-it-works run of steps, a live demo, a comparison table, and a get-started band. The treatment is a hand-pulled screenprint, so the hero art is flat navy and sky ink on grey paper, and the page ground is sampled from that paper so the print runs edge to edge with no frame.
Kode Mono sets every heading as a squared, engineered voice; Fira Sans carries the reading in a humanist hand. Each step opens with a numbered ink card lifted straight from the print.
Step one: Tooling
Figma's release notes add Wrap to the vertical flow. Objects stack from top to bottom, and when they reach the frame's height they carry on at the top of a new column.
The Figma Learn article says a fixed frame height is what decides where each column breaks. With wrap on you get two gaps: one between objects in a column, one between the columns themselves.
A 2023 community thread asked for wrap that fills height before width. The answer people passed around took five steps: rotate the parent frame by minus 90 degrees, flip it, then rotate every child back and flip it the other way.
It worked, and it turned every later edit into a puzzle. Today one setting replaces it.
Step two: Technique
Figma's own documentation maps vertical wrap to a flex container with column direction and wrapping switched on, the pair MDN documents under flex-wrap. The browser has the same condition as the canvas: give the container a height, or nothing ever wraps.
That makes the handoff honest for once. A frame with a fixed height and wrap on is a spec a developer, or a coding model reading the file, can write in four lines.
Objects keep their auto layout order and move to the next column only when the current one is full, so a short card never slips up into a gap. For balanced text columns use CSS multi-column; for tiles of mixed heights that pack tight, you still need a masonry layout.
.stack {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 222px; /* columns break here */
gap: 8px 10px; /* in column, across */
}
| Pattern | Fills | Breaks when | Order | In CSS |
|---|---|---|---|---|
| Horizontal wrap | Rows, left to right | A row reaches the frame width | Kept | flex-flow: row wrap |
| Vertical wrap | Columns, top to bottom | A column reaches the fixed height | Kept | flex-flow: column wrap + height |
| Multi-column | A set number of columns | Content is balanced across them | Kept, split evenly | columns: 3 |
| Masonry | The shortest column next | Never; items pack into gaps | Changed by height | Not what vertical wrap does |
Vertical wrap is not a masonry layout.
Also today: Workflow
Adobe has begun a global rollout of tools from Photoshop, Lightroom, Express, and Firefly inside Gemini, on every Gemini plan. You connect Adobe under Personal Intelligence, then ask for photo fixes, social resizes, or a customized template in the conversation.
The same post adds Acrobat to Adobe's plugin for Claude, which Adobe counts at more than 80 tools. The part designers will feel is a layer-based editor: when the model's Express draft is close, you step in and move the layers yourself instead of prompting again.
Borrow this pattern
For a full-bleed hero that never needs a scrim, brief the image with a clear zone the size of your headline block, like the column this print never filled. Sample the page ground from the art's paper so the image bleeds into the page, and anchor the text to a line in the art so it holds position as the viewport changes.
Use it on launch and landing pages where one image carries the idea. Keep it honest: check contrast on the zone at every width, and on phones let the image sit above the type instead of shrinking the slot.
Prompt Lab: get started
Paste this into your design or build tool to get a feature launch page with a full-bleed two-ink hero, a headline slot, and numbered step cards.
Works in
Build a SaaS feature launch page for one new feature, treated as a two-ink screenprint poster. Hero: a full-bleed image, edge to edge, 3:2. Commission it as a flat screenprint in navy #13223F and sky #559FD1 on grey paper #E4E4E4: cards stacking in columns, with the right 40% left as open paper and a thin navy rule near the bottom. Set the page background to the same #E4E4E4 so the print bleeds into the page. Place a bordered launch stamp (issue, date, read time as label rows), a mono kicker, the H1, a two-sentence deck, and one navy button directly on the open paper, anchored above the rule. No scrim, no gradient. Under 900px, stack the image above the text. Sections: a how-it-works run of three steps. Each opens with a 96x58 rounded ink card holding the step number (navy, then sky, then pale sky #C4D8E4) beside a small mono label and the H2. Body in a 4fr/3fr grid: news items with hairline dividers on the left; a pale #F2F3F5 panel on the right holding a real demo, image, or spec list. Add a comparison table, one italic pullquote, and a dark navy get-started band. Type: Kode Mono 700 for headings and labels, Fira Sans 400 for body at 19px, line-height 1.7, 60 to 70 characters per line. Links in #17386F with a sky underline. Guardrails: WCAG AA contrast everywhere, including text over the image; no neon, glow, or gradients; radius 6 to 12px only; no fake UI or unreadable text in images; hover and focus states on links and buttons with a reduced-motion guard; a faint paper-grain overlay is the only texture.
Field note
The rotate-and-flip trick was a clever patch over one missing property. When a design tool makes you fake something the browser already does, that gap is usually a release note waiting to happen.
Sources