📌
Atomic Designの現場で感じたメリット・デメリット
Atomic Designの概要
- フロントエンド開発で用いられるUIデザイン手法
- コンポーネント（部品）単位で定義
- SFC(Single File Component)として構成されることが多い
https://design.dena.com/design/atomic-design-を分かったつもりになる
メリット
- 追加開発に関して、コンポーネント設計が楽
- コンポーネント階層≒リポジトリ階層となるため、見渡しが良い
- 各コンポーネントファイルの仕様が理解しやすい
デメリット
- （規模にもよるが）ファイルが増えてくるとビルドがかなり重たくなってくる
- Atom→PageにかけてProp, Emitが増えやすい
- 既存コンポーネントを使いたいが、既存仕様では利用できない場合modifierを無理矢理当ててしまう→ファイル内のコード可読性が落ちる
- subatomic level（いわゆる要素に当てるプロパティ）の変更コストが高い
デメリットの改善策
subatomic level（いわゆる要素に当てるプロパティ）の変更コスト
デザイントークンの導入 zeplinのAPI経由でデザイナーが変更することも可能
上記にて発表しました。以下スライドです。
Discussion