Component-Driven Design & Development

フロントエンドカンファレンス北海道2024
https://www.frontend-conf.jp/

X
https://twitter.com/__sakito__

Transcript

1. フロントエンドカンファレンス北海道2024 Component-Driven 
 Design & Development sakito 2024/08/24
2. Sakito(@__sakito__) V サイボウズ株式会B V プロダクトデザイナー、デザインテクノロジスト、
 デザインプログラムマネージャー、フロントエンドのマネージャ9 V デザイン室のリーダ9 V 犬とハロプロが好き 自己紹介
3. PG Component-Driven Design & Developmentと 3G DesignとDevelopmentを繋ぐDesign TokeQ #G フロントエンド開発に繋がるFigmaの活' ÅG Storybookの進化と活' HG まとめ アジェンダ
4. Component-Driven Design & Developmentとは
5. Addy Osmani氏の 「Components Should Be Focused, Independent, Reusable, Small & Testable (FIRST)」
 より引用  Keep it (F)ocused.(焦点を絞るs  Keep it (I)ndependent.(独立させるs  Keep it (R)eusable.(再利用可能s  Keep it (S)mall.(小さいs  Keep it (T)estable.(テスト可能s  or in short, FIRST Componentとは？
6. Componentを作% Componentを組み合わせ% Componentでページを作% バックエンドと結合する 参照：Component Driven User Interfaces Component-Driven Development
7. n Component-Driven Design ’ DesignもComponentベースで構築していく世界になりつつあ` ’ UI Kit,Material Design,Human Interface Guidelines,Design Syste ’ Component-Driven Desigw ’ Componet-Drivenを進めやすくするデザインツールや手法も増え" ’ Design Token,FigmV ’ ツールや手法もDesignとDevelopmentの垣根は曖昧になってきてい る n Design側の潮流や知識があることで、より良いComponentが作れるはÀ n 本日の主題はComponent-Driven Developmentのためにもフロントエンド が知っておきたいDesign周りも絡めた話 Component-Driven Design と Development
8. DesignとDevelopmentを繋ぐDesign Token
9. g Designをプラットフォームに依存しない形で共有できるもk g ツール、技術、共通語彙でもあ€ g 色、タイポグラフィ、余白、影な“ g Design TokenはGlobal TokenとSemantic Tokenに別れ€ g Global Toke} g 直接的にComponentに使用しな‰ g Semantic Toke} g Global Tokenを参照し、意味、目的を持って命名し、Componentで使用す€ g Design Tokenを使う、学ぶことで下記のメリットがあ€ g 一貫性の確保：すべての要素が同じ規則に従うため、デザインの一貫性が保たれ€ g Designの基盤：トークンを基に、より複雑なコンポーネントを構築でき€ g デザインと開発の橋渡し：両者が同じ「言語」でコミュニケーションできる Design Tokenとは？
10. Design Tokenとは？ 参照：Update 1: Tokens, variables, and styles – Figma Learn - Help Center
 https://help.figma.com/hc/en-us/articles/18490793776023-Update-1-Tokens-variables-and-styles
11. Design Tokenとは？ 参照：Update 1: Tokens, variables, and styles – Figma Learn - Help Center
 https://help.figma.com/hc/en-us/articles/18490793776023-Update-1-Tokens-variables-and-styles
12. JSONはW3C Design Tokens Community Groupで
 Design Tokens Format Moduleとして仕様が定義されていh Design TokenはJSONで表現し、プラットフォームに使えるように変換すh 変換するツールはAmazonのOSSであるStyle Dictionaryが定番 色 タイポグラフィ 余白 影 Web(CSS Variables) Android iOS Design Tokens Format Module
13. 2 Design TokenはDesign要素をComponentに付与できf 2 Headless ComponentはDesign要素を持たないComponen5 2 マークアップの 2 shadcn/ui, Catalyst, radix-uE 2 振る舞いのみをHooksで提供するReact-Aria Hook" 2 これらの要素でComponentを作ることができる Design TokenとHeadless Component Component化 Design Token
 ( Design要素) CSS Variables Headless Component
 (Styleを持たない) Hooks
 (振る舞い)
14. Design Tokenについてはこちらのnoteもどうぞ デザイントークンを『デザインの決定を開発チーム全体に伝えるための「方法論」』と定義した
 https://note.com/amishiratori/n/n261a796d87a6
15. フロントエンド開発に繋がるFigmaの活用
16. Developmentに役立つFigmaの基本機能 a DesignのComponentF a Figma上でComponentを使いまわせ€ a PropsのようなI/FをVariants機能で持たせることができ€ a LayerのComponent名やComponentの単位はそのまま実装に活かせ€ a Figma Variableƒ a さまざまな Designのプロパティを格納でき€ a Design Tokenのようなデータも持たせれる
17. Developmentに役立つFigmaの基本機能 Layer Variants Variables
18. DevMode G Figmaの開発用モーq G $25 ~ $35の課金が必要(Editorには同梱されている4 G 開発用にさまざまな機能があ5 G Designデータの数値などを表示してくれ5 G Component Playgrounˆ G DesignからHTMLやCSSの生 G VS Code連携(Figma for VS Code4 G GitHubやStorybookなどの連 G etc...
19. DevMode 参照：Dev Mode: Design-to-Development | Figma
 https://www.figma.com/dev-mode/ Component Playgroundの例
20. Code Connect ) Figmaのデータとソースコードを紐づける機h ) <component-name>.figma.tsxファイルを作成し、CLIを叩いて連% ) Storybook連携もでき2 ) DevModeでコードを生成するときにComponent名やPropsがソースコードと 一致したものになる
21. 実際に行っているFigmaの活用例 ƒ Design Tokenを管理する「Tokens Studio」プラグインで 下記を行w ƒ Design TokenのJSONを生‚ ƒ GitHubに変更したJSONを元にPRが出せP ƒ FigmaのVariablesにもExportすP ƒ デザイナーはVariablesにあるTokenから色やフォントを選@ ƒ Semantic Tokenのためにデザインテクノロジストとデザイナーで、
 用途や名前を考えP ƒ 「Style Dictionary」でDesign TokenのJSONをCSS Variablesなどに変換すP ƒ Componentの実装には生成したCSS Variablesを使用する (DevModeとCode Connectはまだフル活用できていない)
22. 実際に行っているFigmaの活用例 JSON Designで使えるように
 Figma VariablesへExport Semantic Tokenを作る デザイナーがデザイン時に使用 JSONをStyle Dictionaryで変換 CSS Variavles Componentに適用 Developmentルート Designルート
23. Storybookの進化と活用
24. StorybookとChromatic E Storyboo3 E コンポーネントを開発、テスト、管理するためのOSSツーU E 実環境と分離したコンポーネントの動作確認ができる E Chromatil E Storybookのメンテナ達が立ち上げたChroma Software Inc.が運† E 一部無料だが、重量課金型のサービt E Storybookの機能を補完し、さらに便利にしてくれる
25. Storybookの進化 ` ここ数年はテストツールとしてのアップデートが増えてきd ` Chromaticを使用したVisial TesQ ` Storybook上でTestを動かすPlay functio' ` @storybook/test 
 @storybook/addon-interactionƒ ` Playwright上でStoryを動かすパッケージの提 ` @playwright/experimental-ct-reacQ ` @storybook/react/experimental-playwrighQ ` Test用の関数の追4 ` fn, expect.. ` Chromatic上ではPlaywright,Cypressを動かし、E2Eを参照もできる
26. 実際に行っているStorybookの活用：情報の集約 a Componentにまつわる管理Storybookに集c a テスT a 操作、見た目の仕H a I/h a 基本的な実装パターンの2 a 使用すべき箇所、使用すべきでない箇所の明記
27. 実際に行っているStorybookの活用：情報の集約
28. 実際に行っているStorybookの活用：品質と効率へ寄与 k Componentにまつわる管理Storybookに集m k テス‡ k 操作、見た目の仕ˆ k I/9 k 基本的な実装パターンのd k 使用すべき箇所、
 使用すべきでない箇所の明X k 上記のComponentは専門の Design System Teamが管B k 利用するのはデザイナーや機能開発チーu k Componentの品質を上げることで、機能開発チームは
 Component単位のQAをskipすることができるように
29. まとめ
30. まとめ Y Component-Driven Design & Developmentはデザイナーとフロントエンドのコラ ボが不可P Y Design TokenやFigmaを活用していくことで
 Component Developmentの効率、品質を上げていくことができ Y Figmaはフロントエンドに必要不可欠なツールにもな Y StorybookはComponent Design & Developmentに必要なオールインワンツール となってきÆ Y Componentを起点に品質・効率をあげていこう！ Component Component Compon
31. ありがとうございました！