Мы сотрудники студии, работаем в коллективе. Проекты могут передаваться от дизайнера к дизайнеру в соответствии с ситуацией, поэтому существует острая необходимость прийти к единой системе создания макетов.
Все мы работаем с компонентами, но не используем их возможности в полной мере. Зачастую дизайнеры накидывают компоненты, не задумываясь, как другие будут с ними работать.
Ниже изложен подход к организации компонентов в макетах. Подход характерен для Figma, как основного инструмента продуктового дизайна студии Mish.
Именно эта парадигма наиболее жизнеспособна и удобна при работе c компонентами.
Атомарный дизайн - это метод разбивки макета на простейшие компоненты. Основная идея в том, что создание идет не с макетов страниц как крупных элементов, а с мелких деталей (шрифтов, иконок и проч.).
Атомарный элемент - это малый элемент, являющийся частью чего-то большего. Атомарный элемент является частью молекулы, а та, в свою очередь, является частью организма и т.д.
Если поменять атом - изменятся молекулы, организмы и прочие вышестоящие элементы.
Очень часто этап работы с компонентами опускается, что справедливо на стадии концепта и наброска идеи. Но уже при разработке макета это критически важно.
Пример:
Клиент попросил поменять цвет кнопки, которая представлена у вас в 400 экземплярах. Если атом "Цвет" не будет создан изначально, придется вручную править цвет 400 кнопок. От подобного страдают сроки и бюджет, а, значит, клиент и студия.
Уровень вложенности - это положение конкретного элемента в структуре макета. Уровней вложенности компонентов может быть много. Точное количество уникально для каждого проекта и зависит от тех элементов, которых мы назовем атомами. Ниже рассмотрим три основных уровня, которые характерны для любых макетов: