Multi-tenant platform bridging Figma and code
Figma library becomes a living design system governed, branded, and always in sync.
role: design engineer
the problem
A design system that lives in Figma has nowhere to live for everyone else.
For the past five years I've designed and delivered design systems for clients. They're born in Figma, but Figma is where you make a system, not where a team consumes one.
Developers need tokens they can read and copy. Stakeholders need to see what exists, what's live, what is under testing and what changed this week. And every client needs their own branded, authoritative home, not a shared file and a folder of PDFs. Left alone, the "source of truth" fragments across Figma pages, hand-off docs, and Slack threads, and the gap between design and build quietly widens.
All Design Systems answers one question: where does a client's design system actually live for everyone who isn't in Figma?
my role
One person set the type scale and wrote the auth layer
I designed and built AllDesignSystems end to end — the product and its interface, the design-system architecture beneath it, the Next.js application, the Figma integration, the security model, and the deploys. It's design engineering in the truest sense: the design decisions and the code that enforces them came from the same hands, so nothing was lost in a hand-off that didn't exist.
how it works
Sync once, present the design libraries behind a contract that hides the source
Each client receives a dedicated environment tailored to their brand identity, featuring custom colors, logos, and typography. By leveraging the Figma API, I synchronize their design assets, converting them into a structured JSON format for secure storage. This setup allows the application to present the design system in an intuitive interface, ensuring easy access and usability for all team members, regardless of their technical expertise.
The decisive detail: nothing on the presentation side knows the data came from Figma. It only knows the contract. That single boundary is what lets the platform grow beyond Figma later.
Token browser: colours, type and spacing across modes, with live values.
Accessibility checks: colour-contrast and a11y checkers built into the system, not bolted on.
Per-tenant identity: accent, logo and custom fonts brand each client's space.
Changelog: every sync is recorded and registers additions, removals and status-changed.
Global search: jump to any component, module or token instantly.
Guidelines & skills: The platform uses a set of easy-to-follow rules to optmise sync and stores design skills in one place. The .md files helps AI work smoothly with each client's design system.
The next horizon (exploration)
When code is the source of truth, Figma keeps what it's best at
Today, Figma is the source of truth and All Design Systems renders a representation. But the architecture points somewhere more interesting. Because ingestion is decoupled from presentation behind that JSON contract, a design system whose truth lives in a GitHub repository isn't a rewrite, it's a second ingester writing the same shape.
As I guide design systems practice at All Human towards a future where code is the source of truth, All Design Systems will adapt to this shift, rendering actual code instead of Figma embeds. Figma will continue to be valuable for designers to manually assemble components and modules, creating pages and flows. However, by connecting Figma to code through Code Connect, designers will be able to create prototypes that closely resemble production.
where it stands
In production, and running on its own system
All Design Systems is live and serving real design systems for five clients. The whole application now runs on a single primitive library, so a change made once lands everywhere, the exact problem it was built to solve, solved for itself. Underneath, secrets are encrypted at rest and the auth layer is hardened.
What I took from iT
Three things I'd carry to the next system
A system is only as strong as its single source of truth.
Clearly define and maintain the boundary between design and code. This separation ensures that the design system remains adaptable and scalable, allowing for seamless integration of new libraries.
Decouple ingestion from presentation
By decoupling ingestion from presentation, you create a flexible architecture where changing the data source is as simple as adjusting a configuration. This approach ensures that the system can easily adapt to new technologies or requirements without needing a complete overhaul, making it future-proof and resilient.
A rigid set of rules feels pedantic until it fixes 240 things at once
Constraints defined in one place compound. Discipline early is leverage later.