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.