Design System as a Product @ Frontrend Vol.8

デザインを多くに伝える『ことば』に変え、メンテナンスし続けることがシステムをデザインするということ。
その『ことば』達の辞書であるDesign Systemsを作るために必要な気づき、人、そしてチームについて。

Transcript

1. Design System
   as a Product
   Yuya Saito @ Nikkei
   Frontrend Vol.8
   2016.12.05
   

   View Slide

2. Frontend Engineer @ Nikkei
   Yuya Saito
   

   View Slide

3. frontendweekly.tokyo
   Frontend Weekly
   

   View Slide

4. View Slide

5. WHat is
   Design System?
   

   View Slide

6. “
   A design system is everything that makes
   up your product.
   — Mark Otto
   

   View Slide

7. Typography
   Layout
   Grid
   Color
   Icon
   Components
   Coding Style…
   

   View Slide

8. Examples
   

   View Slide

9. Bootstrap
   by Twitter
   

   View Slide

10. Material
    Design
    by Google
    

    View Slide

11. Lightning
    Design
    System
    by salesforce
    

    View Slide

12. Predix
    Design
    System
    by GE
    

    View Slide

13. Origami
    by Financial Times
    

    View Slide

14. Why Do We Need
    Design System?
    

    View Slide

15. by OpenSignal
    

    View Slide

16. View Slide

17. Design
    Technical debt
    

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. Managed Chaos
    

    View Slide

22. Components of
    Design System
    

    View Slide

23. Style Guides
    

    View Slide

24. Brand
    identity
    

    View Slide

25. Design
    language
    

    View Slide

26. Voice and
    tone
    

    View Slide

27. Code style
    

    View Slide

28. Pattern
    Libraries
    

    View Slide

29. Problem with
    Design System
    

    View Slide

30. Design System
    

    View Slide

31. Goal for Design System
    

    View Slide

32. View Slide

33. View Slide

34. Scaling is Hard
    

    View Slide

35. Evangelising is Harder
    

    View Slide

36. People for Design System
    

    View Slide

37. “
    A Design System isn’t a project.
    It’s a product, serving products.
    — Nathan Curtis
    

    View Slide

38. Introduce
    The Talents
    

    View Slide

39. デザイナがどんなコンセプトを形に
    しようとしているのかについて
    共感できること
    

    View Slide

40. エンジニアがシステムを作るのに
    必要となる仕様や⽅法論について
    理解できること
    

    View Slide

41. デザイナとエンジニアの中間に
    ⾝を置けるバランス感覚を持った⼈
    

    View Slide

42. View Slide

43. View Slide

44. Design Fundamentals
    

    View Slide

45. Tiny Debt
    also scale fast
    

    View Slide

46. Should Designer Code?
    

    View Slide

47. Not gonna lie.
    It’s too hard to learn it now
    

    View Slide

48. デザイナとエンジニアには
    ギャップがある
    

    View Slide

49. Continuous
    Collaboration
    

    View Slide

50. Continuous Delivery
    

    View Slide

51. Concept
    Design System
    Develop
    

    View Slide

52. View Slide

53. Why?
    

    View Slide

54. ベストケースシナリオ vs.
    現実的なデータ
    

    View Slide

55. "Living" Design System
    

    View Slide

56. ⽬に⾒えているものの、
    ⾔葉にしづらかったビジュアルを
    ⾔語化する
    

    View Slide

57. Introduce
    Team Model
    

    View Slide

58. "Living" Design System
    

    View Slide

59. "Living" Design System
    

    View Slide

60. Operation
    

    View Slide

61. Local development environment
    ⾃動リロード
    ⾃動コンパイルとソースマップなど…
    ローカル開発環境
    

    View Slide

62. Front-end automated testing
    JavaScriptのユニットテスト
    E2Eテスト
    アクセシビリティのテストなど…
    ユニット、E2Eテストなどの⾃動化
    

    View Slide

63. Cross-browser test automation
    先ほどのテスト群を、
    様々なブラウザでもテストできる環境
    クロス・ブラウザテストの⾃動化
    

    View Slide

64. Visual regression testing
    UIコンポーネントの表⽰テスト
    ビジュアル・リグレッション
    

    View Slide

65. Documentation
    JSDoc
    SassDoc...
    ドキュメント⽣成
    

    View Slide

66. Automate & Integrate
    

    View Slide

67. Solitary Model
    単⽣モデル
    

    View Slide

68. Design System
    

    View Slide

69. Bootstrap
    by Twitter
    

    View Slide

70. Mini Bootstrapを作って、
    それを⾊んな⼈に使って貰う
    

    View Slide

71. 確⽴されたパターンライブラリの
    存在は⼤きな利点
    

    View Slide

72. Design System product
    

    View Slide

73. ⾃分達の解決が気にいらないなら、
    使わなくても構わない
    

    View Slide

74. Centralized Model
    中央集権モデル
    

    View Slide

75. Design System
    

    View Slide

76. Best for Agency
    

    View Slide

77. Pattern Library
    product
    product product
    product
    

    View Slide

78. Pattern Library
    product
    product product
    product
    

    View Slide

79. アクティブな参加や貢献を得づらい
    

    View Slide

80. Federated Model
    連合モデル
    

    View Slide

81. Material
    Design
    by Google
    

    View Slide

82. Design System
    

    View Slide

83. View Slide

84. UX IA
    IxD
    

    View Slide

85. Not for Everyone
    

    View Slide

86. Which Model Is
    Best for Me?
    

    View Slide

87. It Depends...
    

    View Slide

88. • 会社の規模
    • プロダクトの規模
    • Design Systemのスコープ
    

    View Slide

89. Solitary Model
    単⽣モデル
    

    View Slide

90. Federated Model
    連合モデル
    

    View Slide

91. Centralized Model
    中央集権モデル
    

    View Slide

92. Design System Is
    a product
    

    View Slide

93. Goal
    

    View Slide

94. わかりやすく売り上げが出る
    プロダクトではない
    

    View Slide

95. Product Needs
    A team
    

    View Slide

96. Team
    

    View Slide

97. チームの利点
    

    View Slide

98. View Slide

99. “
    ͲΜͳΞϓϦͰ͋Ζ͏ͱɺαʔϏεͰ͋Ζ͏ͱຊ
    ౰ʹඞཁͳͷ͸༷ʑͳઐ໳ੑΛ࣋ͬͨਓୡͰฤ੒
    ͞ΕΔνʔϜͰ͢ɻ
    ٻΊΒΕ͍ͯΔઐ໳ੑΛνʔϜͰൃشͰ͖Δਓ͸ɺ
    ࣗ෼ࣗ਎͕࣋ͭઐ໳Ҏ֎ͷԞਂ͞Λ஌͍ͬͯΔਓ
    Ͱ͢ɻ
    — Yuya Saito
    

    View Slide

100. Thank you!
     @cssradar
     

     View Slide