In production Design System Figma → Vue.js WCAG 2.2 AA 2 custom plugins

250+ components, built from zero, with two custom plugins keeping it honest.

I built the design system behind a custom eCommerce ERP and still run it. One source of truth that maps 1:1 to production Vue.js, plus a contribution model that works beyond the core team.

250+
COMPONENTS
SHIPPED
1:1
FIGMA →
VUE.JS MAPPING
Multi-mode
LIGHT / DARK
+ DENSITY

Want the full architecture, token tables and governance model? Read the detailed write-up.

01 · The Problem

No shared system. Everyone rebuilt the same thing.

A custom eCommerce ERP with a 30,000-SKU catalog, and nothing shared underneath it. Designers improvised screen by screen. Engineers rebuilt the same components in every module.

Tokens were defined in two places. Intent got lost at handoff, and nobody could see the drift building up. There was no canonical anything to point at.

02 · What I Built

Four libraries, three token layers, one direction of dependency.

Four published Figma libraries. Each one depends only on the layer beneath it, so dependencies run in one direction and never sideways.

01_Tokens
Colour, spacing, type, radius, elevation, motion. No components.
02_Primitives
Icons, avatars, badges, dividers, base inputs. Consume tokens only.
03_Components
Buttons, form fields, data tables, navigation, modals, charts.
04_Patterns
Empty states, error states, multi-step forms, copilot panels.

Underneath sits a three-layer token architecture. Primitives hold raw values. Semantic tokens describe intent, and component tokens tie that intent to a specific UI role. Light, dark and density all resolve through the same names, so a mode never needs its own forked library.

The same semantic tokens resolving across light and dark modes
Token layers One semantic name, resolved per mode. The same token JSON feeds the Vue.js build.
03 · How It Stays Healthy

Two plugins and a contribution model, not good intentions.

I built (vibe-coded) two Figma plugins to make drift visible. Both are still in daily use.

Plugin 01

Similar Component Finder

Clusters near-duplicate components by structure and meaning, with side-by-side diffs. An audit that used to take days takes minutes.

Plugin 02

Design Debt Collector

Audits files for detached instances, hardcoded colours and deprecated components, then exports a ranked triage report. Read out weekly in design review.

Contribution model. Any designer or engineer outside the core team can propose and build a component. Nothing ships without passing four gates: accessibility, tokens-only consistency, documentation, and implementation parity against the Vue build.

04 · Key Design Decisions

The calls that made it hold up at scale.

The Figma component is the single source of truth

Props, states and tokens map 1:1 to Vue.js. A discrepancy is a bug in the component, not a handoff debate.

Naming locked on day one

Naming is the contract between design and code. I locked it before the first component and it hasn't changed since.

Three token layers, so modes never fork the library

Light/dark and density resolve through semantic names. A brand change moves through the token layers without touching the library graph.

Accessibility designed in, not audited later

WCAG 2.2 AA is baked into the tokens, components and patterns. A failing colour pair doesn't exist in the semantic set, so nobody can reach for one by accident.

Measure health weekly, or don't claim it

Adoption and design debt get read out every week. Flat or rising debt means the contribution model is leaking somewhere.

05 · Ownership

What I owned, and what I didn't.

I owned

  • System architecture: library graph and token layers
  • Naming contract and the Figma → Vue mapping rules
  • Both Figma plugins, concept through build
  • Contribution model, quality gates and final review
  • Accessibility standard and roadmap

I did not own

  • Vue.js component implementation (front-end team)
  • Build pipeline and token JSON consumption
  • Product roadmap and feature scope
06 · Impact & Status

Live, in production, and actively maintained.

Where it stands

250+ components across web and mobile, all of it in production. Started from nothing and it is still growing.

Ongoing, not finished

Maintenance is the job. Debt is triaged weekly and the contribution model absorbs work from outside the core team.

07 · Reflection

A living product, not a deliverable.

You can't fix drift you can't see. The plugins earned their keep faster than any component did.
Principle carried forward · HikeOn ERP