Product Designer · Design Systems · Agency
Design System
One library. Any brand. Zero rebuilds.
As lead designer at a digital agency, I created a token first design system in Figma that lets a two person team serve any client brand from a single library, shipping pixel perfect every time.
My Role
Lead Product Designer
Tools Used
Figma - Tailwind CSS
Design system architecture — token flow, brand modes, and three live client brand previews
↓ Read the story
Deliverables
What was
actually built.
Figma Variables panel — Brand Token · Color · Foundations · three-tier architecture with named semantic aliases
Variable Architecture · Figma Collections
Figma Variables · 3 Collections
Primitives
Raw values
Semantic
Purpose aliases
→
Brand Mode
Client override
Component
References semantic
Any Frame
Inherits Mode
Cross file publish
Other client files
Primitives
Collection
#1A1916
#1A47E8
#F5F5F5
16px
24px
40px
4px
12px
400ms
Syne
Barlow
Semantic
Collection
primary 500
primary 600
bg base
bg subtle
text default
text muted
border default
rounded btn
rounded card
spacing sm
spacing md
font display
font body
Brand
Modes
Client: Retail
Client: Fintech
Client: Healthcare
Client: SaaS
Client: Hospitality
+ New Client
Component
Tokens
btn bg primary
btn rounded
input border
input border focus
card shadow
nav bg
Live: Same component, different brand Mode
Retail
Fintech
Healthcare
SaaS
Hospitality
R
Retail Co.
New Collection
Designed to last. Built to move.
One component file. The brand Mode changes
everything else: colour, radius, typography, surface.
Zero manual overrides.
Shop Now
Active token values
primary 500
#1A47E8
bg base
#FFFFFF
text default
#0A0B0D
rounded btn
4px
font display
Syne
border default
#DDE0E6
Same component structure. Three distinct brand identities — Clinix, Notes, Memos. One click to switch.
Library Preview
The actual component library — Tabs, Buttons, Calendar, Colour tokens, Typography system
Component library overview — Tabs · Toggle · Buttons · Calendar · Colour tokens · Typography scale
The Engineering Challenge
Figma said one thing.
Code said another.
The system worked in Figma. Design and engineering spoke different languages. In Figma: one Button, semantic tokens, variant props. In code: three separate files with hardcoded hex values scattered through stylesheets.
"Designs shipped looking right. Builds shipped looking wrong. Neither side was at
fault. There was no shared contract, no delivery pipeline, no feedback loop. The
system I built was invisible to the people who needed to implement it."
The fix wasn't tooling. It was language. Identical token names on both sides means nothing to interpret. Engineers read the Figma spec and write the CSS variable. No handoff docs. No Slack threads. No guesswork.
Design: Figma spec (correct)
component:
Button
variant:
primary, secondary, ghost
background:
primary 500
border-radius:
rounded btn
font:
font display
// 1 component, n brands via Mode
Engineering: codebase (before)
file:
PrimaryButton.tsx
file:
SecondaryButton.tsx
background:
#1A47E8
// hardcoded
border-radius:
8px
// hardcoded
font-family:
'Inter'
// assumed
// different file per brand = drift
Token names became the contract.
primary 500
in Figma Variables maps directly to
--primary-500
in CSS. Same name. Both sides. No translation.
No guesswork.
“
Left: component properties expose all logic — tokens, states, props. Right: Style Dictionary outputs per-brand CSS files.
Step 01
Engineering in from day one
Brought the engineering lead into token naming before any component was built. Structural mismatches caught in conversation, not in QA.
Step 02
Joint component audit
Every Figma variant mapped to its code counterpart. Where they didn't align, we negotiated. The token spec became the single source of truth.
Step 03
Shared naming language
Identical naming on both sides: Figma Variable name = CSS custom property. One to one, Tailwind style. Engineers read the spec and knew the variable.
Step 04
Spec embedded in Figma
Annotation components on every spec frame. Props, tokens, states, breakpoints, a11y. All in Figma. No external docs that go stale. Engineers had one file to open.
Step 05
Token delivery to code
Tokens exported from Figma as JSON and transformed via Style Dictionary into CSS custom properties. Each brand maps to its own
Step 06
Feedback loop
Weekly 30 minute design/eng sync to catch token gaps before they became bugs. Shared checklist for every new component: tokens referenced, states covered, breakpoints specced, a11y confirmed.
Figma Tooling
Advanced Figma,
each feature earned.
Every tool solved a specific failure. Brand switching too slow. Prototypes too expensive. Handoff too ambiguous. Nothing was adopted because it existed. Each one earned its place.
Figma tooling stack — Variables panel showing Brand Token collections, semantic references, and component-level tokens
Variables &
Modes
The backbone
Problem solved: Brand switching required manually redoing every frame. Now it's one click. Three collections with each
client as a Mode. Variable names follow Tailwind conventions so they map exactly to CSS custom properties. Published
cross file.
Brand switching
Figma Make
Prototyping
Problem solved: Engineers spent time building throwaway prototypes for stakeholder reviews. Figma Make let us own
that validation: interactive flows with state transitions, conditional logic, and live brand switching. Devs got that time
back for production work.
Validation & testing
Component
Properties
Library ergonomics
Problem solved: Designers had to dig through nested layers to understand components. Boolean, text, and instance
swap properties expose all logic in the Properties panel. No system knowledge required. Brand Modes inherit
automatically through nesting.
Component ergonomics
Annotation
System
Spec & Handoff
Problem solved: External spec docs go stale and nobody reads them. Reusable annotation components published from the
library, used on every spec frame. Token refs, spacing callouts, interaction states, a11y rules. Locked layers, always
current, always in Figma.
Handoff quality
05 The Result
Numbers that
actually changed.
Three months after full adoption. Tracked manually across active client projects. The patterns were hard to ignore.
~3hrs
New client onboarding, down from 2
to 3 days of full rebuilds
68%
Fewer visual inconsistencies reaching
QA after adoption
~40%
Reduction in design related rework
across three client projects
Design impact
→
Brand switching across an entire prototype: one click via Variable Mode
→
Second designer fully productive within one sprint, no bespoke onboarding
→
Cross file publishing kept client files lean and always current
→
Figma Make enabled user testing with brand accurate prototypes weeks earlier
Engineering impact
→
Token naming parity eliminated the interpretation gap entirely
→
Throwaway prototype work moved to design, freeing dev time for production
→
Brand theming in code became a single CSS file swap at
:root
→
~40% fewer design related revisions tracked across three client projects
Reflection
Honest look
backwards.
The biggest surprise wasn't that it worked. It was how fast the team stopped noticing it. A good system disappears into the work.
The system works best when the why behind every decision is written down — not held in one person's head
3 Ways I Can Help You
Product. Website. UX Audit.
🎨 My product design services focus on creating intuitive and aesthetically pleasing products that resonate with your audience and stand out in the market.
V
Trusted By:
Still not sure about me?
hola.vitaaddelia@gmail.com
Copy