Атомарный дизайн
Мы используем атомарный подход к разработке дизайн-системы. Его автором является Брэд Фрост, на эту тему он выпустил книгу «Designing Systems». По аналогии с химией в дизайн-системе есть атомы (например, цвета и шрифт), которые объединяются в молекулы (кнопки и элементы форм), которые в свою очередь объединяются в организмы (модальные окна) и шаблоны (форма оплаты). А шаблоны переиспользуются внутри компании и формируют конечные страницы для пользователей.
Рассмотрим подход на примере нашей дизайн-системы.
Атомы
Основа дизайн-системы. Цвета и тени, типографика, сетка, отступы, размеры и радиусы скруглений хранятся в дизайн-библиотеке Base в Figma и репозитории mts-base в коде.
Библиотека Base, компоненты «Цвета и тени»:
Молекулы
Более сложные компоненты, которые собраны из атомов. Аватар, бейдж, баннер, кнопки, элементы форм, иконки и другие молекулы хранятся в дизайн-библиотеках App Components, Web Components Molecules, Icons, Placeholders в Figma. В коде нет разделения на разные библиотеки, и компоненты хранятся в соответствующих репозиториях.
Библиотека Web Components Molecules, компонент «Кнопка»:
Организмы
Ещё более сложные компоненты, собранные из молекул. Аккордеон, календарь, карусель и другие организмы хранятся в дизайн-библиотеках App Components, Web components Organisms с Figma.
Библиотека App Components, компонент «Календарь»:
Шаблоны
Ещё более сложные компоненты, собранные из организмов или молекул. Яркие примеры — экосистемная шапка и подвал.
Библиотека Web Components, компонент «Подвал».
Страницы
Чаще всего не являются частью дизайн-системы и собираются на продуктах из готовых или собственных компонентов и объединяются в путь пользователя.
