雑に出してみるデザイントークン適用率

下記イベントで発表する資料です。

2023年6月22日
TechBrew 〜 一杯のお酒で繋がるエンジニアたち〜@福岡
https://findy.connpass.com/event/286643/

Transcript

1. © 2023 Findy Inc. 雑に出してみるデザイントークン適用率 松本 芳郎 2023.06.22
2. © 2023 Findy Inc. @m-yoshiro 松本 芳郎 / Matsumoto Yoshiro ファインディ株式会社 / Findy フロントエンドエンジニア。 GMOペパボ株式会社でデザイナー → 株式会社マネーフォワードでフロ ントエンドエンジニアに転身。 そして、2023年11月にファインディ株式会社にジョイン。Findy転職 のデザインシステム構築と推進に注力中! @bennkyougirai
3. © 2023 Findy Inc. 本日の発表内容は、先週発表した資料からのスピンオフです。 はじめに https://findy.connpass.com/event/285080/
4. © 2023 Findy Inc. その時にお話しできなかった、デザイントークンの計測方法に ついて取り上げます はじめに https://speakerdeck.com/myoshiro/dezaintokunnoshi-yong-lu-ji-ce-tosonohuo-yong
5. © 2023 Findy Inc. 話の流れ 1. なぜ、デザイントークンの適用率を計測したのか 2. デザイントークン適用率の計測方法
6. © 2023 Findy Inc. デザイントークンとは何か？ • トークンは、UI要素のスタイルの値を表す • トークンは、UI要素の最小単位として 扱われる • トークンは、すべての環境で利用可能な 一環したスタイルを生み出すために使われる 参考: Adobe blog: デザイナーと開発者の連携を効率化するデザイントークンとは何か？ | アドビUX道場 https://blog.adobe.com/jp/publish/2021/03/29/cc-web-what-are-design-tokens
7. © 2023 Findy Inc. Findyのデザインシステムは まだ赤ちゃんです
8. © 2023 Findy Inc. Findyのデザインシステムの現状 • 対象はFindy転職のみ • デザイン原則などの基礎部分は未着手 • 作業効率化を優先している ◦ デザイントークンの適用 ◦ FigmaのUIコンポーネント整備 小さく試そうとしてるフェーズ
9. © 2023 Findy Inc. 1. なぜ、デザイントークンの適用率 を計測したのか
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. 2. デザイントークン適用率の計測
17. © 2023 Findy Inc. 計測した指標 • デザイントークン適用率 スタイルプロパティ別の [トークン適用数 / プロパティの総数] 適用されていない 適用されている ※CSSを前提としてます。
18. © 2023 Findy Inc. 適用率計測の狙い • 進捗を管理できるようにする • デザイントークン適用と解決したい事柄を接続する • デザイントークンの適用方針を見直すきっかけになる
19. © 2023 Findy Inc. • データの収集 ◦ コードを検索して対象を抽出 ◦ grepなどの基本的なシェルで頑張る! • データの整形 ◦ Google シートで頑張る ◦ Query関数などを駆使する 雑に計測してみた
20. © 2023 Findy Inc.
21. © 2023 Findy Inc. • Kuja適用率 ◦ デザイントークン適用率 • バリエーション数 ◦ 値のバリエーション数 シートの内容
22. © 2023 Findy Inc. • データの収集 ◦ コードを検索して対象を抽出 ◦ grepなどの基本的なシェルで頑張る! • データの整形 ◦ Google シートで頑張る ◦ Query関数などを駆使する
23. © 2023 Findy Inc. データの収集 git grep -P '((theme|kuja)(\.[a-zA-Z]+)*\.color)|(#[a-fA-F0-9]{6,8})' -- '*.ts?' \ | sed -e 's/:[[:blank:]]*/\|/;s/[[:blank:]]*$//' \ | grep -v 'landing-page' | sort • トークン共通の名称を手がかりにして検索する 実際に使っていたスクリプト /path/src/textarea.component.tsx|color: ${kuja.color.control.text.placeholder}; 抽出例 この “|”(vertical bar) はスプレッドシートで整形 しやすくするためのもの
24. © 2023 Findy Inc. • シートは大きく分けて2種類 ◦ スクリプトで得たデータを整形するシート ◦ 整形後のデータを元に適用率の算出を行うシート スプレッドシートで整形 整形シート 算出シート
25. © 2023 Findy Inc. • 手順は ◦ shellで取得した情報をシートの 所定のセルにペースト ◦ “テキストを列に分割” で要素を ファイルのパスとスタイルの値 に分割 ◦ スタイルの値を別のセルから参 照して、適用率を算出しやすい 情報に変換する 整形シート 1
26. © 2023 Findy Inc. 整形シート 2 列に分割 左を参照して変換したデータ
27. © 2023 Findy Inc. 整形シート 3 左を参照して変換したデータ =ARRAYFORMULA( IF(ISBLANK(B3:B), "", REGEXEXTRACT(B3:B,"(0|\d*(?:px|%)(?:\s?\d*px|%)*|(?:theme|kuja)\.\w+\.\w)")) ) Value Kuja (トークンが適用されているかを表すboolean) =ARRAYFORMULA( IF(ISBLANK(B3:B), "", REGEXMATCH(B3:B,"(theme|kuja)(\.\w+)*\.borderRadius") )) セルの関数の一例
28. © 2023 Findy Inc. • 手順は ◦ 欲しいデータを整形シートから参照する ◦ 参照したデータから適用率を算出 算出シート 1 欲しいデータ 右のデータを元に適用率を算 出
29. © 2023 Findy Inc. • この例では、QUERY関数を使ってる SQLっぽく集計することができる。 ◦ 右の3列は以下の数式1つで出力してる 算出シート 2 欲しいデータ =QUERY('__border-radius__'!A2:J839, "select A, H, count(H) where F = 'border-radius' group by A, H order by A")
30. © 2023 Findy Inc. ちなみに、今はコマンドラインで出す簡単なサマリーを用いてます Postcss 使ってASTベースで計測
31. © 2023 Findy Inc. デザイントークン適用率の活用
32. © 2023 Findy Inc. この先の話は、以下の資料で！ (再掲) https://speakerdeck.com/myoshiro/dezaintokunnoshi-yong-lu-ji-ce-tosonohuo-yong
33. © 2023 Findy Inc. ご清聴ありがとうございました