Atomic Design

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

Иерархия состоит из пяти уровней. Атомы -- наименьшие элементы: кнопки, поля ввода, метки, иконки. Молекулы -- группы атомов, работающих вместе, например строка поиска из поля ввода и кнопки. Организмы -- более сложные секции из молекул и атомов, например шапка сайта. Шаблоны определяют структуру разметки без реального контента. Страницы -- конкретные экземпляры шаблонов с заполненным реальным контентом.

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

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