---
sidebar_position: 2
---

# 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_**