デザインシステム
デザインシステムについて
デザインシステム と スタイルガイドライン

目的

  • 文脈: デザインガイドライン、デザインシステム、デザインカタログ、スタイルガイド
  • UIパーツの粒度 : Layout, Component, Widget など分類する
  • UIパーツの命名 : WEB, iOS, Android、プラットフォームごとに整理
  • カタログ化 : A3.定番機能、A4.定番画面 と同様にパターン化
  • => デザイン仕様書として運用可能なモデルを作成する

プラットフォーム企業標準

Apple (Human Interface Guidelines)

Google (Material Design)

Microsoft (Microsoft Design)

Salesforce (Lightning Design System)

Facebook

TODO

各社の方針を整理し、概要としてまとめる


ブラウザベース

フレームワーク・デザインシステム

sketch, npm, html/css, es6 の連携

スタイルガイド

国内の参考例

Sketch & React

React & npm

Startup sample

Marvel, CodePen の運用例

漏れるデザイン

styleguide


Atomic Design

公式

国内の事例

Atomic + Sketch


テンプレートファイル

Sketch有料

UI Pattern

参考 (UI Pattern)

Gif利用のデザインカタログ