本記事の目的
Reactを学んでいくにつれてAtomicDesignというデザインシステムがかなり有力だという情報を得たので、自分なりにまとめていきます。
アトミックデザインとは
アトミックデザインとは、階層的にデザインを構築していくデザインシステムであり、
1.Atoms
2.Molecules
3.Organisms
4.Templates
5.Pages
といった階層に分けることができる。
Atoms
- 画面表示された際の要素として最小単位
- 機能を絞った単一部品を定義する
- MUIならPickで使用できるPropsを絞る
- 例）Button, Icon, Text, Title …
Molecules
- Atomsの組み合わせ
- 例）Card, Box, Form, Popup …
Organisms
- 画面表示された際の機能としての単位
- Atoms, Moleculesを組み合わせる
- 例）Header, Calendar, Modal, CardList …
templates
- ページのコンテナやサイドバーのwidthなど、中身のないデザイン
- Atoms,Molecules,Organismsを格納する
- 例）MainContents, MainContentsWithSideBar …
pages
- ページそのもの
- 上記全てを用いて作成する。
- 例）UsersPage, HomePage …
まとめ
こうした階層的にデザインを分けることで、後々のデザインの変更がかなり楽になるというメリットが大きいと考えられます。
個人的に、MoleculesとOrganismsをどのように分類していくかというのが大いに悩んだところです。
MoleculesなしでOrganismsのみで考えてもいいかなって感じです。