UUI — дизайн система внутренних продуктов EPAM
Теперь 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 построено более 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. Если находите баги 🥹, можете закидывать тикеты в гитхаб.
