Building a Living Documentation Tool (And Learning Some Hard Lessons)

So I've been tinkering with this idea for a while now - what if design tokens didn't have to live buried in some JSON file that only developers ever see? What if designers could actually play with them?

With the Automator script no longer working due to Figma's API changes, I decided it was time. That's how I ended up building this Living Documentation Tool. It's a visual preview for design tokens where you can click on color swatches, get a preview of the typography, and actually see spacing in action. No more digging through Figma files or squinting at code.

The whole setup

I went pretty simple with the tech stack. Used Tokens Studio to create and export the JSON (because who has time to write that by hand?), then jumped into Framer to prototype the whole experience. I'm all about that clean light theme life - give me green text on white backgrounds any day.

The fun part was building this custom React component that takes boring JSON like color.base.green.value and turns it into something you can actually see and interact with. I even played around with the idea of utilizing the Style Dictionary to see if I could auto-convert all the token exports.

Where everything went sideways

Okay, real talk - this project humbled me pretty quick:

You know how tokens can be organized like folders within folders? Yeah, it didn't appreciate that complexity at all. The parser freaked out when it hit those deeply nested token structures.

And Framer, while amazing for prototyping, started showing its limitations when I wanted to actually share this thing with other people. Great for demos, not so great for real-world usage.

I had to take the whole demo offline until I figure out proper hosting. Not something I wanted to do, but hey - that's how you learn, right?

Why this matters

Here's the thing - everyone wins when tokens are more accessible. Designers get to browse an interactive catalog instead of hunting through files. Developers can grab JSON or peek at CSS variables without jumping between tools. And stakeholders? They finally get to see how all those abstract color values and spacing rules actually work together.

If you're hiring and looking for someone who gets excited about token architecture and cross-team tooling... well, you're looking at one right here.

The coffee situation

Look, I'll be straight with you - I'm not cranking out production React code every day. My thing is design systems and making complex token stuff make sense to humans. But to keep this project moving and maybe get some AI help with the trickier coding bits, I could use a little support.

If this sounds interesting and you want to help fuel the token revolution, feel free to grab me a coffee: https://buymeacoffee.com/iamsteelen

Every little bit helps me experiment with AI tools and figure out better hosting so I can get this thing back online.

What's coming next

I've got some big ideas for this tool once I sort out the technical hurdles:

Fix that parser so it doesn't choke on complex token structures. Rebuild the whole UI outside of Framer so it's actually usable by real people. Add proper theme switching - light, dark, maybe some wild experimental palettes just for fun. And I'm really excited about this spreadsheet view idea where you could edit tokens in a table and see the changes happen instantly.

It's been a wild ride full of late nights, "aha!" moments, and plenty of facepalm debugging sessions. But I'm convinced there's something here - tokens shouldn't be this mysterious thing that lives in developer land. They should be accessible, visual, and fun to work with.

If any of this resonates with you, let's chat! Or just send some coffee my way and watch what happens next. Thanks for reading, and stay tuned for more token adventures.