Design System Guild の1年を振り返る

2024/09/18 (水) に開催された「Wantedly Tech Night~ウォンテッドリーのデザインとフロントエンドについて~」で発表した資料です。
https://wantedly.connpass.com/event/329191/

Design System Guild という組織の立ち上げから1年経ったので、発足の経緯や振り返りを話しました。

Transcript

1. Design System Guild Design System 開発組織の1年を振り返る Sep. 18 2024 - Tsuyoshi Hara © 2024 Wantedly, Inc.
2. 自己紹介 名前: 原 剛士 (ハラツヨシ) / @chloe463 所属・役職: • Quality Control Squad • Frontend Chapter Leader • Design System Guild © 2024 Wantedly, Inc. 最近の業務でハマっているもの : ESLint の v9 対応 最近の趣味でハマっているもの : Baba is You
3. みなさんどうやって デザインシステムの開発・運用を していますか？ © 2024 Wantedly, Inc.
4. デザインシステムの 運用難しい © 2024 Wantedly, Inc.
5. © 2024 Wantedly, Inc. デザインシステム開発・運用の難しさ • 発起人やコアメンバーにしかノウハウ・知見が溜まっていない…。 • Figma にコンポーネントはあるのにドキュメントはないの...？ • メイン業務に時間が取られて開発が進まない...。 • コンポーネントライブラリの開発が進まない...。 • etc…
6. Design System Guild © 2024 Wantedly, Inc. デザインシステム開発・運用をするために
7. 目次 1. Design System Guild とは 2. なぜ Guild を立ち上げたのか 3. Guild で何をしているか 4. 立ち上げから1年経っての振り返り © 2024 Wantedly, Inc.
8. Design System Guild とは デザインシステム開発のための組織 © 2024 Wantedly, Inc.
9. Design System Guild とは © 2024 Wantedly, Inc. デザインシステムに関する課題を 解決するために立ち上がった組織
10. © 2024 Wantedly, Inc. Guild とは？ ウォンテッドリーの組織の一形態 https://speakerdeck.com/wantedly/wantedly-recruitment-brochure?slide=20 前提知識: ウォンテッドリーの組織構成の紹介
11. 自己紹介 名前: 原 剛士 (ハラツヨシ) / @chloe463 所属・役職: • Quality Control Squad • Frontend Chapter Leader • Design System Guild © 2024 Wantedly, Inc. 最近の業務でハマっているもの : ESLint の v9 対応 最近の趣味でハマっているもの : Baba is You
12. © 2024 Wantedly, Inc. あるトピックの解決のために集結した組織 Guild とは？ ウォンテッドリーの組織構成の紹介
13. © 2024 Wantedly, Inc. あるトピックの解決のために集結した組織 Guild とは？ ウォンテッドリーの組織構成の紹介 • デザインシステムを日常的に使用する デザイナー、Webフロントエンドエンジニ ア、モバイルエンジニアで構成 • 毎週ミーティングを実施
14. なぜ Guild を立ち上げたのか 少数の有志 / 個人的なもの → 組織的な運営 © 2024 Wantedly, Inc.
15. © 2024 Wantedly, Inc. Guild 立ち上げ以前のデザインシステム運営 少数の有志による活動
16. © 2024 Wantedly, Inc. Guild 立ち上げ以前のデザインシステム運営 有志による活動 • 発起人であったデザインマネージャーと数人の Web フロントエンドエンジニアを中心 に開発が行われていた。 ◦ 各種コンポーネントについての議論 ◦ React ライブラリの実装など • 定例などはなく、都度使用時に困ったことなどを解消しつつ開発を進めていた。
17. © 2024 Wantedly, Inc. Guild 立ち上げ以前のデザインシステム運営 その結果？ • 散発的に議論が行われており、議論の結果生まれた結論やドキュメントのまとまりが ない状態であった。 • 当時デザインシステムを積極的に開発していたメンバーの大半が退職しており、いわ ゆるロストテクノロジーになってしまっていた。
18. © 2024 Wantedly, Inc. Guild 立ち上げ以前のデザインシステム運営 顕在化した課題 • トークンやコンポーネントの使い方・定義などが議論に参加したメンバーの 頭の中にしかなく、使い方が分からない …。 • 始めに考えられていた思想が良くわからない …。
19. © 2024 Wantedly, Inc. Guild 立ち上げの理由 有志による活動ではなく 組織として継続的に 開発・運用できる状況を作ろう
20. Guild で何をしているか Design System 1.0 を目指す © 2024 Wantedly, Inc.
21. © 2024 Wantedly, Inc. Design System Guild が目指すもの Design System 1.0 / だれでも使えるデザインシステム • デザイントークンやコンポーネントについての定義や使い方などをまとめた ドキュメントを策定 • 各プラットフォーム向けの実装を用意 ◦ Figma コンポーネント ◦ Web アプリ用のコンポーネントライブラリ ◦ Mobile アプリ用のコンポーネントライブラリ
22. © 2024 Wantedly, Inc. デザインシステムの課題を解決するための組織 Design System Guild (再掲) • デザインシステムを日常的に使用する デザイナー、Webフロントエンドエンジニ ア、モバイルエンジニアで構成 • 毎週ミーティングを実施
23. © 2024 Wantedly, Inc. 定例を実施 Guild でやっていること • デザインシステムに関しての課題提起を する場。 • 疑問点についてこの場で解消できること もある。 • 詳細は個別に issue を作って別途議論。
24. © 2024 Wantedly, Inc. 定例で話している課題の例 Guild でやっていること
25. © 2024 Wantedly, Inc. 定例で話している課題の例 Guild でやっていること • セマンティックトークンについて → 新しい概念作成の提案 • コンポーネントのバリエーションについての整理 • Typography の整理 • Elevation Null って共通概念？ → 疑問解消 • Shape について → 新トークンの追加 既存概念の整理・見直し
26. © 2024 Wantedly, Inc. ドキュメント化を推進 Guild でやっていること デザイントークンやコンポーネントについて 定義があやふやなところを詰め、 ドキュメント化を進めている
27. © 2024 Wantedly, Inc. Figma コンポーネントの整備 Guild でやっていること
28. © 2024 Wantedly, Inc. コンポーネントセットの整備 Guild でやっていること
29. 立ち上げから1年経っての振り返り 良かったところ・課題 © 2024 Wantedly, Inc.
30. © 2024 Wantedly, Inc. 良かったポイント 👍 1年経過しての振り返り • Guild メンバーから課題提起がされるようになったこと。 ◦ 数人の有志だけしか改善活動を行っていなかったが、Guild という組織にし たことで関わるメンバー全員から課題が集まるようになった。 ◦ よりオーナーシップをもって改善に取り組めるようになった。 • 実際に定義が見直されるコンポーネントなどが登場した。 • 結果としてより使いやすいシステムに近づいていると感じている。
31. © 2024 Wantedly, Inc. これからの伸びしろ 🧐 1年経過しての振り返り • Guild のタスクのために時間を割くことは依然として難しい。 • Squad のタスクのほうが優先度が高いため、 Guild のタスクをアサインしてもなかなか進めづらいケースがある。 → マネージャー陣と調整の上 　 Squad 化？ / SquadとGuild のタスクバランスの調整をもっといい感じに行う 　 などを考えている。
32. まとめ © 2024 Wantedly, Inc.
33. © 2024 Wantedly, Inc. まとめ • デザインシステムを継続的に開発・運用するために Design System Guild を 作った。 • 定例ミーティングを実施したり、ドキュメント化を推進することで、 Design System 1.0 といえるようなものを目指している。 • Guild メンバーそれぞれから課題提起されることで、以前より議論が活発になっ たり、理解が深まったりしている。 • 一方、Guild タスクの進め方については改善の余地があり、今後の課題である。
34. © 2024 Wantedly, Inc. より詳細を知りたい方 Guild 発足に関してまとめたブログや フロントエンドに特化して、これまでの歩みをまとめた スライドがあります
35. © 2024 Wantedly, Inc. ありがとうございました！