Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design System as a Product @ Frontrend Vol.8

Yuya Saito
December 05, 2016

Design System as a Product @ Frontrend Vol.8

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

Yuya Saito

December 05, 2016
Tweet

More Decks by Yuya Saito

Other Decks in Design

Transcript

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

    View full-size slide

  2. Frontend Engineer @ Nikkei
    Yuya Saito

    View full-size slide

  3. frontendweekly.tokyo
    Frontend Weekly

    View full-size slide

  4. WHat is
    Design System?

    View full-size slide


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

    View full-size slide

  6. Typography
    Layout
    Grid
    Color
    Icon
    Components
    Coding Style…

    View full-size slide

  7. Bootstrap
    by Twitter

    View full-size slide

  8. Material
    Design
    by Google

    View full-size slide

  9. Lightning
    Design
    System
    by salesforce

    View full-size slide

  10. Predix
    Design
    System
    by GE

    View full-size slide

  11. Origami
    by Financial Times

    View full-size slide

  12. Why Do We Need
    Design System?

    View full-size slide

  13. by OpenSignal

    View full-size slide

  14. Design
    Technical debt

    View full-size slide

  15. Managed Chaos

    View full-size slide

  16. Components of
    Design System

    View full-size slide

  17. Style Guides

    View full-size slide

  18. Brand
    identity

    View full-size slide

  19. Design
    language

    View full-size slide

  20. Voice and
    tone

    View full-size slide

  21. Pattern
    Libraries

    View full-size slide

  22. Problem with
    Design System

    View full-size slide

  23. Design System

    View full-size slide

  24. Goal for Design System

    View full-size slide

  25. Scaling is Hard

    View full-size slide

  26. Evangelising is Harder

    View full-size slide

  27. People for Design System

    View full-size slide


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

    View full-size slide

  29. Introduce
    The Talents

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. Design Fundamentals

    View full-size slide

  34. Tiny Debt
    also scale fast

    View full-size slide

  35. Should Designer Code?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. Continuous
    Collaboration

    View full-size slide

  39. Continuous Delivery

    View full-size slide

  40. Concept
    Design System
    Develop

    View full-size slide

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

    View full-size slide

  42. "Living" Design System

    View full-size slide

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

    View full-size slide

  44. Introduce
    Team Model

    View full-size slide

  45. "Living" Design System

    View full-size slide

  46. "Living" Design System

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. Automate & Integrate

    View full-size slide

  53. Solitary Model
    単⽣モデル

    View full-size slide

  54. Design System

    View full-size slide

  55. Bootstrap
    by Twitter

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  58. Design System product

    View full-size slide

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

    View full-size slide

  60. Centralized Model
    中央集権モデル

    View full-size slide

  61. Design System

    View full-size slide

  62. Best for Agency

    View full-size slide

  63. Pattern Library
    product
    product product
    product

    View full-size slide

  64. Pattern Library
    product
    product product
    product

    View full-size slide

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

    View full-size slide

  66. Federated Model
    連合モデル

    View full-size slide

  67. Material
    Design
    by Google

    View full-size slide

  68. Design System

    View full-size slide

  69. Not for Everyone

    View full-size slide

  70. Which Model Is
    Best for Me?

    View full-size slide

  71. It Depends...

    View full-size slide

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

    View full-size slide

  73. Solitary Model
    単⽣モデル

    View full-size slide

  74. Federated Model
    連合モデル

    View full-size slide

  75. Centralized Model
    中央集権モデル

    View full-size slide

  76. Design System Is
    a product

    View full-size slide

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

    View full-size slide

  78. Product Needs
    A team

    View full-size slide

  79. チームの利点

    View full-size slide


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

    View full-size slide

  81. Thank you!
    @cssradar

    View full-size slide