小さく始めるDesign System /Design System

Transcript

1. 小さく始めるDesign System

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

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

4. よさそう

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

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

7. …etc

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

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

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

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

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

13. Productivity 生産性

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

15. Consistency 一貫性

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

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

18. 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 スタイルガイドは作り終わる前にゾンビに変わってる

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

20. Design System とは

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

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

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

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

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

26. Design System とは “Rules, constraints, and principles, implemented in design

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

27. 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 スタイルガイドはデザインの過程での遺物 デザインシステムはエコシステムを供給するプロダクト

28. 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 デザインシステムはプロジェクトじゃなくて、プロダクトを供給するプロダクト

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

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

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

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

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

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

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

    Systemに反映 4. npmで供給

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

37. 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とは、プロダクトのインターフェースを作り上げている部品の包括的な 収集のこと

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

39. Productivity 生産性 Design Systemに反映

40. Productivity 生産性 npmで供給

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

42. 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 信頼できる唯一の情報源

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

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

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

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

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

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

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

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

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

52. 小さく始める

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

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

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

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

    32px… のように8の倍数のスペースのルール

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

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

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

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

    を減らす CSS HTML Sketch

61. 小さく始める CSS HTML Sketch CSS HTML Sketch CSS HTML Sketch

    Design System

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

    CSS Sketch Design System Feedback

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

    Design System CSS Sketch Design System Feedback Feedback

64. 小さく始める CSS HTML Sketch CSS HTML Sketch CSS HTML Sketch

    Design System

65. - 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