IJIzzat Jamal
All case studies

Design systems · Xsolla

One UI foundation for web and native.

Helping product teams adopt a shared visual language without maintaining another component library for every platform.

My role
One of two technical leads, working with a small team
Context
XUI · Publisher Account and Business Accounts
XUI component catalogue in Storybook
XUI component catalogue in Storybook

The challenge

Several UI libraries served different products, while a new visual language needed to work across web and React Native. Existing applications included older React versions, so adoption could not depend on every team upgrading its stack first.

My contribution

  • Co-led the initial scope, architecture, development, and migration direction for XUI.
  • Built reusable primitives and component APIs, with design tokens and product context behind a shared provider.
  • Supported multi-theme adoption and documented components and usage patterns in Storybook.
  • Helped product teams move toward shared UI foundations while keeping product layouts and workflows in their applications.

Key decisions

01

Share the contract; isolate the platform engines.

Components use common layout, text, and interaction primitives. The library produces web and native outputs, while DOM and React Native implementation details stay in the platform engines.

02

Make compatibility part of the design.

Keeping the React floor at 16.8 and native dependencies optional allowed existing web hosts to consume the library. The build work belongs in the library rather than a new compiler requirement in every application.

03

Ship a usable foundation, then grow adoption.

The initial release focused on tokens, a provider, primitives, and a first set of components. It established a place for product teams to migrate without claiming that every control or host migration was finished.

What changed

The team shipped the initial usable library in about a month. Web and native could consume a shared component contract, and product themes could be expressed through the common token architecture rather than a separate kit.

Component coverage and product migration continued after the initial release. My role was co-leadership of the foundation and migration work; ongoing ownership belongs to the wider team.

Tools & foundations

  • React
  • React Native
  • TypeScript
  • Design tokens
  • Storybook
  • Package publishing
Read the architecture articleOpen the public Storybook

Something similar in mind?

Tell me about the product, team, and problem you’re working with. We can shape a practical scope together.

Let’s scope your project