Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

ああうえ
September 17, 2021
5.3k

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

ああうえ

September 17, 2021
Tweet

Transcript

  1. 2 自己紹介 • ああうえ / @_kwzr_ • 仕事: pixiv Sketchの開発

    • 個人: Pose Arch 15万DL🎉 ああうえ モバイルアプリエンジニア
  2. 11 状況 • 4サービス、8アプリがデザインシステムに対応する可能性 ◦ 歴史が長いアプリが多いのでまだまだ先は長い • 各アプリの実装状況 ◦ iOS

    ▪ Interface Builderで独自のCustom Classを設定 ▪ View Controllerで逐一スタイルを設定 ▪ SwiftUI ◦ Android ▪ 独自のViewを定義 ▪ styles.xmlに定義されたスタイルを適用
  3. 13 Webフロントでの導入 • 以下のようなレイヤーで構成 • Constants(デザイントークン) ◦ Spacing, Typography, Border

    Radius, Palette, Icons... • Utilities ◦ Tailwind CSSを拡張したCSS層 ◦ これによって、ReactでもVueでも使用可能 • Components ◦ Buttonなどのコンポーネント <Button> .bg-background1 .typography-12 const background1 = “#fff” const typography12 = { fontSize: 12, lineHeight: 20 } Components Utilities Constants
  4. 15 Single Source of Truth • 信頼できる唯一の情報源 ◦ どれが最新か、信頼性のあるデータなのか考えずに使えるよう にする

    • 参照する情報が複数あると、どれを変更したり参照したりすればいい かわからない。参照元を一つにする • マルチプラットフォーム、複数サービスへの適用を考えて、一つの情 報源を参照できるように、運用ルール、CIなどを設定する
  5. 17 デザインシステムの構成 library-ios library-android library-mobile-foundation • デザイントークン • モバイル共通の定義 •

    コンポーネント • アセット • 各プラットフォーム向けツール image: Flaticon.com
  6. 18 デザイントークンとは • Single Source of Truthを実現するためにSalesforceが提唱 • デザインに関する以下のような定数を指す ◦

    Spacing ◦ Border Radius ◦ Typography ◦ Color Palette ◦ … • 上記のような定数をYAML・JSONなどで定義しておき、 Web・iOS・Android各プラットフォームのコードに変換する
  7. 20 MPPを使ったデザイントークン実装 • ピクシブで現在進めているデザイントークン実装 • Kotlin Multiplatform Project(MPP)をデザイントークン実装に使う • MPPとは?

    ◦ KotlinはMultiplatform Programmingを主要な利点として上げ ている ◦ Kotlinで書かれたコードをKotlin/JVM, Kotlin/Native, Kotlin/JSのネイティブコードに変換。マルチプラットフォーム での開発を可能にする ◦ 2021年9月1日現在はAlpha段階 ◦ Alpha段階: use at your own risk, expect migration issues
  8. 25 ライブラリとして配布 library-ios library-android library-mobile-foundation • デザイントークン • モバイル共通の定義 •

    コンポーネント • アセット • 各プラットフォーム向けツール image: Flaticon.com
  9. 26 ライブラリとして配布 library-ios library-android library-mobile-foundation • デザイントークン • モバイル共通の定義 •

    コンポーネント • アセット • 各プラットフォーム向けツール image: Flaticon.com
  10. library-ios library-android library-mobile-foundation • デザイントークン • モバイル共通の定義 • コンポーネント •

    アセット • 各プラットフォーム向けツール 30 アセット image: Flaticon.com
  11. 31 アセットの配布 • MPPではAssetを扱えない🥺 • iOSは画像や色をInterface Builder上から使えるようにしたり、ダー クモード対応のために、Asset Catalog対応したい ◦

    library-iosの層でAsset Catalogを作る ◦ 既存のデザイントークンライブラリでも完全に対応されている ものがなさそう • Androidも同様に、library-androidの層でcolors.xmlや VectorDrawableを配置してあげる
  12. 32 アセットの変換 • iOS ◦ Asset Catalogへの変換を地道にやる ◦ iOS 12以下への対応

    ▪ SVG形式の利用はiOS 13+ ▪ PDF形式で吐き出す必要がある • Android ◦ SVG→VectorDrawableに変換する ◦ Android Studioのソースコードを参照
  13. library-ios library-android library-mobile-foundation • デザイントークン • モバイル共通の定義 • コンポーネント •

    アセット • 各プラットフォーム向けツール 34 コンポーネント image: Flaticon.com
  14. 35 コンポーネントの実装 • library-ios, library-androidにそれぞれ実装 • 各OS、パラダイムごとに実装を用意 ◦ UIKit・SwiftUI・Android View・Jetpack

    Compose ◦ 性質上仕方ない。将来的にはアプリ側の実装を揃えていく • FlutterのAdd-to-appは? ◦ 共通のコンポーネントを実装して、iOS・Androidから使用可 ◦ 各プラットフォームでの体験を大切にするため使わない ▪ MPPの思想でもUIは各OSのネイティブで実装することを勧 めている ▪ https://kotlinlang.org/docs/mobile/architect-kmm-ap p.html
  15. 37 コンポーネントの実装(UIKit) • @IBInspectableにenumが使えない問題 ◦ ボタンのスタイルを設定するときにどうするか • 2つの方法 ◦ 1スタイル=1Custom

    Classで実装する←こちらを採用 ▪ Figmaの定義と同じクラス名にする(prefixは除く) ◦ #if TARGET_INTERFACE_BUILDERを使って、コード上からは enum、Interface BuilderからはIntやStringで設定する方法 ▪ Int: 欠番などの扱い、Figma上のものと揃えるのが難しい ▪ String: 入力補完ができない ▪ IBLinterなどでLintが難しい • UIButton.Configuration(iOS 15+)は考えない ◦ iOS 14はまだしばらく切れないので...
  16. 42 コンポーネントの実装(Android) • Androidも、現状の実装と将来的にどうしたいかを考えて実装 • Android View ◦ viewInflaterClassを使った、既存のXMLの置き換え ◦

    TextView→MaterialTextViewのように自動的に置き換えること ができる • Jetpack Compose ◦ まだ検討中 ◦ SwiftUIと似たような実装になりそう
  17. 43 まとめ • デザインシステムがあることによって、サービス・アプリのブラン ディングや開発体験に大きく影響 • Single Source of Truthを実現するために、デザイントークンの実装

    が重要 ◦ style-dictionary、diezなど既存の実装を使うか、MPPを使うか プロダクトによって見極める • 色や画像リソースの変換は現状ではがんばるしかない • UIKit・SwiftUIでのコンポーネント設計方針を話した