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

by Tech Leverages

Slide 1

Slide 1 text

デザインシステム基盤構築実践 2024/03/13 古庄和也

Slide 2

Slide 2 text

古庄和也所属レバテック開発部ITSプロダクト開発グループ経歴 2020年4月レバレジーズ株式会社新卒入社業務フリーランス領域のPdM兼テックリード直近はプロダクト・システム戦略作りがメイン趣味ゴルフ、ランニング、愛猫のブラッシング https://twitter.com/k_furusho_

Slide 3

Slide 3 text

アジェンダはじめにデザインシステムとは VoLT構築のプロセス VoLTのシステム設計・実装まとめさいごに

Slide 4

Slide 4 text

はじめに

Slide 5

Slide 5 text

このような経験ありませんか？本番とデザインデータが違うデザインデータどこにあるか分かんないこれ、paddingいくつ？コンポーネントごとに値が違う変数指定されているものと、されていないものが散見される実装されたものと、デザインデータに差異があり確認コスト高いデザイン制作に時間かかるフロントエンド実装完了までに時間かかる

Slide 6

Slide 6 text

デザイン制作・フロントエンド開発に関して3つの面の問題があります

Slide 7

Slide 7 text

No pain, no gain. 今の苦労は後の楽に繋がる。　

Slide 8

Slide 8 text

というわけで、デザインシステム作り始めました

Slide 9

Slide 9 text

デザインシステムとは

Slide 10

Slide 10 text

デザインの一貫性を保つための、ドキュメントやUIパーツ、ガイドライン、制作プロセスなどを総称する用語デザインシステムには多くの場合、以下の3つが含まれるデザイン原則スタイルガイドラインパターンライブラリ

Slide 11

Slide 11 text

デザイン原則サービスやそれを作る組織が重視する価値観、判断基準が定義されているサービスのデザインとして目指すもののほか、ブランドとして表現したいものも含まれるスタイルガイドラインアイコンやタイポグラフィ、カラーパレット、文言のガイドラインなどが含まれるデザイン原則に沿って、どのようなものを組み合わせてデザインを作ればよいのかを示すカラーパレットはデザイントークンと呼ばれる形でCSSの変数として定義されることが多いパターンライブラリデザインを構成するデザイン言語をパターン化し、ライブラリとして再利用可能にしたものパターンの粒度はさまざまでUIコンポーネントのライブラリとなっている場合もある

Slide 12

Slide 12 text

デザインシステムとはレバテックのデザインシステム => 「VoLT」の構成 (※将来的にVoLTを社外公開したい) デザイン原則基本要素(スタイルガイドライン) パターンライブラリ共通UIコンポーネントサービス別コンポーネント

Slide 13

Slide 13 text

VoLT「デザイン原則」の抜粋

Slide 14

Slide 14 text

VoLT「基本要素」の抜粋

Slide 15

Slide 15 text

VoLT「パターンライブラリ」の抜粋

Slide 16

Slide 16 text

VoLT構築のプロセス

Slide 17

Slide 17 text

レバテックのミッション・ビジョン再編とシステムリニューアルプロジェクト発足システム戦略と課題 EventStormingとRDRA2.0で大規模レガシーシステムのフルリニューアルPJに挑むデザインと開発の一貫性を維持するコストの肥大化 10を超えるサービスが独立してデザイン・デザインデータをバラバラに制作しており、開発との認識齟齬やデザイン漏れが頻発

Slide 18

Slide 18 text

導入推進に向けた体制

Slide 19

Slide 19 text

開発にデザインシステムを取り入れる仕組みの策定社内ライブラリを提供し、一貫性・再利用性の向上を促進デザイントークン stable 版提供を配布済 Figma Tokens から連携される .json をJS(cjs, esm)/ TS(.d.ts) /SCSSに変換して配布パターンライブラリ共通マスターコンポーネント鋭意開発中レバテックに共通するトークンやガイドライン情報、UIコンポーネント Storybook のカタログを用意してバージョンごとに配布サービス別コンポーネント開発予定 ex. レバテックフリーランス共通コンポーネント

Slide 20

Slide 20 text

VoLTのシステム設計・実装

Slide 21

Slide 21 text

システム構成ディレクトリ構成 tokens デザイントークン ui 共通UIコンポーネント infra StoryBook環境のインフラ管理 TypeScriptを利用してnpmパッケージを作成して社内に配布 Bundlerにはtsupを利用複数のライブラリとして配布 tokens ui

Slide 22

Slide 22 text

デザイントークンの管理と配布 Figma Tokenからデータを読み取り変換 Figma Tokensを利用してjson連携 Style-Dictionaryを使ったコード変換トークン情報をライブラリとして配布ライブラリ用にバンドル packageのPublish用のワークフロー FigmaTokens差分発生(Push)時に自動PR作成 PR作成時にgen:tokenとpackage.jsonを更新 PRマージ時点でリリース

Slide 23

Slide 23 text

デザイントークンの管理と配布 Figma Tokenからデータを読み取り変換 Figma Tokensを利用してjson連携 Style-Dictionaryを使ったコード変換

Slide 24

Slide 24 text

デザイントークンの管理と配布トークン情報をライブラリとして配布ライブラリ用にバンドル Nuxt 3ではcjsだとSSRが正しく動作しないため出力したjsをライブラリ用にバンドル ES Modules · Nuxt Concepts packageのPublish用のワークフロー FigmaTokens差分発生(Push)時自動PR作成 token生成+package.jsonを更新 PRマージ時最新バージョンのリリース

Slide 25

Slide 25 text

デザイントークンの使用例

Slide 26

Slide 26 text

マスタコンポーネントの構成

Slide 27

Slide 27 text

マスタコンポーネントの使用例

Slide 28

Slide 28 text

Storybookの運用

Slide 29

Slide 29 text

まとめ

Slide 30

Slide 30 text

まとめレバテックは、デザインシステムの運用初期フェーズ定義したからゴールではなくて、これからがスタートデザインシステムは完成すると便利だけど、すごく大変メディアとプラットフォームを横断したデザインシステムは稀有で、挑戦の難易度も高く面白い

Slide 31

Slide 31 text

さいごに宣伝

Slide 32

Slide 32 text

アクセシビリティに関する勉強会を定期開催しています！毎週月曜19:30~20:30に開催しているので、ご興味ある方は是非参加お願いします！ https://connpass.com/event/312806/