デザインシステム · Xsolla
XUIデザインシステム
React・React Native共通のUI基盤、デザイントークン、開発者向け文書を整備。初期のプロジェクトリードから継続的な保守まで担当しています。
- 担当した役割
- 初期プロジェクトリード・技術共同リード2名のうちの1名。現在も保守開発を担当。
- 担当範囲・背景
- XUI · Publisher Account・Business Accounts
概要
プロダクトごとに異なるUIライブラリが使われる一方で、新しいデザイン言語をWebとReact Nativeの両方へ展開する必要がありました。古いReactを使うアプリもあるため、全チームの技術更新を導入の前提にはできませんでした。
担当したこと
- XUIの初期スコープ、設計、開発、移行方針を共同で主導しました。
- 共通Providerにデザイントークンとプロダクトのコンテキストを集約し、再利用可能なプリミティブとコンポーネントAPIを開発しました。
- 階層化されたデザイントークンを実行時テーマへ変換する処理を実装。複数ブランドのライト・ダークテーマに対応しました。
- コンポーネントのサイズ規約の統一を推進し、導入・移行時の判断を明確にしました。
- Storybookの利用ガイドと、プロパティ・使用例を含むllms.txt形式のLLM向け文書を公開。Xsolla Schoolの卒業生にはReactのスタイリングを指導しました。
- プロダクト固有のレイアウトや業務フローは各アプリに残しながら、共通UI基盤への移行を支援しました。
成果・現在の状況
チームは約1か月で利用可能な初期ライブラリをリリースしました。Webとネイティブで共通APIを使い、プロダクトごとのテーマも別キットではなく共通のトークン設計で表現できるようになりました。
現在も保守開発に携わっています。コンポーネントの拡充、テーマ対応、プロダクト移行はチーム全体で継続しています。
技術スタック・ツール
- 共通コンポーネントAPIとWeb・ネイティブ固有の実装を分離。トークン変換、テーマ、Storybook、Firebase上の文書を整備しました。
- React
- React Native
- TypeScript
- デザイントークン
- Storybook
- パッケージ公開
- Firebase
- llms.txt