Leading the migration to Angular 20 and refactoring the UI on Signals — while automating Figma design tokens into production code to make design-to-development drift impossible.
Infor's Revenue Management Solution is a next-generation hotel revenue management platform. It draws on historical data, live market trends, and competitor rates to drive real-time demand forecasting and optimal pricing across rooms, channels, and function space.
What makes the front-end work matter is how configurable it is: the interface is modular by design, so any team member — not only revenue managers — can tailor their dashboards to the KPIs their role cares about, from occupancy and ADR to RevPAR and room revenue. That's a dense, highly flexible UI where a small visual inconsistency quietly erodes trust in the numbers.
The Revenue Management Solution is a mature platform with years of accumulated UI built across multiple Angular versions. Two problems compounded each other: the framework was several major versions behind, and there was no reliable link between what designers drew in Figma and what shipped in code.
Every release, small visual inconsistencies crept in — a spacing value here, a slightly-off blue there. Designers filed bugs; engineers re-implemented values by hand; the same drift returned the next sprint. The handoff itself was the defect.
Before touching architecture, I audited where intent was being lost. I mapped the path a single design decision took — from a Figma variable, through handoff notes, to the line of SCSS that implemented it — and counted every place a human had to re-type a value.
The Angular 20 migration was incremental, not a rewrite. I moved component state onto Signals to make data flow explicit and cut change-detection overhead on dense grids, and established a layered component library so teams compose instead of rebuild.
I sit right between design and development, so I'm always looking to eliminate friction. When I started, this project had no variables at all — every color was set manually. I used Kiro to clean up the code, created a set of standard variables and mixins, and built a token-driven dark theme on CSS variables, so we could switch themes globally without per-component overrides.
The pipeline treats Figma as the source of truth and brings its variables straight into production: change a token in Figma, and the next build picks it up. No one re-types a value, so visual consistency stops being a discipline problem and becomes a guarantee.
“My favorite win was connecting Figma through MCP to sync tokens straight into code — it let me integrate everything significantly faster and completely eliminated handoff drift.”
To stop "done" from meaning different things to different people, I wrote a shared Definition of Done — one checklist both designers and engineers sign off against before a ticket closes.
Token automation removed the largest recurring source of UI bugs: with values flowing from one source, visual drift effectively disappeared. The Signals refactor made dense screens faster and the code easier to reason about, and the shared Definition of Done moved visual QA earlier — design now reviews real components, not screenshots.
The biggest lesson: the most valuable design-engineering work often isn't a screen at all — it's the system that keeps every screen honest. Automating the boring seam between Figma and code freed the team to spend its attention on the problems that actually need judgment.