tl;dr
Проект: Портал для виртуальных операторов (клон платформы жилищного кооператива)
Роль: Единственный дизайнер UIX
Проблема: Устаревший UI-кит, неконсистентные названия, отсутствие стандартов пробелов/типографики, трудно поддерживаемая библиотека компонентов
Решение: Внедрение дизайн токенов, замапленной поверх библиотеки компонентов
Влияние: Снижение количества ошибок, более быстрый процесс передачи разработчикам, переиспользуемая система
Бонус: Позже мигрировал корпоративную систему на токены
>
Контекст
Я присоединился к третьему этапу длительной модернизации для крупного датского провайдера. Цель заключалась в адаптации существующего портала жилищного кооператива для виртуальных операторов с новым брендингом и функциями.
Команда разработчиков работала с MUI, в то время как дизайн основывался на более ранней версии набора UI, который изначально не был предназначен для масштабной адаптации. Это обеспечивало надежную основу, но требовало улучшений для поддержки современных рабочих процессов, таких как токены дизайна, семантические переменные, согласованное расстояние и авто-расположение для более плавного сотрудничества и масштабируемости.
>
Проблема
UI киту не хватало современной структуры и семантических названий
Непоследовательная типография, расстояние и цветовые токены
Реализация MUI вызвала ошибки из-за ручных переопределений
Разработчики просили о сопоставленных цветах, чтобы уменьшить ошибки хотя бы
>
Моя инициатива
Вместо того чтобы точечно решать проблемы, я предложил более комплескное решение - перевести дизайн систему на токены, чтобы не только ускорить handoff разработке, но и сэкономить время на будущих фазах проекта имея универсальный источник правды.
>
Что я сделал
Обсудил с разработчиками, чтобы понять проблемы и частые вопросы
Просмотрел документацию MUI, чтобы согласовать токены с их структурой темы
Приоритизировал токены: начал с цветов, типографики и расстояний
Использовал Token Studio в Figma для управления токенами
Синхронизировал токены с Git, чтобы интегрировать их в процессы разработки
Проводил тесты с основными токенами — уменьшил количество ошибок на фронт-энде и улучшил проверки качества
Предложил использовать Style Dictionary для кроссплатформенной готовности (веб и мобильные)
//
шрифтовые токены
//
цветовые токены
>
Результат & рефлексия
Система токенов улучшила коммуникацию между дизайном и разработкой, ускорила контроль качества и упростила поддержку будущих проектов. Позже я перенес всю корпоративную систему дизайна на токеновую систему.
Что можно было бы улучшить:
Я осознал, что введение трехуровневой структуры токенов с самого начала было бы полезным:
Базовый уровень: сырьевые значения (например, #005BFF, 16px)
Семантический уровень: наименования, основанные на назначении (primary.bg, text.muted)
Уровень компонента: конкретное использование интерфейса (button.primary, card.shadow)
//
пример подхода с трехуровневой структурой, реализованного в проекте
Этот подход значительно улучшает масштабируемость, поддержку и адаптацию бренда на разных платформах. Я реализовал эту структуру в следующем проекте AI, где она оказалась гораздо более устойчивой и многоразовой.
Спасибо за проверку!
>
Больше проектов
