::meta

title: "Atomic Design: Методологія UI" description: "Детальний розбір методології Atomic Design: від атомів до сторінок з прикладами на React."

::

Atomic Design: Від Атомів до Організмів

Уявіть, що ви будуєте місто з LEGO. Ви не починаєте одразу з цілих будинків. Ви берете найменші детальки, з’єднуєте їх у стіни, стіни — у кімнати, кімнати — у будинки, а будинки — у квартали.

У веб-розробці ми часто робимо помилку, намагаючись "будувати квартали", ігноруючи якість цеглинок. Atomic Design — це методологія, створена Бредом Фростом (Brad Frost), яка пропонує будувати інтерфейси так само системно, як природа будує матерію.

Навіщо нам Atomic Design?

Без системного підходу UI проекти швидко перетворюються на хаос:

• Непослідовність: Однакові кнопки мають різні відступи на різних сторінках.
• Дублювання: Ми пишемо той самий код для UserProfile на трьох різних екранах.
• Складність підтримки: Зміна кольору бренду вимагає правок у 50 файлах.

Atomic Design вирішує це, розбиваючи інтерфейс на 5 чітких рівнів ієрархії.

5 Рівнів Atomic Design

Погляньмо на ієрархію від найпростішого до найскладнішого:

graph LR
    A[Атоми<br/>(Atoms)] --> B[Молекули<br/>(Molecules)]
    B --> C[Організми<br/>(Organisms)]
    C --> D[Шаблони<br/>(Templates)]
    D --> E[Сторінки<br/>(Pages)]

    style A fill:#e0f2fe,stroke:#0284c7,color:#0c4a6e
    style B fill:#dbeafe,stroke:#2563eb,color:#1e3a8a
    style C fill:#fae8ff,stroke:#c026d3,color:#701a75
    style D fill:#fce7f3,stroke:#db2777,color:#831843
    style E fill:#ecfccb,stroke:#65a30d,color:#365314

1. Атоми (Atoms)

Це базові будівельні блоки матерії. У UI це елементи, які неможливо розбити на менші функціональні частини без втрати сенсу.

• Приклади: HTML-теги (<label>, <input>, <button>), кольори палітри, шрифти, іконки.
• Властивість: Самі по собі атоми рідко корисні, але вони створюють стиль системи.

React Реалізація: Button (Атом)

// Атом: Найпростіший компонент. Ніякої бізнес-логіки, чистий UI.
import React from 'react'

type ButtonProps = {
    variant?: 'primary' | 'secondary'
} & React.ButtonHTMLAttributes<HTMLButtonElement>

export const Button = ({ variant = 'primary', className, ...props }: ButtonProps) => {
    const baseStyle = 'px-4 py-2 rounded font-medium transition-colors'
    const variants = {
        primary: 'bg-blue-600 text-white hover:bg-blue-700',
        secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
    }

    return <button className={`${baseStyle} ${variants[variant]} ${className || ''}`} {...props} />
}

2. Молекули (Molecules)

Молекули — це групи атомів, з'єднаних разом, що набувають нових властивостей. Це найпростіші функціональні одиниці.

• Приклади: Поле пошуку (Input + Button), Елемент меню (Icon + Link), Картка користувача (Avatar + Name).
• Властивість: Роблять одну просту річ. "Зроби пошук", "Покажи користувача".

React Реалізація: SearchForm (Молекула)

import React from 'react'
import { Button } from '../atoms/Button' // Імпортуємо Атом
import { Input } from '../atoms/Input' // Імпортуємо Атом
import { Icon } from '../atoms/Icon' // Імпортуємо Атом

export const SearchForm = ({ onSearch }: { onSearch: (term: string) => void }) => {
    const [term, setTerm] = React.useState('')

    // Молекула визначає ЛОГІКУ взаємодії атомів (тут: сабміт форми)
    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault()
        onSearch(term)
    }

    return (
        <form onSubmit={handleSubmit} className="flex gap-2 p-2 border rounded-lg bg-white">
            <Icon name="search" className="text-gray-400" />
            <Input value={term} onChange={(e) => setTerm(e.target.value)} placeholder="Пошук..." />
            <Button type="submit">Знайти</Button>
        </form>
    )
}

3. Організми (Organisms)

Організми — це відносно складні UI-компоненти, складені з груп молекул та/або атомів. Це секції інтерфейсу, які ми сприймаємо як окремі блоки.

• Приклади: Хедер сайту (Logo + Navigation + SearchForm), Товарна сітка, Футер, Сайдбар.
• Властивість: Організми формують основну структуру сторінки. Вони часто контекстно-залежні.

React Реалізація: Header (Організм)

import { Logo } from '../atoms/Logo'
import { Navigation } from '../molecules/Navigation'
import { SearchForm } from '../molecules/SearchForm'
import { UserProfile } from '../molecules/UserProfile'

export const Header = ({ user }) => {
    return (
        <header className="flex justify-between items-center px-6 py-4 shadow-sm bg-white">
            <div className="flex items-center gap-8">
                <Logo /> {/* Атом */}
                <Navigation /> {/* Молекула */}
            </div>

            <div className="flex items-center gap-4">
                <SearchForm onSearch={(t) => console.log(t)} /> {/* Молекула */}
                {/* Умова відображення - це рівень організму */}
                {user ? <UserProfile user={user} /> : <a href="/login">Увійти</a>}
            </div>
        </header>
    )
}

4. Шаблони (Templates)

Шаблони — це "скелет" сторінки. Тут ми перестаємо говорити про абстрактні компоненти і починаємо говорити про Layout. Шаблони визначають, де будуть розміщені організми.

• Суть: Це Wireframe. Тут немає реального контенту ("Lorem ipsum"), лише структура.
• Задача: Перевірити, чи працює дизайн-система в контексті макету, чи "влазять" компоненти.

5. Сторінки (Pages)

Це фінальна стадія. Шаблон + Реальний контент.

• Суть: Це те, що бачить користувач.
• Задача: Тестування пограничних станів. Як виглядає Header, якщо ім'я користувача дуже довге? Як виглядає ProductGrid, якщо товарів немає?

Порівняння Рівнів

Практичні Поради

Перевірка знань