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

小さく始めるDesign System /Design System

小さく始めるDesign System /Design System

メドレー開発本部の社内勉強会「TechLunch」で発表した内容を掲載しました。 人材採用システムのジョブメドレーにおいて、Design Systemを「小さく始める」手法で導入を進めているので、そのプロセスについて紹介させていただきました。

発表者:舘野 真

Avatar for MEDLEY, INC.

MEDLEY, INC.

April 26, 2018
Tweet

More Decks by MEDLEY, INC.

Other Decks in Technology

Transcript

  1. 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 スタイルガイドは作り終わる前にゾンビに変わってる
  2. Design System とは “Rules, constraints, and principles, implemented in design

    and code.” Diana / Github https://speakerdeck.com/broccolini/design-systems-when-and-how-much デザインシステムは、デザインとコードで実装されたルール、制約、原則のこと
  3. 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 スタイルガイドはデザインの過程での遺物 デザインシステムはエコシステムを供給するプロダクト
  4. 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 デザインシステムはプロジェクトじゃなくて、プロダクトを供給するプロダクト
  5. 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とは、プロダクトのインターフェースを作り上げている部品の包括的な 収集のこと
  6. 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 信頼できる唯一の情報源
  7. 小さく始める HTML HTML CSS HTML Sketch Design System CSS Sketch

    Design System CSS Sketch Design System Feedback Feedback
  8. - 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