デザインシステム基盤構築実践

# 発表資料
「デザインシステム基盤構築実践」
2024/3/13に開催したレバレジーズxビザスク合同勉強会の発表資料です。

## 概要
- レバテックのデザインシステム「VoLT」の構成
- 「デザイン原則」「スタイルガイドライン」「パターンライブラリ」
- デザインシステム導入と活用に向けたPJチームの発足
- デザインシステム導入背景
- 開発にデザインシステムを取り入れる仕組みの策定
- デザイントークンの管理と配布
- メディアとプラットフォームを横断したデザインシステムの挑戦

Transcript

1. デザインシステム基盤構築実践 2024/03/13 古庄和也
2. 古庄 和也 所属 レバテック開発部ITSプロダクト開発グループ 経歴 2020年4月 レバレジーズ株式会社 新卒入社 業務 フリーランス領域のPdM兼テックリード 直近はプロダクト・システム戦略作りがメイン 趣味 ゴルフ、ランニング、愛猫のブラッシング https://twitter.com/k_furusho_
3. アジェンダ はじめに デザインシステムとは VoLT構築のプロセス VoLTのシステム設計・実装 まとめ さいごに
4. はじめに
5. このような経験ありませんか？ 本番とデザインデータが違う デザインデータどこにあるか分かんない これ、paddingいくつ？ コンポーネントごとに値が違う 変数指定されているものと、されていないものが散見される 実装されたものと、デザインデータに差異があり確認コスト高い デザイン制作に時間かかる フロントエンド実装完了までに時間かかる
6. デザイン制作・フロントエンド開発に関して3つの面の問題があります
7. No pain, no gain. 今の苦労は後の楽に繋がる。　
8. というわけで、 デザインシステム作り始めました
9. デザインシステムとは
10. デザインの一貫性を保つための、ドキュメントやUIパーツ、ガイドライン、制作プロセスなどを総称する用語 デザインシステムには多くの場合、以下の3つが含まれる デザイン原則 スタイルガイドライン パターンライブラリ
11. デザイン原則 サービスやそれを作る組織が重視する価値観、判断基準が定義されている サービスのデザインとして目指すもののほか、ブランドとして表現したいものも含まれる スタイルガイドライン アイコンやタイポグラフィ、カラーパレット、文言のガイドラインなどが含まれる デザイン原則に沿って、どのようなものを組み合わせてデザインを作ればよいのかを示す カラーパレットはデザイントークンと呼ばれる形でCSSの変数として定義されることが多い パターンライブラリ デザインを構成するデザイン言語をパターン化し、ライブラリとして再利用可能にしたもの パターンの粒度はさまざまでUIコンポーネントのライブラリとなっている場合もある
12. デザインシステムとは レバテックのデザインシステム => 「VoLT」の構成 (※将来的にVoLTを社外公開したい) デザイン原則 基本要素(スタイルガイドライン) パターンライブラリ 共通UIコンポーネント サービス別コンポーネント
13. VoLT「デザイン原則」の抜粋
14. VoLT「基本要素」の抜粋
15. VoLT「パターンライブラリ」の抜粋
16. VoLT構築のプロセス
17. レバテックのミッション・ビジョン再編とシステムリニューアルプロジェクト発足 システム戦略と課題 EventStormingとRDRA2.0で大規模レガシーシステムのフルリニューアルPJに挑む デザインと開発の一貫性を維持するコストの肥大化 10を超えるサービスが独立してデザイン・デザインデータをバラバラに制作しており、開発との認識齟齬やデザイン漏れが頻発
18. 導入推進に向けた体制
19. 開発にデザインシステムを取り入れる仕組みの策定 社内ライブラリを提供し、一貫性・再利用性の向上を促進 デザイントークン stable 版提供を配布済 Figma Tokens から連携される .json をJS(cjs, esm)/ TS(.d.ts) /SCSSに変換して配布 パターンライブラリ 共通マスターコンポーネント 鋭意開発中 レバテックに共通するトークンやガイドライン情報、UIコンポーネント Storybook のカタログを用意してバージョンごとに配布 サービス別コンポーネント 開発予定 ex. レバテックフリーランス共通コンポーネント
20. VoLTのシステム設計・実装
21. システム構成 ディレクトリ構成 tokens デザイントークン ui 共通UIコンポーネント infra StoryBook環境のインフラ管理 TypeScriptを利用してnpmパッケージを作成して社内に配布 Bundlerにはtsupを利用 複数のライブラリとして配布 tokens ui
22. デザイントークンの管理と配布 Figma Tokenからデータを読み取り変換 Figma Tokensを利用してjson連携 Style-Dictionaryを使ったコード変換 トークン情報をライブラリとして配布 ライブラリ用にバンドル packageのPublish用のワークフロー FigmaTokens差分発生(Push)時に自動PR作成 PR作成時にgen:tokenとpackage.jsonを更新 PRマージ時点でリリース
23. デザイントークンの管理と配布 Figma Tokenからデータを読み取り変換 Figma Tokensを利用してjson連携 Style-Dictionaryを使ったコード変換
24. デザイントークンの管理と配布 トークン情報をライブラリとして配布 ライブラリ用にバンドル Nuxt 3ではcjsだとSSRが正しく動作しないため 出力したjsをライブラリ用にバンドル ES Modules · Nuxt Concepts packageのPublish用のワークフロー FigmaTokens差分発生(Push)時 自動PR作成 token生成+package.jsonを更新 PRマージ時 最新バージョンのリリース
25. デザイントークンの使用例
26. マスタコンポーネントの構成
27. マスタコンポーネントの使用例
28. Storybookの運用
29. まとめ
30. まとめ レバテックは、デザインシステムの運用初期フェーズ 定義したからゴールではなくて、これからがスタート デザインシステムは完成すると便利だけど、すごく大変 メディアとプラットフォームを横断したデザインシステムは稀有で、挑戦の難易度も高く面白い
31. さいごに宣伝
32. アクセシビリティに関する勉強会を 定期開催しています！ 毎週月曜19:30~20:30に開催しているので、 ご興味ある方は是非参加お願いします！ https://connpass.com/event/312806/