アプリ版デザインシステム実装をOSS化しました
こんにちは、ああうえ(@_kwzr_)です。新規事業部とデザインシステム部を兼務しており、アプリ版デザインシステムの実装を進めています。
Web版に引き続いて、アプリ版のデザインシステム(charcoal-ios, charcoal-android)をOSS化しました。
github.com github.com inside.pixiv.blog
Web版との同期
アイコン・色・定数などが複数のリポジトリに定義されてしまっていると、更新が困難になってしまいます。
charcoal-iosとcharcoal-androidでは、CIで定期的にWeb版の定数の定義を用いて、自動的に更新を行なっています。Web版の定数はJSONで定義されており、iOS版ではQuickTypeを用いてSwiftの型に変換しています。Android版でも同様にKotlinの型に変換することはできるのですが、Android ViewではXMLを使うため、こちらはスクリプトを書いて変換することにしました。Jetpack Compose版のコンポーネントも実装を進めており、そちらはQuickTypeを使っています。
CIによる自動更新によって、複数ライブラリのSingle Source of Truthを実現することができました。
カタログアプリによるVisual Regression Test
見た目に大きく関わるライブラリなので、Visual Regression Test(VRT)を実装して、変更の影響範囲を簡単に確認できるようにしています。charcoal-ios, charcoal-androidのリポジトリ内にはカタログアプリが入っており、これをVRTで確認できるようになっています。
VRTにはMagicPodを利用しているため、テストケースの改善も容易となっています。詳しくは、以下の記事でも紹介しておりますので、ご覧ください。 inside.pixiv.blog
おわりに
アプリ版のデザインシステムは2021年から少しずつ開発してきました。2018年くらいから実装が進められていてたWeb版の実装にようやく少し追いつくことができました。
まだまだ運用が始まったばかりのライブラリですが、ピクシブの複数のアプリ開発をより高速に改善していくためにこれからも頑張っていきます。
charcoal-ios, charcoal-androidはWebとアプリのライブラリが同期する参考実装として活用していただけたら良いかなと思っています。皆様のコントリビューションも歓迎しています。
また、社員としてデザインシステムの開発に関わりたい、プロダクト開発で利用してみたいという方は、モバイルアプリエンジニアやプロダクトデザイナーでのご応募もお待ちしております！
