6-STAGE PRODUCT DESIGN & FRONTEND DEV WORKFLOW
Reviewing the complete lifecycle: every project unites human-centered discovery and Customer Experience (CX) mapping with clean, performant frontend engineering.
Handoff is where systems die
Teams ship beautiful Figma libraries that never match production. Renamed tokens, partial variants, and "close enough" CSS create drift that compounds every sprint. Engineers stop trusting design files. Designers stop trusting Storybook.
I designed a pipeline where design intent and production stay the same conversation — searchable, commentable, and usable by a designer doing handoff or a senior engineer doing code review.
Five stages, zero manual handoff
Figma Variables + Auto-layout
Tokens for colour, space, radius, type. Components with full variant coverage and property names that
will become @Inputs.
Token Studio JSON export
Single tokens/tokens.json source — no pending renames, no parallel spreadsheets.
Style Dictionary
CI generates CSS custom properties and TS types. Humans don't edit variables.css.
Angular standalone components
@ds/angular package: <ds-button>, <ds-field>, etc.
Class-name fallback for progressive adoption.
Storybook living docs
Stories mirror Figma paths. Controls expose the same props. Docs tab copies production snippets.
Names never change between stages
If Figma has color/primary/900, CSS has --color-primary-900, and Angular stories
reference the same token. Button props variant · size · disabled · loading match Figma properties
exactly. That single discipline eliminated the most common source of drift.
| Figma Variable | CSS Property | Value |
|---|---|---|
| color/primary/900 | --color-primary-900 | #e8ff5a |
| color/danger/600 | --color-danger-600 | #dd4040 |
| space/2 | --space-2 | 8px |
| radius/md | --radius-md | 8px |
Tracked across five pipeline stages
Every component shows Ready / Partial / Not started per stage — so a designer, PM, or engineer can answer "can I use this in production?" in seconds.
- Button — 4 variants, 3 sizes, loading/disabled, 9 Storybook stories, published v2.1.0
- Input Field — Default/Focused/Error/Disabled, Reactive Forms + ARIA
- Select — CVA compatible, closed/open/error/disabled
- Badge / Card — status variants; Storybook in review where needed
- Modal / Alert / Form controls / Avatar / Table — explicit backlog with blockers called out
Honesty in status is a feature: partial components show class-name-safe usage and warn against unstable APIs.
Comments, change requests, contribution rules
In-pipeline comments (change request / question / approval) keep design and engineering in one thread. Contribution rules define when to extend the system vs create a product-specific pattern — reducing ad-hoc components in product files.
Prove the pipeline before scaling components
Before expanding the full library, we piloted tokens on Button + Field: designer rename → CI export → Storybook control. Only when names survived end-to-end did we scale to 80+ components. That gate stopped “pretty Figma, broken CSS” from becoming the default.
Pilot components
Button and Field as the contract between design props and Angular inputs.
CI check
Token export must match Figma names or the build fails.
Engineer review
Storybook docs used in real PR reviews — not a side website.
Scale
Only then: full component backlog with honest Ready / Partial status.
What the pipeline delivered
One source of truth. Searchable. Commentable. Usable by anyone from handoff to code review.
Implementation on GitHub
The DesignOps pipeline is documented and available in a public repository — useful for engineering managers who want to inspect structure beyond the case write-up.
Business, product & craft value
A concise view of the UX/UI, CX, product strategy and frontend/UI development decisions in this project.
Business value
Teams ship UI faster with fewer design-dev debates and visual regressions.
Product value
Designers and engineers share property names — handoff becomes configuration, not translation.
Engineering value
CI-generated tokens + Angular package reduce bespoke CSS and one-off components.
NEED A DESIGN SYSTEM THAT ENGINEERS TRUST?
I design and implement DesignOps pipelines that keep Figma and production in sync — Angular, Storybook, tokens, governance. Message me with your stack and team size.