Atomic Design
Atomic Design — не строгое правило, а удобная метафора. Не все компоненты идеально ложатся на пять уровней, и это нормально.
Уровни
- Атомы — самые маленькие элементы: кнопки, поля ввода, иконки, лейблы.
- Молекулы — простые сочетания атомов: поле + лейбл + ошибка.
- Организмы — заметные части интерфейса: шапка сайта, форма регистрации, карточка товара.
- Шаблоны — структура страницы без конкретного контента.
- Страницы — те же шаблоны с реальными данными.
Что даёт
- Понятный язык для обсуждения дизайн-системы.
- Помогает увидеть переиспользование: один атом — в десятке организмов.
- Хорошо ложится на компонентную архитектуру фронтенда.
Когда применять и когда нет
Применять
- При запуске или большом обновлении дизайн-системы
- В обучении команды, как мыслить о компонентах
- В компаниях с несколькими продуктами на общей базе
Не применять
- Не нужно строго делить каждый компонент по уровням — это часто превращается в формализм. Atomic Design полезен как способ мышления, а не как догма
Примеры применения
В команде шёл бесконечный спор: «это уже компонент или ещё нет». После введения языка Atomic Design стало понятнее: «новое поле с валидацией» — это молекула, и её точно стоит вынести в систему. А «секция гостей на главной» — это организм, который пока используется в одном месте, и его можно оставить страничным кодом. Договорённость существенно ускорила работу.
Часто задаваемые вопросы
Нет. Это один из подходов к организации дизайн-системы. Многие крупные продукты используют свои собственные термины и иерархии. Atomic Design удобен прежде всего как стартовая точка и общий язык.
Жёсткое деление на пять уровней. В реальной работе некоторые компоненты сложно отнести однозначно, а попытки навязать иерархию превращаются в схоластические споры. Поэтому многие команды используют только верхние идеи (мелкое, среднее, крупное) и отказываются от химических терминов.