Применение локальных вариаций и стилей в атомарном подходе к созданию дизайн-системы
Привет, Хабр. Я Илья Сластен, продуктовый дизайнер интерактивной карты Первой грузовой компании, о создании, которой я рассказывал в своей предыдущей статье. Разработка современных цифровых продуктов требует системного подхода, обеспечивающего их гибкость, масштабируемость и согласованность. В этой статье будут рассмотрены ключевые аспекты работы с локальными переменными в Figma и подход Atomic Design, который позволяет упорядочить процесс проектирования. Эти принципы были применены для создания дизайн-системы для проекта «Декарта» в ПГК Диджитал — унифицированного картографического решения, которое дает возможность заказчику самостоятельно создавать модули, настраивать отчеты, управлять пользователями, а также получать доступ к инфраструктурным ж/д данным России и стран СНГ в формате единого окна. «Декарта» визуализирует дислокационную информацию об объектах, позволяет запрашивать детальную информацию по ним с помощью сквозного поиска и предоставляет возможности персонализации при работе с инструментом.
Атомарный подход к созданию дизайн-системы
Atomic Design — это методология, разработанная Брэдом Фростом, которая структурирует дизайн-систему, начиная с простейших компонентов (атомов) и завершая полноценными страницами.
Atomic Design позволяет минимизировать дублирование работы, упрощает обновления компонентов и повышает консистентность интерфейса.
Основные этапы Atomic Design
Методология включает пять ключевых этапов:
1. Атомы
Атомы — это базовые элементы интерфейса, такие как кнопки, цвета, текстовые стили и иконки. Они являются фундаментальными блоками, из которых создаются более сложные компоненты.
Пример:
цветовые палитры (переменные primary-color, secondary-color);
базовые текстовые стили (Header-1, Body-text);
простые кнопки.
2. Молекулы
Молекулы объединяют несколько атомов для создания функциональных блоков.
Пример: форма ввода может включать:
поле для текста;
метку для ввода;
кнопку подтверждения.
Эти элементы взаимодействуют, выполняя единую задачу.
3. Организмы
Организмы — это группы молекул, которые формируют более сложные структуры. Они могут включать навигационные панели, боковые меню или формы обратной связи.
Пример: меню навигации может включать:
логотип (атом);
текстовые ссылки (молекулы);
строку поиска (молекула).
4. Шаблоны
Шаблоны задают структуру страницы, включая размещение организмов и молекул. На этом этапе ещё отсутствуют стили и контент, но определяется логика их расположения.
Пример: главная страница может содержать:
шапку (организм);
основной контентный блок (молекулы и атомы);
футер (организм).
5. Страницы
На этапе создания страниц шаблоны наполняются реальным контентом: текстами, изображениями и данными. Здесь проводится финальное тестирование всех компонентов на предмет соответствия требованиям пользователей.
Local variables:
Для того, чтобы приступить к созданию компонентов, сначала мы будем создавать локальные переменные (Local variables) в Figma. Локальные переменные формируют основу для единообразного и масштабируемого дизайна.
Единообразие и предсказуемость в системе локальных переменных позволяют ускорить согласование изменений и упрощают работу разработчиков.
Colors
Шаг 1: Primitive Tokens
Создание цветовых примитивов начинается с выбора базовых оттенков, таких как серый и брендовый цвет.
В качестве фирменного цвета был выбран Indigo, символизирующий технологии и эффективность. Примитивные цвета описываются в формате:
Primary;
Secondary;
Tertiary.
Шаг 2: Semantic Tokens
Семантические токены добавляют смысловое значение примитивам, описывая их конкретные случаи использования. Они делятся на следующие категории:
Пример использования:
border/primary;
background/primary.
Этот подход позволяет редактировать цвет границ и фонов отдельно, обеспечивая гибкость при внесении изменений.
Шаг 3: Color Modes
Для каждого токена определяются варианты для светлого и тёмного режимов, что обеспечивает адаптивность дизайна.
Size and Spacing
Теперь приступаем к созданию детализированной системы размеров и отступов. Эти переменные позволяют нам легко адаптировать интерфейс под различные устройства и размеры экранов.
● Corner radius (скругления углов)
Эти переменные позволяют нам задать разные степени скругления для кнопок, карточек, контейнеров и других элементов.
Примеры:
zero-r: 0 (без скругления)
sm-r: 6 (для кнопок или маленьких контейнеров)
xl-r: 12 (для крупных карточек или контейнеров)
● Spacing (отступы)
Эти переменные определяют отступы между элементами. Их можно использовать для различных компонентов: кнопок, контейнеров, текстов и так далее.
Примеры:
zero: 0 (без отступа)
sm: 12 px (например, для маленьких отступов)
2xl: 40 px (для более крупных отступов)
● Breakpoint (точки перелома для адаптивного дизайна)
Эти переменные определяют ширину и высоту экранов для различных устройств. Мы можем использовать их для настройки адаптивных макетов.
Примеры:
mobile_lg_width: 390 px (ширина экрана мобильного устройства)
tab_md_width: 834 px (ширина экрана планшета)
desktop-large: 1600 px (ширина десктопа)
Local styles:
В процессе создания дизайн-системы важную роль играют типографика и эффекты, которые влияют на восприятие интерфейса пользователями. В этом разделе мы создадим и опишем локальные стили (Local styles) для типографики и эффектов с использованием шрифта Inter и различных визуальных эффектов, таких как тени.
1. Типографика (Typography)
1.1. Heading
Heading представляет собой различные уровни заголовков, которые могут варьироваться по размеру и весу. Каждый размер имеет два варианта: Default и Strong (для усиленной жирности). Пример градации для Heading:
● Large:
Default: Размер шрифта 32 px, жирность 600
Strong: Размер шрифта 32 px, жирность 700
● Medium:
Default: Размер шрифта 24 px, жирность 600
Strong: Размер шрифта 24 px, жирность 700
● Small:
Default: Размер шрифта 20 px, жирность 600
Strong: Размер шрифта 20 px, жирность 700
1.2. Label
Label используется для меток, кнопок, и описаний, которые должны быть меньшего размера, но выделяться. Для каждого размера предусмотрены два варианта.
● Large:
Default: Размер шрифта 16 px, жирность 400
Strong: Размер шрифта 16 px, жирность 600
● Medium:
Default: Размер шрифта 14 px, жирность 400
Strong: Размер шрифта 14 px, жирность 600
● Small:
Default: Размер шрифта 12 px, жирность 400
Strong: Размер шрифта 12 px, жирность 600
● Captions:
Default: Размер шрифта 10 px, жирность 400, Uppercase
Strong: Размер шрифта 10 px, жирность 600, Uppercase
1.3. Body
Body — это основной текст страницы, который используется для длинных абзацев и контента.
● xLarge:
Default: Размер шрифта 18 px, жирность 400
Strong: Размер шрифта 18 px, жирность 600
● Large:
Default: Размер шрифта 16 px, жирность 400
Strong: Размер шрифта 16 px, жирность 600
● Medium:
Default: Размер шрифта 14 px, жирность 400
Strong: Размер шрифта 14 px, жирность 600
● Small:
Default: Размер шрифта 12 px, жирность 400
Strong: Размер шрифта 12 px, жирность 600
1.4. Underline
Underline используется для текста с подчеркиванием, например, для ссылок или важных элементов, которые должны выделяться.
● xLarge:
Default: Размер шрифта 18 px, жирность 400, подчеркивание
Strong: Размер шрифта 18 px, жирность 600, подчеркивание
● Large:
Default: Размер шрифта 16 px, жирность 400, подчеркивание
Strong: Размер шрифта 16 px, жирность 600, подчеркивание
● Medium:
Default: Размер шрифта 14 px, жирность 400, подчеркивание
Strong: Размер шрифта 14 px, жирность 600, подчеркивание
● Small:
Default: Размер шрифта 12 px, жирность 400, подчеркивание
Strong: Размер шрифта 12 px, жирность 600, подчеркивание
2. Эффекты (Effect styles)
Эффекты, такие как тени, придают глубину и выделяют элементы интерфейса. Для каждого эффекта мы создаем различные уровни интенсивности, которые могут быть использованы для разных типов элементов.
1. Shadow: xs
Очень легкая тень, используемая для выделения небольших элементов, таких как кнопки или иконки.
shadow-xs {
box-shadow: 0 1 px 2 px rgba (0, 0, 0, 0.1);
}
2. Shadow: sm
Маленькая тень, подходящая для поиск и карточек.
shadow-sm {
box-shadow: 0 2 px 4 px rgba (0, 0, 0, 0.1);
}
3. Shadow: md
Средняя тень для выделения элементов среднего размера, таких как формы.
shadow-md {
box-shadow: 0 4 px 8 px rgba (0, 0, 0, 0.2);
}
4. Shadow: lg
Большая тень для крупных элементов, таких как модальные окна.
shadow-lg {
box-shadow: 0 8 px 16 px rgba (0, 0, 0, 0.2);
}
5. Shadow: Overlay
Тень для наложения, используемая для элементов с затемненным фоном.
shadow-overlay {
box-shadow: 0 0 40 px rgba (0, 0, 0, 0.7);
}
Создание компонентов на основе Local variables и Local styles:
Мы создали локальные вариации и стили для цвета, типографики, отступов и других параметров, и теперь, по методологии атомарного дизайна, мы приступим к созданию компонентов.
Чтобы ускорить процесс интеграции компонентов на Front-end, за основу, мы возьмем компонентную базу PrimeNG Lara Light.
PrimeNG Lara Light — это популярная UI-библиотека, которая предоставляет набор готовых компонентов для Angular-приложений. Она включает в себя различные элементы интерфейса, такие как кнопки, дропдауны, инпуты, формы, таблицы и другие, которые можно корректировать под нужды вашего проекта. Интеграция этих компонентов с нашими Local variables и Local styles позволит ускорить разработку и поддерживать единый стиль на всех уровнях проекта.
Шаги для интеграции компонентов PrimeNG с Figma Local variables и Local styles:
Использование инспектора: В браузере откройте ваш проект, кликните правой кнопкой мыши по компоненту (например, кнопке или иконке) и выберите Inspect;
Анализ компонентов: Инспектор откроет панель, в которой вы сможете проанализировать HTML-структуру компонента и связанные с ним стили (CSS). Этот этап необходим для того, чтобы сильно не уходить в кастомизацию компонентов библиотеки, найдя золотую середину между интеграцией с локальными вариациями и стилями Figma и скоростью и стоимостью разработки на стороне Front-end;
Корректировка стилей: Используя полученные данные, заменяем их на ранее созданные Local variables и Local styles. Например, если компонент кнопки использует определенный цвет фона, вы можете заменить этот цвет на ваш фирменный, выбрав его из локальных вариаций;
Итерационное пополнение компонентой базы: Согласно методологии атомарного дизайна, мы двигаемся от создания атомов и далее, к построению целых страниц, основанных на компонентах. Повторяем шаги 1–3, проходясь по всем компонентам библиотеки PrimeNG так, чтобы в итоге, все базовые компоненты были скорректированы и интегрированы в вашу дизайн-систему Figma.
Синхронизация Design & Front-end
Для создания единого стиля компонентов на основе Local Variables и Local Styles дизайнер и Front-end разработчик взаимодействуют в процессе интеграции библиотеки. С самого начала работы над созданием дизайн-системы важно наладить тесную коммуникацию. Это позволяет достичь полного соответствия между компонентами в Figma и их реализацией в коде.
Постоянная коммуникация
Дизайнер и Front-end разработчик синхронизируются на всех этапах работы;
Дизайнер предоставляет разработчику доступ к инструменту Developer Inspect в Figma для работы с компонентами:
— получение стилей;
— анализ токенов и CSS-свойств.Регулярные встречи помогают обсудить возникающие проблемы и уточнить детали.
Постепенно все компоненты дизайн-системы интегрируются в проект;
На каждом этапе продолжается синхронизация, чтобы сохранить единство между дизайном и реализацией.
Первичный созвон и погружение в контекст
Дизайнер демонстрирует Front-end разработчику примитивы из Local Variables и Local Styles;
Обсуждаются ключевые принципы, такие как:
— как именно будут использоваться токены (цвета, отступы, скругления и шрифты и их нэйминги);
— логика построения компонентов и их состояния (hover, active, disabled);Front-end разработчик получает общее представление о структуре дизайн-системы.
Интеграция компонентов через Figma Developer Inspec
Front-end разработчик использует Developer Inspect, чтобы извлекать данные о вариациях, стилях и компонентах;
Эти данные адаптируются для компонентов библиотеки PrimeNG Lara Light, заменяя стандартные стили на локальные переменные из дизайн-системы.
Проверка соответствия на всех этапах
Разработчик показывает дизайнеру внедрённые компоненты;
Дизайнер проверяет визуальную часть и сравнивает её с компонентами в Figma;
В случае несоответствий проводится корректировка как в коде, так и в макетах, если это необходимо.
Итерационный процесс
Постепенно все компоненты дизайн-системы интегрируются в проект;
На каждом этапе продолжается синхронизация, чтобы сохранить единство между дизайном и реализацией.
Итог
Правильная последовательность действий, постоянное общение между дизайнером и Front-end разработчиком, а также учёт стоимости и сроков интеграции компонентов являются ключевыми факторами успешного внедрения дизайн-системы.
Последовательность: чёткий алгоритм — от создания Local Variables и Local Styles до интеграции компонентов через Figma и PrimeNG — позволяет избежать хаоса и обеспечить структурированность процесса;
Учет стоимости и сроков: в нашем случае, эффективное использование готовой библиотеки PrimeNG Lara Light снижает затраты на разработку. Однако без регулярного взаимодействия команды возможны доработки, которые увеличивают сроки и расходы. Поддержание синхронизации помогает минимизировать эти риски.
Коммуникация: взаимодействие между дизайнером и разработчиком на каждом этапе, начиная с первичного погружения и до проверки готовых компонентов, является основой качественного результата. Регулярные созвоны и совместные решения проблем способствуют эффективной работе всей команды.
Начните с базовых шагов: настройте локальные переменные для цветов, размеров и отступов. Постепенно развивайте Atomic design в своём проекте, чтобы добиться согласованности и масштабируемости, коммуницируйте с front-end и product manager на ключевых этапах разработки.
