Atomic Design

Atomic Design — методология проектирования UI-компонентов, предложенная Брэдом Фростом, которая делит интерфейс на пять уровней: атомы, молекулы, организмы, шаблоны и страницы.

Зачем нужно

Методология помогает создавать масштабируемые и переиспользуемые компонентные системы. Когда команда договаривается о едином словаре (атом, молекула, организм), становится проще обсуждать дизайн и архитектуру. Atomic Design особенно ценен при построении дизайн-систем: каждый уровень изолирован, тестируется отдельно и изменяется без каскадного распространения правок.

Где используется

  • Корпоративные дизайн-системы (Material UI, Ant Design построены по схожим принципам)
  • Storybook-каталоги компонентов в крупных проектах
  • React, Vue, Angular — любые компонентные фреймворки
  • Командная разработка, где дизайнеры и разработчики работают по общему словарю

Пять уровней Atomic Design

Atoms (атомы)
  └─ Button, Input, Label, Icon, Badge

Molecules (молекулы)
  └─ SearchField = Input + Button + Label

Organisms (организмы)
  └─ Header = Logo + Navigation + SearchField

Templates (шаблоны)
  └─ структура страницы без реальных данных

Pages (страницы)
  └─ шаблон + конкретные данные

Пример на React

// Atom
function Button({ children, onClick, variant = 'primary' }) {
  return (
    <button className={`btn btn--${variant}`} onClick={onClick}>
      {children}
    </button>
  );
}

// Atom
function Input({ value, onChange, placeholder }) {
  return (
    <input
      className="input"
      value={value}
      onChange={onChange}
      placeholder={placeholder}
    />
  );
}

// Molecule — объединяет атомы
function SearchField({ onSearch }) {
  const [query, setQuery] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    onSearch(query);
  };

  return (
    <form className="search-field" onSubmit={handleSubmit}>
      <Input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Поиск..."
      />
      <Button type="submit">Найти</Button>
    </form>
  );
}

// Organism — использует молекулы
function Header({ logo, navItems }) {
  return (
    <header className="header">
      <img src={logo} alt="Logo" className="header__logo" />
      <nav className="header__nav">
        {navItems.map((item) => (
          <a key={item.href} href={item.href}>{item.label}</a>
        ))}
      </nav>
      <SearchField onSearch={(q) => console.log('Ищем:', q)} />
    </header>
  );
}

Структура папок

src/
  components/
    atoms/
      Button/
        Button.jsx
        Button.module.css
        Button.stories.jsx
        Button.test.jsx
      Input/
      Icon/
    molecules/
      SearchField/
      FormField/
    organisms/
      Header/
      ProductCard/
    templates/
      PageLayout/
    pages/
      HomePage/
      ProductPage/

Частые ошибки

  • Слишком мелкое деление — выделяют атом для каждого <span>, что создаёт ненужную абстракцию; атомы должны быть наименьшими полезными UI-единицами.
  • Пропуск уровней — переходят сразу от атомов к страницам, минуя молекулы и организмы, теряя переиспользуемость.
  • Смешение уровней — организм импортирует страницу или страница содержит бизнес-логику, которая должна быть в сервисах.
  • Игнорирование Templates — шаблоны без данных — ключевой уровень для согласования дизайна с командой.

Связанные темы

Ресурсы