UUI — дизайн система внутренних продуктов EPAM

Artyom Lezhnyuk
DesignSpot
Published in
7 min readJul 19, 2024

Теперь UUI доступен для всех!

Итак, дам немного интро. Наша дизайн система называется UUI (Unified UI) — это библиотека компонентов в Figma, а также это библиотека react-компонентов для разработки web-приложений. И всё это добро Open Source, т.е. вы можете использовать в своих проектах совершенно бесплатно, без смс и регистраций! И я говорю не только про дизайн-либу, front-end фреймворк тоже.

Очередная дизайн система?

Сразу отвечу—нет! Далее я расскажу, как и почему появился UUI, какие боли он закрывает, чем он отличается от всего, что есть на рынке. Интересно? Тогда погнали.

Как появился UUI

В далёкой-далёкой галактике… В EPAM образовалось несколько десятков в̶с̶е̶л̶е̶н̶н̶ы̶х̶ внутренних продуктов…

Заранее извиняюсь за англицизмы в тексте — профдеформация.

UUI строился почти 10 лет десятками дизайнеров. Первые версии рисовались ещё в Photoshop, потом был Sketch, и теперь несколько лет мы пользуемся Figma. Раньше UUI имел несколько версий: 2, 3, 4, т.к. менялся бренд EPAM, менялся визуальный стиль внутренних систем, следом эволюционировал и UUI. Мы отказались от цифр в названии, но внутри мы имеем названия тем, сейчас это — Loveship (Light / Dark), Promo и Electric.

Темы в UUI

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

Вы спросите: какие системы мы строили?

С помощью UUI построено более 50 внутренних систем компании для обслуживания всей внутренней кухни в 60+ странах. А также несколько клиентских продуктов.

Из доступных приложений для всех, где можно глянуть дизайн-систему в действии: learn.epam.com, training.by (там кастомная тема)

Команда

На данный момент команда, работающих над UUI, небольшая.

Дизайнеры:

  • Дмитрий Трубчик—фигачит всю операционку, приоритизирует задачи, ведёт коммуникацию с дизайн-стримами и их лидами, переделывает компоненты, работает с контрибьютерами, создаёт гайдлайны.
  • Артём Лежнюк — в мои задачи входит всё что касается токенов, темизации, глобальных подходов в построении дизайн-системы, консультации проектов, дизайн-аудит проектов, реворк компонентов, гайды и документация, проработка палитр.
  • Наташа Скоробогатова — тестирует компоненты в фигме и фиксит баги; актуализирует все библиотеки, гайды и паттерны; работает над улучшением паттернов.

Архитектор — Яков Жмуров; лид разработки—Алексей Манетов, разработчики—Сергей Деревянник, Игорь Коренец, Сергей Елин, Ярослав Кузнецов, Дмитрий Томашевич; тестеровщик — Наталья Алиева и менеджер — Илья Горчаков.

Как мы работаем

Хотелки по изменениям в библиотеку могут прилететь с разных сторон:

  • от дизайнеров продуктов,
  • от разработчиков,
  • от бренд команды Epam,
  • в связи с обновлениями инструментов (сейчас Figma, когда-то Sketch),
  • тренды.

В целом, это выглядит примерно так: есть запрос на добавление/изменение компонента, проводим небольшое дискавери, анализируем, собираем фидбек, обсуждаем раз в неделю с дизайнерами, несколько митов в неделю с FE-командой. Опросы. Тестинг некоторых паттернов.

Жизненный цикл компонента у нас задокументирован и выглядит примерно так:

Погнали в детали

И начну с Getting Started. Здесь сразу есть ссылки на дополнительные файлы с гайдлайнами по компонентам, паттернам и ассетам.

Когда заглянете в гайдланы компонентов, то найдёте информацию по анатомии компонента, какой тип контента у него бывает, его варианты, размеры и стейты.

Также можете найти примеры его использования.

А также рекомендации для наших продуктов, в целях консистентности, как надо делать, и, как не надо.

Такая документация доступна для основных компонентов.

Типографика

Для основного контента у нас используется шрифт Source Sans Pro и доступен он был в Google Fonts (теперь этот шрифт называется Source Sans 3 и распространяет его Adobe).

Для заголовков у нас Museo, на него нужна лицензия, поэтому его поменяйте на подходящий вам шрифт.

Сейчас все текстовые стили, стили градиентов и стили теней вынесены в отдельные библиотеки. К сожалению всем они не доступны. В будущем сделаем переменные и завяжем на них стили прямо в библиотеке и всё будет чики-пики.

Иконки

Лет 5–6 назад, за основу иконок мы брали Google Material Icons. Конечно большинство иконок претерпели изменения, многое перерисовалось с нуля, выработались свои размеры, принципы и варианты использования.

У каждой иконки есть 4 размера, а также может быть два состояния: закрашена она и нет.

Компоненты

Копнув в детали компонентов, вы скорее всего зададитесь вопросом “почему сетка не 4px?”. Мой ответ будет прост — так исторически сложилось 🤣. Но, забегая вперёд, скажу, в следующих версиях дизайн-системы, дадим возможность это менять.

Открыв страницу с компонентом, вы увидите информационный виджет:

Здесь сразу можно найти ссылки на гайдлайны, паттерны, примеры в дизайне и как это сделано у разработчиков.

Непосредственно сам компонент, и его вариации в разных темах:

Хочу заметить, что не все компоненты из фигмы есть у разработчиков (нету степпера, например). Тем не менее, думаю, вам будет интересно посмотреть, что есть у разработчиков.

Открываем uui.com и идём во вкладку компонентов. Здесь есть документация по каждому компоненту.

Документация компонентов

Если переключится на табу Property Explorer, то можно пожмякать компонент и посмотреть какие варианты настройки у него есть.

Паттерны

Как я уже упомянул в самом начале, UUI строился долгие годы, и у нас уже сложились свои интерфейсные паттерны, чтобы у сотрудников компании не было шока при взаимодействии с разными внутренними системами. Именно поэтому существуют паттерны. Но никто не отменял фразу “я дизайнер, я так вижу”. Поэтому UUI продолжает эволюционировать и развиваться :)

Накидаю пару примеров:

Названия секций находятся внутри секций, и там же экшн-кнопки
Названия и кнопки — снаружи

Далее приведу пример паттернов фильтрации и пресетов. Живую демку можно пощупать на нашем сайте.

Другой вариант фильтров (демка тут):

А также как это всё задокументировано:

Горизонтальные фильтры
Горизонтальные пресеты

В библиотеке компонентов на странице Themes есть пример собранного интерфейса в разных темах.

Фанатам таблиц, советую заглянуть вот сюда 🤪.

Редактируемая таблица с тайм-лайном (концепт)

Пожмякать живые демки компонентов можно у нас на сайте — https://uui.epam.com/demo.

В плане паттернов, мы не ограничиваем дизайнеров что-то придумывать. Но есть базовые рекомендации, как тот или иной кусочек интерфейса может выглядеть.

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

Токены (переменные)

Структура токенов у нас имеет три уровня абстракции: палитра (palette), кор (core) и компонентный уровень (component).

Три уровня нужны для большей гибкости нашей дизайн-системы. Здесь я углубляться не буду, т.к. это отдельная тема для разговора и зачастую очень холиварная :)

Названия токенов строятся следующим образом:

Основные (core) токены, на которых построены все компоненты:

Кто хочет сделать свою тему на базе наших тем — добро пожаловать в документацию.

На данный момент в библиотеке поддерживаются переменные для цветов и скруглений радиусов у компонентов.

Итого, что мы имеем?

У нас сформированная фигма-библиотека с готовыми компонентами, их описанием.

Достаточно большая база готовых паттернов, построенных на ресерче и тестировании + рекомендации как надо и не надо дизайнить.

Готовые темы и гайды, как эти темы создавать.

На фронт-энд части задокументированы все компоненты, есть Property Explorer (а-ля свой Storybook), в котором можно посмотреть поведение компонентов. Готовые демки, которые можно переиспользовать.

И самое главное — это всё Open Source. Бери и пользуйся на здоровье. Не благодарите 😉. Шутка, любая благодарность очень приветствуется.

Что дальше?

Мы разрабатываем page layouts (blueprints) на основе наших продуктов для еще более быстрой сборки популярных решений. Потихоньку продумываем респонсивные паттерны и адаптируем компоненты под мобилки. Перерабатываем некоторые компоненты: попапы, горизонтальную навигацию, RTE (rich text editor), таймлайн, скоро добавим вертикальную навигацию, перерабатываем примеры и гайды по формам и многое другое.

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

Прямо сейчас идёт редизайн сайта https://uui.epam.com/, поэтому для дизайнеров информация на нём не самая актуальная.

P.S. Если есть вопросы или хотите больше деталей — спрашивайте в комментариях.

P.P.S. Если у вас есть фидбек, оставляйте его в UUI Figma Community. Если находите баги 🥹, можете закидывать тикеты в гитхаб.

--

--

DesignSpot
DesignSpot

Published in DesignSpot

It's community for researchers, interface and experience designers and ones who interested in this theme.

Artyom Lezhnyuk
Artyom Lezhnyuk

Written by Artyom Lezhnyuk

Senior Experience Designer, EPAM, Belarus

Responses (1)