PricingLoginStart free
Frontend Academy · Урок

Атомарный дизайн: атомы, молекулы и организмы

Распределяйте компоненты по категориям: атомы, молекулы, организмы, шаблоны и страницы, чтобы создать общий словарь для дизайна и разработки

Урок 1 из 414 шагов

«Атомарный дизайн: атомы, молекулы и организмы» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Что такое атомарный дизайн

Атомарный дизайн (Brad Frost, 2013) — это модель мышления для организации компонентов пользовательского интерфейса по пяти уровням сложности: атомы, молекулы, организмы, шаблоны и страницы. Она даёт дизайнерам и разработчикам общий словарь.

Атомы — мельчайшие строительные блоки

Одноцелевые компоненты, которые нельзя разделить на более мелкие части. Кнопки, поля ввода, значки, подписи, образцы цветов. Они абстрактны и пригодны для повторного использования в любом контексте.

// Atoms (examples)
<Button variant="primary">Save</Button>
<Input type="email" name="email" />
<Icon name="chevron-right" />
<Label htmlFor="email">Email</Label>

Молекулы — простые группы компонентов

Объединяют атомы для выполнения полезной задачи. SearchBar — это поле ввода + кнопка + значок. FormField — это подпись + поле ввода + ErrorMessage. Такие компоненты всё ещё предназначены для общего использования.

function SearchBar({ onSearch }) {
  return (
    <div className="search-bar">
      <Input placeholder="Search..." />
      <Button onClick={onSearch}>
        <Icon name="search" />
      </Button>
    </div>
  );
}

Организмы — сложные разделы

Крупные композиции, образующие отдельные разделы интерфейса: заголовок (логотип + навигация + строка поиска + меню пользователя), ProductCard (изображение + заголовок + цена + кнопка), SignupForm. Они сильнее зависят от контекста.

function Header({ user }) {
  return (
    <header>
      <Logo />
      <Navigation links={navLinks} />
      <SearchBar onSearch={handleSearch} />
      <UserMenu user={user} />
    </header>
  );
}

Шаблоны — каркасы страниц

Макеты уровня каркаса, в которых организмы размещены без настоящего содержимого. BlogTemplate содержит заголовок, основной раздел со слотами статей и боковую панель.

function BlogTemplate({ header, article, sidebar, footer }) {
  return (
    <div className="blog-layout">
      {header}
      <div className="main">
        <main>{article}</main>
        <aside>{sidebar}</aside>
      </div>
      {footer}
    </div>
  );
}

Страницы — настоящее содержимое

Шаблоны с настоящим содержимым. Страница /blog/[slug] отображает BlogTemplate с фактической публикацией, виджетами боковой панели и прочими элементами интерфейса.

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

Многие команды организуют компоненты по уровням.

src/components/
  atoms/
    Button.tsx
    Input.tsx
    Icon.tsx
  molecules/
    SearchBar.tsx
    FormField.tsx
  organisms/
    Header.tsx
    ProductCard.tsx
  templates/
    BlogTemplate.tsx
  pages/
    BlogPage.tsx

Преимущества

Общий словарь для дизайнеров и разработчиков. Поощрение композиции вместо дублирования. Более простое создание дизайн-систем. Привычка сначала продумывать мельчайшую единицу, пригодную для повторного использования.

Критика: строгая категоризация затруднительна

На практике граница между молекулой и организмом размыта. Многие команды начинают спорить о том, к какой категории отнести компонент, — и цель добиться ясности теряется.

Современная альтернатива: организация по функциональности

Во многих крупных кодовых базах React/Vue предпочитают организацию по функциональности (auth/, checkout/, dashboard/), а не по строгим атомарным уровням. Атомарный подход по-прежнему хорошо работает для общего слоя дизайн-системы.

Атомарный дизайн в Storybook

Storybook хорошо подходит для атомарного дизайна: категории верхнего уровня «Атомы», «Молекулы» и «Организмы» упрощают просмотр библиотеки компонентов.

Когда использовать атомарный дизайн

Подходит для: библиотек дизайн-систем, общих для нескольких приложений; больших команд, которым нужна общая модель мышления; проектов с активным участием дизайнеров. Не стоит использовать для: небольших приложений, прототипов и функционально насыщенных SPA, где более важна совместная локализация кода.

Быстрая проверка

В атомарном дизайне компонент типа SearchBar, созданный из поля ввода + кнопки + значка, относится к какой категории?

Ответь в интерактивном уроке

Итоги: атомарный дизайн

Пять уровней: атомы (кнопка, поле ввода, значок), молекулы (SearchBar, FormField), организмы (заголовок, ProductCard), шаблоны (макеты), страницы (настоящее содержимое). Общий словарь и мышление, основанное на композиции. Структура папок отражает эти уровни. Лучше всего подходит для общих дизайн-систем; для кода приложений функциональные папки часто удобнее атомарной структуры.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
41
Уроки
163
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «Атомарный дизайн: атомы, молекулы и организмы» бесплатный?

Да — полный текст урока «Атомарный дизайн: атомы, молекулы и организмы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Атомарный дизайн: атомы, молекулы и организмы»?

Распределяйте компоненты по категориям: атомы, молекулы, организмы, шаблоны и страницы, чтобы создать общий словарь для дизайна и разработки Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Атомарный дизайн: атомы, молекулы и организмы»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Атомарный дизайн: атомы, молекулы и организмы
  2. Настройка монорепозитория с Turborepo
  3. Микрофронтенды: Module Federation
  4. Структура каталогов по функциональным возможностям
← Назад к Frontend Academy