Atomic Design

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

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

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

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