Infor RMS · Souha Sakly
Souha Sakly
All work
01 / SaaSProduction

Infor Revenue Management System

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.

Role
Lead UX/UI Engineer
Design & frontend
Timeline
2024 — 2026
Ongoing
Stack
Angular 20.3 · Signals · NgRx
IDS Enterprise NG · ag-Grid
Focus
Migration architecture
Token automation
Palette
#0C0F16
#15355C
#2F6FD0
#3D9BE9
#E8804D
#1F9D57
Tools
Figma Angular 20 IDS Enterprise NG TypeScript NgRx RxJS ag-Grid ECharts HTML / Sass Design tokens Kiro
0
design-to-code drift after token sync went live
3 mo
to ship the full RMS dark theme via Kiro + MCP Figma variables
1
shared Definition of Done across design & engineering
The product

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.

01 — The problem

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.

02 — Research & audit

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.

FINDING 01
Tokens existed in Figma but were copied into code by hand — the single biggest source of drift.
FINDING 02
"Done" meant different things to design and dev, so QA caught visual issues far too late.
FINDING 03
Legacy change-detection made data-dense screens sluggish and the code hard to reason about.
FINDING 04
Component APIs varied team-to-team, so the same control was rebuilt in several places.
03 — Migration architecture

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.

// before — imperative, manual change detection
this.total = 0;
this.items.forEach(i => this.total += i.value);
this.cdr.detectChanges(); // easy to forget
// after — Signals, derived & reactive
items = signal<Item[]>([]);
total = computed(() => this.items().reduce((s,i) => s + i.value, 0));
// recomputes automatically — no manual CD
Incremental & reversible
Each module migrated behind a flag, shippable on its own — no big-bang release.
Layered library
Primitives → composed components → screen patterns, so teams assemble rather than reinvent.
Proof of contribution
The code itself is confidential — but the work is steady and measurable. My GitLab activity on Infor's Oxford instance: issues, merge requests, pushes, and comments, week after week since 2022.
GitLab contribution activity graph
Oct 2022
member since
3+ yrs
active contribution
Weekly
consistent cadence
04 — Token automation

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.

01
Figma variables
Designers own color, space, radius & type as variables.
02
Sync via MCP
Kiro pulls them into code as standard variables and mixins.
03
CSS custom props
Published as versioned tokens the app consumes.
04
Production UI
Components render from tokens — always in sync.
3 months FULL RMS DARK THEME — SHIPPED
The pipeline proved itself on a real deadline. I delivered the entire RMS dark theme in three months — driving it with Kiro and MCP-connected Figma variables, so every dark-mode value flowed from Figma into production without a single hand-typed color — and the whole platform switches between light and dark globally, with no per-component overrides.
“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.”
05 — Definition of Done

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.

Uses design tokens — no hard-coded values
Every color, space and radius resolves to a synced token.
State modeled with Signals
Derived state is computed, not manually synchronized.
Accessibility verified
Keyboard paths, focus order and contrast checked against WCAG.
Matches Figma at token level
Design reviews the built component, not a screenshot.
Passes automated linting
ESLint, Stylelint (SCSS) and HTML lint run in the pipeline to keep the codebase clean and consistent.
06 — Outcome & learnings

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.

07 — Recognition
FEATURED ON LINKEDIN
The RMS launch, celebrated with the Infor hospitality team
PRODUCT LAUNCH · LINKEDIN
Introducing the new Infor RMS — the platform launch announcement
RMS SCREENS · FIGMA
Explore selected RMS screens in Figma
NEXT PROJECT →
Evai — AI-Driven Agent