Ymax 2.0

Context

Ymax 2.0 is the platform rebuild currently being prepped for self-service launch at Cannes 2026. Most of the design work was already done — Ymax 1.0's Figma library covers the patterns, flows, and components we're carrying forward. What changed is the build process. Instead of designing in Figma and handing off to engineering, the team is now working directly in code through Claude Code, iterating against a live Vercel app.

I joined this workflow as the design contributor on the audience module. I built the companion audience flow from creation through attach, porting Ymax 1.0 designs into the new codebase and refining them as needed across desktop and mobile breakpoints.

What follows is that flow, and what changed about how I work.

The problem

Designing in Figma, shipping in code

The Ymax 1.0 audience flow lived in Figma, where components, layouts, and interaction states were all spec'd out. Porting it into Ymax 2.0 meant rebuilding it as working code in the live Vercel app, with the layout, behavior, and responsive states resolved against live content.

The audiences page is where users find and manage every companion audience they've built, filterable by account. From here, users can create a new audience, or open an existing one to attach it to a deal or campaign.

The creation flow begins by opening a drawer where users name the audience, select an account, and pull components from four tabs: deals and campaigns, line items, supply packages, and 3rd-party data segments. Each component gets added to the components panel on the right, working like a shopping cart for the user's selections.

The components panel was the most interesting design challenge across breakpoints. On desktop and tablet, it has room to live as a fixed right column. Users can see what they're building as they build it. On mobile, that two-column layout doesn't work, so components needed to be reachable without taking permanent screen real estate.

This kind of decision is where the AI-coding workflow really takes off. In Figma, prototyping responsive behavior like this means building separate frames per breakpoint, layering interactions and animations on top, spec'ing the logic for engineering, then iterating across all of it when feedback comes in. In code, I can prototype the bottom-sheet behavior live, see how it feels against the actual content, and adjust without a handoff cycle. What used to take hours or days in Figma now takes a couple of hours in code, working directly against live data and live breakpoints.

The bigger shift is what this opens up as a designer. Things designers would have skipped prototyping in a Figma-only workflow are now a conversation with Claude away from being real, functional interactions. The handoff to engineering becomes a review of running code, not a translation exercise.

Once the audience is created, users can attach it to a deal/campaign and line item directly from the success state.

What shipped