BIGOH TECH • 2024 · 4 min read

Everything I got wrong is why fourteen products trust it.

From a Figma file to an installable package

As the product designer at BigOh Tech since May 2024, I faced one problem: components kept reaching the build slightly wrong. With one developer, and later two designers, I built the system end to end: tokens, Figma, docs, React, Storybook and an npm package. Today 14 products run on it, and a new product's setup went from 1–2 months to about 30 minutes.

Figma link

Digilawyer Design System · view only

View in Figma

OVERVIEW

Components

160+

Design tokens

130

Versioned releases

Products built on it

THE SITUATION

The designs were consistent. The product wasn't.

I defined primary, secondary and tertiary buttons, and when each applied.
What shipped paired primary with secondary. Not carelessness: there was nothing to check the build against.

The core challenge:

Give the build something to check against — and make it the easiest thing to reach for.

THE USERS

Everyone who builds on it.

Developers
They need the system in the codebase, not in a Figma file.
Designers
The team that grew around me — two designers who had to use it without asking me.
Our CEO
Technical, and interested only in what reaches production.

PAIN POINTS

Nothing to check the build against.

No source of truth
The reference was whatever shipped last.
Verbal handoff
Every correction was a conversation, and conversations leave no record.
No shared vocabulary
I said “tertiary”. Nothing made tertiary mean one specific thing.
Fourteen frozen copies
New projects copied DigiLawyer's code, so every fix stayed where I made it.
AI copying hex codes
Handing Figma to a model gave sharp output that was fundamentally wrong.

WHY IT HAPPENED

Every review turned into a bug hunt.

Every review turned into a bug hunt.
Design and engineering time went into reconciling UI instead of shipping. That was the case I took to our CEO.

DESIGN GOALS

Design goals

Done means installable
One source of truth
Names that carry the spec
Rules before anything is touched

Section rhythm: 120px margin, 56 · 32 · 24 · 48 steps

SOLUTION

The stack, one layer deeper each time

Design tokens
Primitive, semantic, component — three tiers.
Figma components
Light and dark.
Documentation site
Every component, every state, versioned, with a changelog.
React components
The same 25, built a second time.
Storybook
The library, live and interactive.
Published npm package
Installed like any other dependency.

COMPONENTS

25 components

Button
Button Group
Checkbox
Radio Button
Toggle Switch
Dropdown
Text Input
Text Area
Upload Media
Slider
Rating
Date Picker
Options
Avatar
Alert
Badge
Breadcrumb
Link
Pagination
Progress Bar
Snackbar
Table
Tabs

The CTA: 32px padding, 8px icon gap, icon left or right

PROCESS

From discovery to handoff

01 · GRID
12 columns, 120px margins, 24px gutters
12 columns, 120px margins, 24px gutters
02 · IN USE
Components in the product: status, model picker
Components in the product: status, model picker
03 · STORYBOOK
Button in Storybook
Button in Storybook
04 · PROTOTYPE
Installing the package
Installing the package

DECISIONS & TRADE-OFFS

Key decisions and trade-offs

Three token tiers, not a flat list
A flat colour list was faster, but it breaks on the first rename.Trade-off: Two hops before you reach a hex; in return, reassigning a colour never touches a component.
Port one-to-one, improve nothing
I built all 25 again in React, fixing nothing, so the second build audited the first.Trade-off: Twenty-five components again, with no visible progress to show for it.
Pitch it as variables
Our CEO thinks in code, so I pitched the system as variables. His condition: show me in a week.Trade-off: Five components in seven days, then three more months for the first working system — with no dedicated time.
Keep going when told it wasn't my job
A senior developer said Storybook, React and the docs weren't a designer's part. I built them anyway.

/* 1 · Primitive */  --primitive-neutral-950: #2D2D2D;
/* 2 · Semantic  */  --color-brand-primary:   #2D2D2D;
/* 3 · Component */  --btn-primary-bg:        #2D2D2D;

The three token tiers, from tokens.css: a colour changes at the primitive, never in a component.

OUTCOMES

The bug tickets dried up

WHO / WHAT	TODAY
Designers in the Figma library	3
Developers on the React package	20+
Themed variants	14, for 14 products
Setting up a new product	1–2 months → about 30 minutes
A fix	Published once, reaches every product

Observed in the months after adoption, not tracked on a dashboard. The counts above are in the public repo.

REFLECTION

Done isn't where I stand

A design system isn't finished when it looks right in Figma. Done isn't where I stand. It's where the person using my work stands.

What's next: blocks
Pick a hero from ten versions, copy it, paste it into a project that already has the package, change the content. A section live in ten minutes instead of an afternoon.

SELECTED WORK