claire vo
← all AI workflows

Make a transparent livestream overlay in Figma with Codex

The actual How I AI livestream placement preview, with a YouTube callout at the bottom of the frame.
make-a-transparent-livestream-overlay-in-figma-with-codex.png
The actual How I AI livestream placement preview, with a YouTube callout at the bottom of the frame.
Codex + Figma + Transparent PNG export

I needed a YouTube callout for a How I AI livestream. I had Codex work in the existing Figma brand file and make the missing graphic using the type, colors, and treatment already there.

The detail that mattered was the export. I wanted a transparent 1920 × 1080 image with the callout already positioned near the bottom of the frame. A tightly cropped PNG contains the graphic, but I would still have to position and scale it again in the streaming layout.

With the full-size canvas, I can add the PNG as an image source at its original size and the callout lands where it was designed. Codex exported the transparent version and a placement preview so I could check both the actual file and how it would sit over a stream.

This is a useful small design task to hand off: give the agent the existing brand file, the one thing that is missing, and the dimensions of the final destination. The deliverable should be ready to use in that destination, including the empty space.

Download the full-size transparent PNG.