Atomic Design

UIを科学する。小さな「原子」を組み合わせて、巨大な「有機体」を作る。

Atomic Design

UIを「Atom(原子)」「Molecule(分子)」「Organism(有機体)」「Template」「Page」の5段階で構成する手法。

The Hierarchy

graph TD
    Atom(Atom: Button/Input) --> Molecule(Molecule: SearchForm)
    Molecule --> Organism(Organism: Header)
    Organism --> Template(Template: Layout)
    Template --> Page(Page: HomePage)
    
    style Atom fill:#e0f2fe,stroke:#0284c7
    style Molecule fill:#dcfce7,stroke:#16a34a
    style Organism fill:#fef3c7,stroke:#d97706

Atom: これ以上分解できない要素（Button, Input, Label）。

Molecule: Atomの組み合わせ（SearchForm = Input + Button）。

Organism: Moleculeの組み合わせ（Header = Logo + Nav + SearchForm）。