小さく始めるDesign System

デザイン言語システムを入れたらコミュニケーショ ンコストがぐっと下がった話〜メドレー TechLunch〜 http://developer.medley.jp/entry/2017/08/03/160000

“ これまでのデザインガイドラインは単にカラーや マージンの定義を取り決めるだけだったのです が、 Airbnb ではデザイン言語として定義し、他の 言語と同じようにチームと共有し、エンジニア・デ ザイナー同士で理解できる設計を作り上げている といった内容でした。 ”

よさそう

スタイルガイドだけでは足りない部分がDesign Systemで補えそう

ジョブメドレーにおいて （デザインの領域は小山さんがいい感じにやってくれるとして） フロントエンドの領域でDesign Systemをどのように捉えて どうやって取り込んでいくか

…etc

ジョブメドレーでDesign System導入すると 改善できそうなこと

ジョブメドレーでDesign System導入すると改善できそうなこと - 求職者側PC、求職者側SP、採用管理画面、etc… それぞれ別々でCSS/JSを書い てる

ジョブメドレーでDesign System導入すると改善できそうなこと - 求職者側PC、求職者側SP、採用管理画面、etc… それぞれ別々でCSS/JSを書い てる - CSSに記述している値に一貫性、規則性がない

ジョブメドレーでDesign System導入すると改善できそうなこと - 求職者側PC、求職者側SP、採用管理画面、etc… それぞれ別々でCSS/JSを書い てる - CSSに記述している値に一貫性、規則性がない - スタイルガイドの長期的な運用

ジョブメドレーでDesign System導入すると改善できそうなこと - 生産性　Productivity - 一貫性　Consistency - 持続可能性　Sustainability

Productivity 生産性

Productivity 生産性 - 何回ボタンのCSSを書き続け、これから先何回ボタンのCSSを書き続けるのか - ジョブメドレー全体を通して、ボタンに限らず全てのUIパーツで、どれだけ再利用せ ずに新たなCSSが増殖し続けているのか

Consistency 一貫性

Consistency 一貫性 - paddingやmargin、border-radius、duration、font-size等、あらゆる値に一貫性、規 則性がない

Sustainability 持続可能性 引用元： https://medium.com/@marcintreder/the-minimum-viable-design-system-75ca1806848a

Sustainability 持続可能性 “Before the style guide was done, it already turned into a zombie.” Marcin Treder / UXPin https://medium.com/@marcintreder/the-minimum-viable-design-system-75ca1806848a スタイルガイドは作り終わる前にゾンビに変わってる

Sustainability 持続可能性 - 常に変化し続けるデザインにスタイルガイドを同期し続けるのは困難

Design System とは

Design System とは Salesforce Lightning Design System https://www.lightningdesignsystem.com

Design System とは Primer http://primer.github.io/

Design System とは IBM CARBON DESIGN SYSTEM http://carbondesignsystem.com/

Design System とは Atlassian Design Language https://atlassian.design/

Design System とは eBay Skin https://ebay.github.io/skin/

Design System とは “Rules, constraints, and principles, implemented in design and code.” Diana / Github https://speakerdeck.com/broccolini/design-systems-when-and-how-much デザインシステムは、デザインとコードで実装されたルール、制約、原則のこと

Design System とは “A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.” Nathan Curtis / eightshapes https://twitter.com/nathanacurtis/status/656829204235972608 スタイルガイドはデザインの過程での遺物 デザインシステムはエコシステムを供給するプロダクト

Design System とは “A Design System isn’t a Project. It’s a Product, Serving Products.” Nathan Curtis / eightshapes https://medium.com/eightshapes-llc/a-design-system-isn-t-a-project-it-s-a-product-serving-products-74dcfffef935 デザインシステムはプロジェクトじゃなくて、プロダクトを供給するプロダクト

Design System とは 引用元： https://product-unicorn.com/design-systems-style-guides-all-those-libraries-what-the-hell-is-the-difference-4c2741193fdc

Design System とは 引用元： https://medium.com/@marcintreder/design-systems-sprint-1-the-interface-inventory-1f78d376e49a

Design System とは 引用元： https://speakerdeck.com/broccolini/design-systems-when-and-how-much

どのようにDesign Systemを 導入していくか

ジョブメドレーでDesign System導入したら改善できそうなこと - 生産性　Productivity - 一貫性　Consistency - 持続可能性　Sustainability

ジョブメドレーでDesign System導入したら改善できそうなこと - 生産性　Productivity - 一貫性　Consistency - 持続可能性　Sustainability それぞれどのようにアプローチしていくか

Productivity 生産性 1. Interface Inventory 2. ジョブメドレー全体で共通しているUIパーツ、または共通化したいUIパーツをリスト 化 3. Design Systemに反映 4. npmで供給

Productivity 生産性 Interface Inventory 引用元： http://bradfrost.com/blog/post/interface-inventory/

Productivity 生産性 “An interface inventory is a comprehensive collection of the bits and pieces that make up your interface.” Brad Frost http://bradfrost.com/blog/post/interface-inventory/ Interface Inventoryとは、プロダクトのインターフェースを作り上げている部品の包括的な 収集のこと

Productivity 生産性 Interface Inventory ジョブメドレー全体で共通しているUIパーツ、または共通化したいUIパーツをリスト化

Productivity 生産性 Design Systemに反映

Productivity 生産性 npmで供給

Consistency 一貫性 1. デザインで使う値をデザイナーから貰う 2. Design Tokensを作成 3. npmで供給

Consistency 一貫性 Design Tokens "We define our design in a single location and use a system to cascade it down to all platforms. We call it our Single Source of Truth." Sönke Rohde http://thibault.mahe.io/talks/design-tokens/#17 信頼できる唯一の情報源

Consistency 一貫性 Design Tokens 1つの場所で定義したデザインの値 を全てのプラットフォームで参照でき るフォーマットで提供する 引用元： https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421

Consistency 一貫性 Theo Salesforceが開発してるDesign Tokensの管理ツール https://github.com/salesforce-ux/theo

Consistency 一貫性 Theo Theoでymlから各プラット フォーム向けフォーマットで Design Tokensを出力する 引用元： https://www.slideshare.net/developerforce/introducing-the-salesforce-lightning-design-system

Sustainability 持続可能性 1. Design Systemをプロダクトとして扱うようにマインドを変える 2. スタイルガイドをプロダクトチーム全員が見られる場所に置く 3. 継続してメンテナンスする

Sustainability 持続可能性 Design Systemをプロダクトとして扱うようにマインドを変える 引用元： https://medium.com/@marcintreder/the-minimum-viable-design-system-75ca1806848a

Sustainability 持続可能性 スタイルガイドをプロダクトチーム全員が見られる場所に置く

Sustainability 持続可能性 継続してメンテナンスする

ジョブメドレーの Design Systemのイメージ

ジョブメドレーの Design Systemのイメージ

小さく始める

小さく始める - 最初から一気に色々やらない - まずは一部だけ導入してみる - 上手くいく部分といかない部分を検証する - Design Systemの改善と段階導入を繰り返す

小さく始める ジョブメドレー全体を通して共通して利用されるUIコンポーネント やDesign Tokens、Sass mixinなどから、Design Systemによって 供給した方が有用であると判断したものを、段階的にmonorepo 管理のリポジトリにnpmとして追加していく

小さく始める 最初はレイアウト用のflexboxユーティリティと スペースのdesign tokenから始める

小さく始める 採用管理画面のみ 5px, 10px, 15px, 20px… のような5の倍数だけど、それ以外は 8px, 16px, 24px, 32px… のように8の倍数のスペースのルール

小さく始める 採用管理画面も将来的には8の倍数の スペースのルールに近い状態にすると 思うけど、それまでは採用管理画面の scssでスペースのtokenを上書きする

小さく始める flexboxのユーティリティでは、 等間隔にflex itemを配置する際の スペースをdesign tokensから 利用する

小さく始める storybookなりstyleguideが github pagesで誰でも見られる状態 にする

小さく始める - Design Systemに反映した方がよいものがあれば、Design Systemにフィード バックしてDesign Systemのnpmから供給するようにしていく - 全部Design Systemから供給は無理だろうけど、新たにCSSを書き続けること を減らす CSS HTML Sketch

小さく始める CSS HTML Sketch CSS HTML Sketch CSS HTML Sketch Design System

小さく始める HTML CSS HTML Sketch CSS HTML Sketch Design System CSS Sketch Design System Feedback

小さく始める HTML HTML CSS HTML Sketch Design System CSS Sketch Design System CSS Sketch Design System Feedback Feedback

小さく始める CSS HTML Sketch CSS HTML Sketch CSS HTML Sketch Design System

- https://speakerdeck.com/broccolini/design-systems-when-and-how-much - http://thibault.mahe.io/talks/design-tokens/#1 - https://speakerdeck.com/broccolini/building-design-systems-at-github - https://speakerdeck.com/didoo/from-zero-to-cosmos - https://speakerdeck.com/mdo/build-your-own-bootstrap - http://bradfrost.com/blog/post/style-guide-driven-design-systems/ - https://github.com/alexpate/awesome-design-systems - https://medium.freecodecamp.org/how-to-build-a-design-system-with-a-small-team-53a3276d44ac - https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71 - https://adele.uxpin.com/ - https://github.com/opentable/design-tokens - http://bradfrost.com/blog/post/design-system-frictions/ - https://medium.com/@marcintreder/design-systems-sprint-0-the-silver-bullet-of-product-development-8c0ed83bf00d - https://medium.com/salesforce-ux/living-design-system-3ab1f2280ef7 - https://blog.prototypr.io/pattern-library-style-guides-design-systems-do-you-need-one-b7857af0f255 - https://speakerdeck.com/studiomohawk/design-system-as-a-product-at-frontrend-vol-dot-8 - https://github.com/salesforce-ux/theo - https://lernajs.io/ - https://primer.github.io/ - http://atomicdesign.bradfrost.com/chapter-1/ - https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421 - https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3 - http://bradfrost.com/blog/post/interface-inventory/ - https://medium.com/eightshapes-llc/a-design-system-isn-t-a-project-it-s-a-product-serving-products-74dcfffef935