Haku Chen

Back to work

Shared UI Library & Design System

Jan 2023 – Jan 2024 · Lion Travel (Lion Information)

A shared design system sits between the Figma library and the code components, and feeds three productsFigma librarycode componentsshareddesign systemproductproductproduct
Context
The company's first cross-project design system, built to unify styles and UI across multiple products and to give the design team a shared component library.
What I did
  • Audited existing code and UI to eliminate duplication and improve reusability.
  • Discussed technology choices with the team, split up the research and decided the adoption approach.
  • Designed the frontend implementation and its pairing with the Figma component library.
  • Supported rollout across the individual product teams.
Phases I owned
Environment setupTech selectionDesignImplementationMentoring
Team
3 people, as lead. Lead — initial setup, technology selection, design direction, rollout support.
Environment
TypeScriptReactNxLernapnpm workspaceRollupJestCypressESLintTailwind CSSStorybook
Working language
Chinese (Taiwan)

Looking back

This is the project I took the most from. I led two other team members, and there weren't senior people to ask for help back then — we had to figure out the right technologies and how to set up the environment and workflow ourselves.

It was genuinely tough — trying, failing multiple times, and running into problems we had no clue about. But that process is exactly what made us learn so much.

The library was used in production projects before I left the company. It wasn't perfect, but other members kept adding components, learned from our experience, and made the environment friendlier than we left it.