iOS・Androidで使えるデザインシステムをどう実装するか by ああうえ

このトークでは、モバイルアプリにデザインシステムを導入した話をします。

デザインシステムとは、デザインに関する原則やコンポーネントの実装をまとめたもので、有名なものではGoogleのMaterial Designなどがあります。デザインシステムは以下のような目的で作られています。

• ボタンの見た目など画面・サービスごとに違ってユーザーを混乱させない
• 同じような実装をまとめることで、コード量・メンテナンスコストを減らし、生産性を上げる
• 誰が実装しても同じものを作れる
• 統一したUIを提供することで、ブランディングを向上させる

弊社では、4つ以上のアプリを同時に開発しており、iOS・Android・Webのそれぞれのプラットフォームでサービスを展開しています。これまでは、各アプリでそれぞれUIの実装を進めていましたが、共通化できる部分も多くあります。すでにWeb版ではデザインシステムが開発・運用されていますが、どのようにしてアプリでも使えるように整備していったかをお話しします。

内容

• Figmaからのリソース自動書き出し
• Kotlin Multiplatform Mobileを使った共通実装の作成
• SwiftUI / UIKitでの実装
• (Jetpack Composeでの実装)