Привет, Хабр. Я Илья Сластен, продуктовый дизайнер интерактивной карты Первой грузовой компании, о создании, которой я рассказывал в своей предыдущей статье. Разработка современных цифровых продуктов требует системного подхода, обеспечивающего их гибкость, масштабируемость и согласованность. В этой статье будут рассмотрены ключевые аспекты работы с локальными переменными в 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

Семантические токены добавляют смысловое значение примитивам, описывая их конкретные случаи использования. Они делятся на следующие категории:

• Foreground;

• Background;

• Border;

• System (например, Button или Input).

Пример использования:

• 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: 12px (например, для маленьких отступов)

• 2xl: 40px (для более крупных отступов)

● Breakpoint (точки перелома для адаптивного дизайна)

Эти переменные определяют ширину и высоту экранов для различных устройств. Мы можем использовать их для настройки адаптивных макетов.

Примеры:

• mobile_lg_width: 390px (ширина экрана мобильного устройства)

• tab_md_width: 834px (ширина экрана планшета)

• desktop-large: 1600px (ширина десктопа)

Local styles:

В процессе создания дизайн-системы важную роль играют типографика и эффекты, которые влияют на восприятие интерфейса пользователями. В этом разделе мы создадим и опишем локальные стили (Local styles) для типографики и эффектов с использованием шрифта Inter и различных визуальных эффектов, таких как тени.

1. Типографика (Typography)

1.1. Heading

Heading представляет собой различные уровни заголовков, которые могут варьироваться по размеру и весу. Каждый размер имеет два варианта: Default и Strong (для усиленной жирности). Пример градации для Heading:

● Large:

• Default: Размер шрифта 32px, жирность 600

• Strong: Размер шрифта 32px, жирность 700

● Medium:

• Default: Размер шрифта 24px, жирность 600

• Strong: Размер шрифта 24px, жирность 700

● Small:

• Default: Размер шрифта 20px, жирность 600

• Strong: Размер шрифта 20px, жирность 700

1.2. Label

Label используется для меток, кнопок, и описаний, которые должны быть меньшего размера, но выделяться. Для каждого размера предусмотрены два варианта.

● Large:

• Default: Размер шрифта 16px, жирность 400

• Strong: Размер шрифта 16px, жирность 600

● Medium:

• Default: Размер шрифта 14px, жирность 400

• Strong: Размер шрифта 14px, жирность 600

● Small:

• Default: Размер шрифта 12px, жирность 400

• Strong: Размер шрифта 12px, жирность 600

● Captions:

• Default: Размер шрифта 10px, жирность 400, Uppercase

• Strong: Размер шрифта 10px, жирность 600, Uppercase

1.3. Body

Body — это основной текст страницы, который используется для длинных абзацев и контента.

● xLarge:

• Default: Размер шрифта 18px, жирность 400

• Strong: Размер шрифта 18px, жирность 600

● Large:

• Default: Размер шрифта 16px, жирность 400

• Strong: Размер шрифта 16px, жирность 600

● Medium:

• Default: Размер шрифта 14px, жирность 400

• Strong: Размер шрифта 14px, жирность 600

● Small:

• Default: Размер шрифта 12px, жирность 400

• Strong: Размер шрифта 12px, жирность 600

1.4. Underline

Underline используется для текста с подчеркиванием, например, для ссылок или важных элементов, которые должны выделяться.

● xLarge:

• Default: Размер шрифта 18px, жирность 400, подчеркивание

• Strong: Размер шрифта 18px, жирность 600, подчеркивание

● Large:

• Default: Размер шрифта 16px, жирность 400, подчеркивание

• Strong: Размер шрифта 16px, жирность 600, подчеркивание

● Medium:

• Default: Размер шрифта 14px, жирность 400, подчеркивание

• Strong: Размер шрифта 14px, жирность 600, подчеркивание

● Small:

• Default: Размер шрифта 12px, жирность 400, подчеркивание

• Strong: Размер шрифта 12px, жирность 600, подчеркивание

2. Эффекты (Effect styles)

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

1. Shadow: xs

Очень легкая тень, используемая для выделения небольших элементов, таких как кнопки или иконки.

shadow-xs {

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

}

2. Shadow: sm

Маленькая тень, подходящая для поиск и карточек.

shadow-sm {

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

3. Shadow: md

Средняя тень для выделения элементов среднего размера, таких как формы.

shadow-md {

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

} 

4. Shadow: lg

Большая тень для крупных элементов, таких как модальные окна.

shadow-lg {

  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

} 

5. Shadow: Overlay

Тень для наложения, используемая для элементов с затемненным фоном.

shadow-overlay {

  box-shadow: 0 0 40px 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:

1. Использование инспектора: В браузере откройте ваш проект, кликните правой кнопкой мыши по компоненту (например, кнопке или иконке) и выберите Inspect;

2. Анализ компонентов: Инспектор откроет панель, в которой вы сможете проанализировать HTML‑структуру компонента и связанные с ним стили (CSS). Этот этап необходим для того, чтобы сильно не уходить в кастомизацию компонентов библиотеки, найдя золотую середину между интеграцией с локальными вариациями и стилями Figma и скоростью и стоимостью разработки на стороне Front‑end;

3. Корректировка стилей: Используя полученные данные, заменяем их на ранее созданные Local variables и Local styles. Например, если компонент кнопки использует определенный цвет фона, вы можете заменить этот цвет на ваш фирменный, выбрав его из локальных вариаций;

4. Итерационное пополнение компонентой базы: Согласно методологии атомарного дизайна, мы двигаемся от создания атомов и далее, к построению целых страниц, основанных на компонентах. Повторяем шаги 1–3, проходясь по всем компонентам библиотеки PrimeNG так, чтобы в итоге, все базовые компоненты были скорректированы и интегрированы в вашу дизайн-систему Figma.

Синхронизация Design & Front-end

Для создания единого стиля компонентов на основе Local Variables и Local Styles дизайнер и Front-end разработчик взаимодействуют в процессе интеграции библиотеки. С самого начала работы над созданием дизайн-системы важно наладить тесную коммуникацию. Это позволяет достичь полного соответствия между компонентами в Figma и их реализацией в коде.

1. Постоянная коммуникация

   • Дизайнер и Front-end разработчик синхронизируются на всех этапах работы;

   • Дизайнер предоставляет разработчику доступ к инструменту Developer Inspect в Figma для работы с компонентами:
     - получение стилей;
     - анализ токенов и CSS-свойств.

   • Регулярные встречи помогают обсудить возникающие проблемы и уточнить детали.

• Постепенно все компоненты дизайн-системы интегрируются в проект;

• На каждом этапе продолжается синхронизация, чтобы сохранить единство между дизайном и реализацией.
  
  

2. Первичный созвон и погружение в контекст

   • Дизайнер демонстрирует Front-end разработчику примитивы из Local Variables и Local Styles;

   • Обсуждаются ключевые принципы, такие как:
     - как именно будут использоваться токены (цвета, отступы, скругления и шрифты и их нэйминги);
     - логика построения компонентов и их состояния (hover, active, disabled);

   • Front-end разработчик получает общее представление о структуре дизайн-системы.

3. Интеграция компонентов через Figma Developer Inspec

   • Front-end разработчик использует Developer Inspect, чтобы извлекать данные о вариациях, стилях и компонентах;

   • Эти данные адаптируются для компонентов библиотеки PrimeNG Lara Light, заменяя стандартные стили на локальные переменные из дизайн-системы.

4. Проверка соответствия на всех этапах

   • Разработчик показывает дизайнеру внедрённые компоненты;

   • Дизайнер проверяет визуальную часть и сравнивает её с компонентами в Figma;

   • В случае несоответствий проводится корректировка как в коде, так и в макетах, если это необходимо.

5. Итерационный процесс

   • Постепенно все компоненты дизайн-системы интегрируются в проект;

   • На каждом этапе продолжается синхронизация, чтобы сохранить единство между дизайном и реализацией.

Итог

Правильная последовательность действий, постоянное общение между дизайнером и Front-end разработчиком, а также учёт стоимости и сроков интеграции компонентов являются ключевыми факторами успешного внедрения дизайн-системы.

• Последовательность: чёткий алгоритм — от создания Local Variables и Local Styles до интеграции компонентов через Figma и PrimeNG — позволяет избежать хаоса и обеспечить структурированность процесса;

• Учет стоимости и сроков: в нашем случае, эффективное использование готовой библиотеки PrimeNG Lara Light снижает затраты на разработку. Однако без регулярного взаимодействия команды возможны доработки, которые увеличивают сроки и расходы. Поддержание синхронизации помогает минимизировать эти риски.

• Коммуникация: взаимодействие между дизайнером и разработчиком на каждом этапе, начиная с первичного погружения и до проверки готовых компонентов, является основой качественного результата. Регулярные созвоны и совместные решения проблем способствуют эффективной работе всей команды.

Начните с базовых шагов: настройте локальные переменные для цветов, размеров и отступов. Постепенно развивайте Atomic design в своём проекте, чтобы добиться согласованности и масштабируемости, коммуницируйте с front-end и product manager на ключевых этапах разработки.