An OG Card Drawn in JSX, Tuned in Figma

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!