An OG Card Drawn in JSX, Tuned in Figma

This card isn't just an image file. XPLORED's OG cards don't come out of a design tool like Figma as an export. Each card is a JSX component built with next/og (Satori), and the server draws a fresh 1200×630 PNG on the spot whenever a request comes in. So change a few lines of text, push a deploy, and the cards shared on Slack or X (formerly Twitter) quietly update themselves to the latest version. No making images by hand and uploading them to a bucket — and no stale old card floating around out there.

First draft: "A design tool? Let me try without one."

At first, the card was drawn straight in code without ever opening a design tool. Flexbox for the layout, plain divs for the orbit lines, and a radial gradient for the glowing brand-green light. Satori supports only a very limited slice of CSS (no grid, no filters — pretty much only display: flex works), and paradoxically, that constraint became the design style. What came out was clean, crisp geometry you can draw with just a few lines of style props.

Then I ended up opening Figma anyway .

But "no design tool, code only" turned out to be the wrong idea. How far the orbit ring should bleed off-screen to feel natural, whether the badge pulls the eye better in brand green, whether the subtitle even deserves to be there — for questions like these, looking at it and feeling it out was far faster than typing code. So I opened Figma and got into the fine-tuning: dropped the subtitle, switched the badge to green text on a green tint, and pinned the decoration to the top-right corner. Figma here wasn't for building a source file — it was a visual editing space, somewhere to lay the design down for a moment and try things.

Bringing the design back into code

Once the design settled in Figma, it moved back into code. Not by eyeballing a screenshot and approximating — the SVG exported from Figma was read directly, pulling the exact opacity and gradient-stop values. (Outer ring at 10% opacity, inner ring at 25%, and the glow fading 30% → 10% → 0%, down to the numbers.) A fun little issue surfaced along the way: Satori sizes radial gradients against the farthest corner by default, so the light that should spread in a circle kept getting squashed into a square. One closest-side option cleaned that right up.

And that closed a rather beautiful loop.

JSX draft → fine-tune the details in Figma → back into JSX code

The code remains the one absolute source of truth, and the PNG still never needs to be exported. And yet every design change is left behind, transparently, as a code diff — ready for review!