Design Systems Experience
A decade of building Design Systems — from Storybook + Ant Design to token-driven Figma libraries that drive React, Tailwind, and shadcn/ui in production.
A great Design System isn’t a Figma file — it’s the contract between design and engineering, expressed as tokens, components, and conventions everyone can rely on.
Why Design Systems
Nothing increases speed between design and engineering more than Design Systems with design tokens linking Figma to React.JS + Tailwind. The moment a colour, spacing value, or radius is defined in one place and consumed everywhere, the team stops debating pixels and starts shipping product.
Multi-brand efficiency with Figma Variables
Figma Variables make multi-brand design viable from a single source of truth. By layering brand themes on top of a primitive token set, the same components can render as Tiimely Home, Tic:Toc, or any of the broker-aligned brands — without forking the library or duplicating components.
Tech stack
The toolchain I lean on most:
- Tokens Studio for Figma — define tokens once, sync across files.
- variables2css and variables2json — export Figma Variables into the formats engineering actually consumes.
- Propstar plugins — keep component props lined up with code.
- Ant Design for enterprise SaaS surfaces.
- Storybook for component documentation and visual regression.
- Tailwind CSS as the styling layer in production React.
- shadcn/ui for accessible primitives that compose cleanly with Tailwind.
Recent Design System examples
Project portfolio
| Year | Project | Details |
|---|---|---|
| 2023 | Home Loan Consumer Website | Rates, product cards, calculators; Figma tokens piped through to Tailwind.css for the production site. |
| 2023 | Home Loan Application Process | White-label multi-brand application UI; Figma tokens piped through to shadcn/ui + Tailwind, themed per brand. |
| 2020 | XAI SaaS Loan Assessment Software | Storybook documenting an extended Ant Design library for a complex loan assessment workflow. |
Leadership
As Lead Product Designer at Tic:Toc Home Loans I extended the Ant Design system to fit the brand and the application workflow, managed a cross-functional team of designers and engineers, and coached the team through the Figma → code workflow as it matured.
The throughline across all of this: design systems should be boring — predictable, well-named, easy to extend. The interesting work happens on top of the system, not inside it.