Skip to main content

Atomic design

Atomic Design — это методология проектирования и организации пользовательских интерфейсов, предложенная Брэдом Фростом (Brad Frost). Она основана на идее разделения интерфейса на небольшие, независимые и переиспользуемые компоненты, которые затем комбинируются для создания более сложных структур. Название методологии вдохновлено химией: так же, как молекулы состоят из атомов, интерфейсы состоят из базовых компонентов.

Основные принципы Atomic Design​

  1. Иерархия компонентов:
    • Компоненты организуются в иерархию от простых к сложным.
    • Каждый уровень иерархии имеет своё назначение и уровень абстракции.
  2. Переиспользуемость:
    • Компоненты проектируются так, чтобы их можно было использовать в разных частях интерфейса.
  3. Модульность:
    • Каждый компонент изолирован и независим, что упрощает тестирование и поддержку.
  4. Масштабируемость:
    • Методология подходит как для небольших, так и для крупных проектов.

Уровни Atomic Design​

  1. Атомы (Atoms):
    • Наименьшие и базовые элементы интерфейса, которые нельзя разделить на более мелкие части.
    • Примеры: кнопки, инпуты, иконки, текстовые элементы.
  2. Молекулы (Molecules):
    • Комбинация нескольких атомов, которые вместе выполняют определённую функцию.
    • Примеры: форма поиска (инпут + кнопка), карточка товара (изображение + заголовок + цена).
  3. Организмы (Organisms):
    • Более сложные компоненты, состоящие из молекул и/или атомов.
    • Примеры: шапка сайта (логотип + навигация + форма поиска), футер (ссылки + текст + иконки).
  4. Шаблоны (Templates):
    • Макеты страниц, которые определяют структуру и расположение организмов.
    • Пример: шаблон главной страницы (шапка + список карточек товаров + футер).
  5. Страницы (Pages):
    • Конкретные реализации шаблонов с реальными данными.
    • Пример: главная страница сайта с заполненными карточками товаров.

Пример структуры проекта с использованием Atomic Design​

src/
│
├── components/
│   ├── atoms/              # Атомы
│   │   ├── Button/
│   │   ├── Input/
│   │   └── Text/
│   │
│   ├── molecules/          # Молекулы
│   │   ├── SearchForm/     # Форма поиска (Input + Button)
│   │   └── ProductCard/    # Карточка товара (Image + Text + Button)
│   │
│   ├── organisms/          # Организмы
│   │   ├── Header/         # Шапка сайта (Logo + Navigation + SearchForm)
│   │   └── Footer/         # Футер (Links + Text + Icons)
│   │
│   ├── templates/          # Шаблоны
│   │   ├── HomeTemplate/   # Шаблон главной страницы
│   │   └── ProductTemplate/# Шаблон страницы товара
│   │
│   └── pages/              # Страницы
│       ├── HomePage/       # Главная страница
│       └── ProductPage/    # Страница товара
│
└── App.tsx                 # Основной файл приложения

Преимущества Atomic Design​

  1. Переиспользуемость:
    • Компоненты можно использовать в разных частях интерфейса, что сокращает дублирование кода.
  2. Масштабируемость:
    • Методология подходит для проектов любого размера.
  3. Упрощение разработки:
    • Чёткая структура помогает разработчикам быстро находить и изменять нужные компоненты.
  4. Согласованность интерфейса:
    • Использование атомов и молекул обеспечивает единообразие дизайна.
  5. Упрощение тестирования:
    • Компоненты можно тестировать изолированно.

Недостатки Atomic Design​

  1. Сложность для небольших проектов:
    • В маленьких проектах такая структура может показаться излишне сложной.
  2. Требует дисциплины:
    • Необходимо строго следовать принципам, чтобы избежать смешения уровней.
  3. Ограниченная гибкость:
    • В некоторых случаях строгая иерархия может ограничивать возможности кастомизации.

Пример реализации Atomic Design​

  1. Атом: Кнопка (Button)
  2. Молекула: Форма поиска (SearchForm)
  3. Организм: Шапка сайта (Header)
  4. Шаблон: Главная страница (HomeTemplate)
  5. Страница: Главная страница (HomePage)

Когда использовать Atomic Design​

  • В проектах с большим количеством переиспользуемых компонентов.
  • Когда требуется высокая согласованность интерфейса.
  • В командах, где дизайнеры и разработчики тесно взаимодействуют.

🚀 Источник: DeepSeek