Немного про Атомарный дизайн

В статьях про атомарный дизайн есть одна большая проблема: в одной кнопка считается атомом (пример), а в другой — уже молекулой (другой пример).

Я долго ломал голову: «Если я не понимаю, куда закинуть кнопку, то как тогда выстраивать дизайн-систему?»

Но на самом деле атомарный дизайн — это не про правила, а про согласованность. Причём согласовывать нужно всё: от нейминга слоёв до использования «тянущихся» элементов (там, где это нужно!).

Сейчас атомарный дизайн считается базой. Фигма специально сделана для этого: у нас есть токены, текстовые стили, компоненты (и компоненты внутри компонентов). Но мы можем ещё больше упростить жизнь себе и коллегам — об этом дальше.

Главное — не смотреть на атомарный дизайн как на «шаблон». Он не ограничивается правилом «сперва делаем все кнопки, потом инпуты, а затем собираем их в форму». Атомарный дизайн — это способ мышления о компонентах, страницах, разрешениях и устройствах. Из этого вытекает несколько важных принципов.

Атомы → Молекулы → Организмы → Шаблоны → Страницы

(Думаю статьи про это, вы читали неоднократно.)

Суть простая: всё, что мы планируем переиспользовать, оборачиваем в компоненты. А когда нужно что-то более сложное — собираем компоненты из компонентов предыдущего уровня. Если поняли что используем что то больше двух раз — закидываем в компонент.

Моё наблюдение: важно не усложнять. Например, у меня в макете есть абзац текста статьи. К нему применён токен и текстовый стиль (цвет, шрифт), он лежит в автолейауте с другими абзацами. К этим абзацам уже привязаны токены отступов (margin, padding). По сути, это атом.

Но если я возьму абзац и сделаю его компонентом, мне придётся потом мучиться с дополнительными настройками. Так что не стоит оборачивать в компоненты абсолютно всё (я проверял).

Помните: атом — это не всегда компонент.

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

• Правильно называйте компоненты и слои, а неправильно не называйте.

• Если не знаете, как назвать компонент, — вот сайт с галереей компонентов (можно поискать в документациях Material и Ant) или хотя бы перечислите, что лежит внутри слоя.

•Нейминг слоев кстати лучше писать с Большой буквы

Следующий принцип — согласованность. Например, кнопка. Кто-то делает кучу вариантов во всех состояниях, а кто-то старается заложить все варианты и состояния в один «суперкомпонент». Правильного универсального ответа нет: главное — договориться внутри команды.

Ведь можно «сэкономить» 15 минут на настройке сейчас, а потом кто-то потеряет пару часов, разбираясь, почему всё устроено так запутано. Думайте не только о себе, но и о тех, кто придёт после.

Плохие дизайнеры учитывают только «идеальные» сценарии: имя пользователя всегда умещается в одну строчку, фото идеально обрезано, а колонки с информацией — ровные и одинаковой высоты. Но в реальности мы не создаём произведения искусства, мы делаем продукт удобным. Всегда нужно помнить про разные устройства, размеры экранов и доступность, а также про цели аудитории.

Атомарный дизайн — это способ думать о продукте как о развивающейся системе, а не просто о наборе экранов. Да, он делит всё на уровни (атомы, молекулы и т. д.), но ещё учит договариваться о названиях, передаче смысла, повторном использовании компонентов и настройках в Figma.

Если держать в голове эти принципы, то вопрос «куда положить кнопку?» решается сам собой. Главное — не бояться обсуждать и подстраивать атомарный подход под задачи.
—————
Файл с экраном Wildberries

Так же жду вас в телеграм.