Building TokenIgnite: Why I Built a near Real-Time Figma-to-Code Validation Layer for AI Workflows

#webdev #designsystem #ai #figma

It started with a simple question I asked myself: What if changes to Figma variables were visible in a running web app just as directly as tweaking CSS variables in browser DevTools? Having built a real-time application years ago, my mind immediately went back to that architecture. What would happen if you combined a real-time sync layer directly with CSS variables and Figma? On the same day, I sat down and built a working proof of concept in about eight hours.

With a bit of distance, though, I had to ask myself an honest question: Who actually needs this nowadays?

After all, Figma already offers Code Connect, MCP servers, and Code Layers. Design is being generated faster than ever, and it is translated into code faster than ever. If design and development are increasingly becoming one AI-driven workflow, why would anyone still need to inject tokens at runtime?

The Problem: AI Design Drift and Static Pipelines

In the weeks and months that followed, I kept thinking about how AI is changing software development. Layout code is generated in seconds by LLMs, but AI models lack visual awareness of the running application. The result is design drift: paddings are off, color modes break, and theme boundaries get blurred.

At the same time, traditional token pipelines force teams to wait on build processes just to validate minor visual tweaks.

I started testing a new approach: What if we made design decisions in the live runtime first? What if designers, developers, and AI agents could test visual changes live in the running app before committing anything to a repository or single source of truth? Instead of auditing AI code line by line, a runtime-first approach could act as a live safety boundary for AI-generated UI.

TokenIgnite is my attempt to explore this workflow.

How Runtime-First Validation Works

Instead of relying solely on traditional build pipelines for token updates, TokenIgnite uses continuous injection. It streams Figma variables directly into local development environments or closed staging servers in near real time.

Test Without Code Changes: Apply updates live in the browser while repository files remain untouched until you are ready to export.
Live Safety Boundary for AI: TokenIgnite reads the code syntax directly from Figma. If custom properties are missing, it generates them dynamically and writes them back into the code syntax of the Figma file. When an LLM connected to the Figma MCP Server generates UI code, it receives those properties directly through the MCP Server. You simply instruct the AI via prompt to use them strictly within the component scope. TokenIgnite then injects those properties directly into the root and theme scope of the live app. This makes TokenIgnite both the foundation for AI code generation and the final validation layer in the runtime.

Short-Circuit Feedback Loops: Skip build pipeline boundaries during exploration. One variable update streams across connected local and staging environments worldwide so designers, developers, and AI agents can co-iterate live.
Clean Native CSS Export: When you are ready, Figma variables compile directly into clean CSS custom properties.
Zero Production Footprint: It acts strictly as a dev-only dependency (npm i -D tokenignite) with zero impact on production builds.

Behind the Beta: Four Months of Solo Development

Building TokenIgnite from a late-night thought into a functional SaaS platform took about four months of solo product work. To give a quick behind-the-scenes look at the scope:

Ownership: Sole ownership end to end (idea, concept, visual identity, UX/UI, engineering, infrastructure, and vision).
Codebase: ~61K lines of code in TypeScript/JavaScript and CSS (~85% TypeScript) across ~1,000 Git commits.
Architecture: Monorepo architecture including a Figma plugin, npm SDK + CLI, Express/Firebase backend, and Next.js website & documentation.
Infrastructure: Real-time live sync over Firebase, workspace management, local/staging/production environments, GitHub Actions CI, Vercel, Railway, and automated releases.

Try It Out & Share Your Feedback

I am releasing the Public Beta to find out whether other developers, design system engineers, and designers actually find this runtime-first approach useful in their daily workflows.

Your actual usage and honest feedback are the most important benchmark for if and how TokenIgnite will evolve.

Website: tokenignite.live
The Story: tokenignite.live/the-story
Figma Plugin: TokenIgnite on Figma Community
npm Package: TokenIgnite on npm

Setup Steps

Install the Figma Plugin and npm Package (npm i -D tokenignite).
Connect your TokenIgnite File ID in tokenignite.config.json.
Set your active design contexts (e.g. data-ti-context="color-modes:dark-mode") on your root element.
Update variables in Figma or via Figma’s Design Agent and watch the app react across connected clients.