デザイントークンの適用率計測とその活用

イベントの登壇資料です。（イベント終了後、資料をアップデートします）

デザインシステム、今なにやってる？導入と運用のリアルな裏側を公開！-Lunch LT-
https://findy.connpass.com/event/285080/

Transcript

1. © 2023 Findy Inc. デザイントークンの適用率計測とその活用 松本 芳郎 2023.06.15
2. © 2023 Findy Inc. @m-yoshiro 松本 芳郎 / Matsumoto Yoshiro ファインディ株式会社 / Findy フロントエンドエンジニア。 GMOペパボ株式会社でデザイナー → 株式会社マネーフォワードでフロ ントエンドエンジニアに転身。 そして、2023年11月にファインディ株式会社にジョイン。Findy転職 のデザインシステム構築と推進に注力中! @bennkyougirai
3. © 2023 Findy Inc. 想定している視聴者像 • 初めて、デザイントークンやUIコンポーネントライブラリに取り組 んでいるデザイナー・フロントエンドエンジニア • デザイントークンという言葉を聞いたことがある この発表の(私の)ゴール • みなさまの環境やプロセスで何かしら「試せる」ことが 見つかること はじめに
4. © 2023 Findy Inc. 話の流れ 1. Findyのデザインシステムの現在地 2. なぜ、デザイントークンの適用率を計測したのか 3. デザイントークン適用率の計測 4. デザイントークン適用率の活用 5. Appendix: 計測方法 (資料公開する際に追加します)
5. © 2023 Findy Inc. 1. Findyのデザインシステムの 現在地
6. © 2023 Findy Inc. ぶっちゃけると まだ赤ちゃんです
7. © 2023 Findy Inc. Findyのデザインシステムの現状 • 対象はFindy転職のみ • デザイン原則などの基礎部分は未着手 • 作業効率化を優先している ◦ デザイントークンの適用 ◦ FigmaのUIコンポーネント整備 小さく試そうとしてるフェーズ
8. © 2023 Findy Inc. 今日のお話しの舞台 • デザイントークンをプロダクトへ適用しはじめた頃 2023年2月 • デザイントークンを構築 2023年3月 • 一部のデザイントークンを適用開始 • デザイントークン適用率を計測開始 • 角丸のトークンをほぼ置き換え完了 2023年4月 • デザイントークンの適用方針を変更
9. © 2023 Findy Inc. 2. なぜ、デザイントークンの適用率 を計測したのか
10. © 2023 Findy Inc. ざっくりいうと、 進行が行き詰まりそうだったから
11. © 2023 Findy Inc. 当時の状況 • デザイントークンをプロダクトへ適用しはじめた頃 2023年2月 • デザイントークンを構築 2023年3月 • 一部のデザイントークンを適用開始 • デザイントークン適用率を計測開始 • 角丸のトークンをほぼ置き換え完了 2023年4月 • デザイントークンの適用方針を変更
12. © 2023 Findy Inc. 当時のデザイントークンの適用戦略 • スタイルの対象プロパティの値を直接トークンに差し替える！ つまりこういうこと
13. © 2023 Findy Inc. しかし、Findy転職のUIはまだまだ伸び代(課題)が多い 共通化されていない UIコンポーネント 複雑なスタイル 読めない影響範囲 etc.
14. © 2023 Findy Inc. 課題感 • 進捗管理が難しい ◦ ページやコンポーネントを進捗管理の単位として活用できない ◦ 数を追うと機能追加や削除の影響で簡単に監視が破城する ◦ ステークホルダーとのコミュニケーションがとりづらくなる • 「トークンを適用すること」 自体が目的になりつつあった ◦ 適用することはあくまで手段である ◦ トークンを適用することで、何を達成したいのかが不透明 • この進め方が適切なのか ◦ 膨大な差し替え対象...
15. © 2023 Findy Inc. 解決策としてデザイントークンの計測を試みた
16. © 2023 Findy Inc. 3. デザイントークン適用率の計測
17. © 2023 Findy Inc. 計測した指標 • デザイントークン適用率 スタイルプロパティ別の [トークン適用数 / プロパティの総数] 適用されていない 適用されている ※CSSを前提としてます。
18. © 2023 Findy Inc. 適用率計測の狙い • 進捗を管理できるようにする • デザイントークン適用と解決したい事柄を接続する • デザイントークンの適用方針を見直すきっかけになる
19. © 2023 Findy Inc. • データの収集 ◦ コードを検索して対象を抽出 • データの整形 ◦ Google シートで頑張る 尺の都合で、計測方法は資料の公開時に 補足資料として掲載いたします 🙏 雑に計測してみた
20. © 2023 Findy Inc.
21. © 2023 Findy Inc. • Kuja適用率 ◦ デザイントークン適用率 • バリエーション数 ◦ 値のバリエーション数 シートの内容
22. © 2023 Findy Inc. 4. デザイントークン適用率の活用
23. © 2023 Findy Inc. 適用率計測の狙い • 進捗を管理できるようにする • デザイントークン適用と解決したい事柄を接続する • デザイントークンの適用方針の見直し
24. © 2023 Findy Inc. 進捗を管理できるようにする
25. © 2023 Findy Inc. 進捗を管理できるようにする • 率で監視しているので進捗がわかりやすい ◦ 機能追加・削除によるコード量の変化に振り回れない ◦ 率の増加によって進行していることが実感できた (適用を始めた初期は...) • プロパティ毎の適用率の上限値がわかった ◦ 一つのプロパティにつき、50 ~ 60 %の適用率が限界 • ステークホルダーと話がしやすい
26. © 2023 Findy Inc. ちなみに、適用率の共有は定例会でラフにやってます。 現在(右図)はもっと簡素化してます コマンドでサマリーを出せるようにしてる。
27. © 2023 Findy Inc. デザイントークン適用と 解決したい事柄を接続する
28. © 2023 Findy Inc. デザイントークン適用と解決したい事柄を接続する • ゴールを言語化し、アクションの意義を明確にする ◦ 適用という行為と意義を接続する媒体として、デザイントークン適用率を使う デザイントークン適用率が増える トークンに置き換わることで、 値のバリエーションが減る 限定的だが、UIの一貫性の向上に貢 献するだろう
29. © 2023 Findy Inc. デザイントークン適用と解決したい事柄を接続する • ゴールを言語化し、アクションの意義を明確にする ◦ 適用という行為と意義を接続する媒体として、デザイントークン適用率を使う デザイントークン適用率が増える トークンに置き換わることで、 値のバリエーションが減る 限定的だが、UIの一貫性の向上に貢 献するだろう ゴール： 指標： 意義： ばらつきを減らすことでUIの一貫 性の向上に貢献する。 デザイントークン適用率 デザイントークンを活用している状態
30. © 2023 Findy Inc. デザイントークンの 適用方針の見直し
31. © 2023 Findy Inc. 一部プロパティの適用目処がついた頃、問題が見えてきた
32. © 2023 Findy Inc. この時の課題感 • デザイントークン適用の作業量が膨大 • カラー系のトークンから難易度があがる ◦ 意味としての整合性、仕様の確認、etc.. • 適用を進めても、開発がラクにならない
33. © 2023 Findy Inc. そして適用方針の見直した • UIリファクタリングと並行する方針に変更 ◦ UIコンポーネントをその過程で作成 ◦ そこにデザイントークンを適用する • 見通し ◦ UIコンポーネントの適用が進めば、 デザイントークン適用率の上昇につながるだろう
34. © 2023 Findy Inc. 最後に
35. © 2023 Findy Inc. 雑にやる • 精度を求めない • 利用する上で十分であれば、雑なもので運用する ▪ 私の場合は、ステークホルダーとのやりとりできれば十分だった
36. © 2023 Findy Inc. 現在の伸び代 (課題) • UIのコンポーネント作りに入り、適用率の変動が小さくなった → 進捗が見えずらい • カバレッジの向上がそもそもデザインシステムの推進として効果的 なのか(個人的な悩みです)
37. © 2023 Findy Inc. ご清聴ありがとうございました
38. © 2023 Findy Inc. Appendix (資料公開時に追加)