Atomic Design
部品をまず作り、積み上げる。
原子
これ以上分解できない部品
分子
検索フォームなど
単一の原則
生物
検索フォームなどが含まれたヘッダー
テンプレート
スケルトン、骨格
動的コンテンツに対応できるようにする
ページ
代表的なコンテンツを配置
実際のコンテンツをテンプレートに適用し、バリエーションを明確に示して最終的なUIを示し、設計システムの回復力をテストします。
最小のパターン（原子）は大きなパターン（分子）に含まれ、さらに大きなパターン（生物）に含まれ、さらに大きなパターン（テンプレート）に含まれます。
Pattern Lab Demos
静的サイトジェネレーター的か
構造とコンテンツを明確に分離します
アドホックCMS
各組織のデザインパターン
スタイルガイドツール
HTML and CSS, Lonely Planet’s Rizzo style guide
デザインパレット
Maintaining Design Systems
スタイルガイドは、設計プロセスの成果物です。設計システムは、エコシステムを提供するロードマップとバックログを備えた、資金のある生きた製品です。
ネイサン・カーティス
ウェブサイトのメンテナンスプロセスは、修正プログラムやアドホックな変更の散在に移り、元の設計システムを作成するために行ったすべての配慮を台無しにします。
設計システムが最終的な製品とパターンライブラリを支えるものであること
クライアント、同僚、利害関係者は、デジタル世界の柔軟な性質を採用して、メディアの絶えず変化する性質、ユーザーのニーズ、およびビジネスのニーズに適応する生活設計システムを作成する必要
クライアントと組織のニーズを真に満たす真に有用な作業を作成することに専念している場合は、作業の範囲を根本的に再定義する必要があります。Nathan Curtisが言うように、設計システムは有限の範囲を持つプロジェクトであってはならず、時間とともに成長し進化することを意図した製品であるべきです。
設計システムは、組織がデジタル作品を作成する方法に革命を起こすという野心的な目標を持つ長期的な取り組みである必要があります。
---
マテリアルデザインガイド
Pattern Lab Demos
例
Reactを使ったコンポーネント指向設計で、Atomic Designをやめようとしている話
StoryBoard
再利用性を高めるため、既存コンポーネントを把握できるようになりそう。
単一責任の原則
スタイルクローズドの原則
子コンポーネントは親コンポーネントの"レイアウトのスタイル"を知ってはならない」
「親コンポーネントは子コンポーネントの"見た目のスタイル"を知ってはならない」
親も子の見た目のスタイルについて(あまり)立ち入ってはなりません
コンポーネントにスタイルマージン等のスタイルを設定すると単独で使えなくなる
親が使う際に幅を指定できるようにしてあげる
グローバルstateで管理するかどうかはその状態が一つのコンポーネントに閉じているかどうか
reduxかcontext api
グローバルstateで管理するべきかということと、単に上位のpropsを渡したいだけなのかということか。
ほか参考
How we’re using Component Based Design
Atomic Design & creativity
メロディー