B2B: Дизайн-система Syndigo — единая библиотека компонентов и пайплайн Design-to-Code
О проекте
Обзор проекта
- Роль: Senior Manager, UX Design в Syndigo — ноябрь 2023 по настоящее время (10+ лет опыта в UX)
- Решение: Единая, консолидированная, код-связанная дизайн-система, охватывающая продуктовую линейку Syndigo …. заменяющая фрагментированные, дублированные библиотеки компонентов одним управляемым источником истины, напрямую связанным со Storybook, GitHub и AI-инструментами прототипирования компании.
- Цель: Дать дизайнерам, фронтенд-инженерам и продакт-менеджерам одну согласованную систему для работы, устраняя дрейф, закрывая разрыв между дизайном и кодом и позволяя всей организации двигаться быстрее без потери согласованности или доступности. Я пришёл в Syndigo … платформу B2B-данных о продуктах, охватывающую продукты MDM, PXM и синдикации … как Senior Manager of UX Design. Моя ответственность была тройной:
Вести сквозной продуктовый дизайн по ключевым продуктам, включая платформу Nutrition Analysis и Syndication Tracker , одновременно курируя дизайнера, работавшего вместе со мной над ними.
Взять на себя фрагментированную, неуправляемую дизайн-систему и перестроить её в единый, согласованный, код-связанный источник истины.
Управлять и растить команду из 8+ продуктовых дизайнеров, отчитываясь перед VP of Design и работая в партнёрстве с Director of Design и фронтенд-инженерией.
Процесс проектирования
Я подошёл к перестройке чёткими этапами, каждый из которых основывался на аудите.
- Аудит: Я инвентаризировал каждый компонент во всех продуктах, сопоставил Figma с продакшеном и отметил каждый дубликат и несогласованность.
- Консолидация: Я свёл каждый набор дубликатов к одному каноническому компоненту, задокументировал каждый с его анатомией, вариантами и историей версий и ввёл понятный рабочий процесс — идея, в работе, завершено — с тикетами, прикреплёнными к дизайн-фреймам.
- Code Connect и Storybook: Для всех 70+ компонентов я написал файлы Code Connect и код компонентов и настроил Storybook так, чтобы дизайн и живая закодированная форма отображались бок о бок.
- Интеграция с GitHub: Поскольку в репозитории не было представителя UX, инженерия предоставила мне доступ, и я закоммитил файлы компонентов и Code Connect напрямую в GitHub, замкнув петлю design-to-code.
- Прототипирование на базе AI: Я первым в компании использовал Figma MCP, чтобы превращать дизайны в закодированные, кликабельные прототипы для тестирования до разработки, а затем привязал Lovable и Claude Design к компонентам системы, чтобы команды могли генерировать только соответствующую системе работу.
- Доступность: Я построил и проверил каждый компонент на соответствие стандартам WCAG AAA.
Доступность
Система была построена в соответствии со стандартами WCAG AAA. Компоненты проектировались для скринридеров — с семантической структурой, ролями ARIA и понятными метками — и тестировались напрямую с программами чтения с экрана. Цвет обрабатывался с учётом нескольких форм дальтонизма, так что информация никогда не полагалась только на цвет. Соответствие проверялось автоматизированными инструментами доступности и фиксировалось в письменных руководствах, чтобы каждая команда могла строить и вносить вклад в систему доступным образом.
Метрики влияния
70+ компонентов консолидированы в единый, код-связанный источник истины.
Первый в Syndigo пайплайн от дизайна к инженерии, валидирующий дизайны закодированными прототипами до сборки.
Общекорпоративное системное прототипирование внедрено в продуктовых и дизайн-командах через Lovable и Claude Design.
Сокращённое время цикла от дизайна к разработке за счёт согласованных, код-связанных компонентов.
Контекст и постановка проблемы
У дизайн-системы не было структуры и почти не было управления. Один и тот же компонент часто существовал в нескольких несогласованных версиях в разных продуктах, и ничто не связывало дизайн с выпущенным кодом: ни Storybook, ни код-связанных компонентов, ни присутствия UX в GitHub.
Результатом был дрейф. Дизайнеры, инженеры и продакт-менеджеры интерпретировали систему по-разному, замедляя поставку и вынуждая инженеров пересобирать UI из несогласованных спецификаций.
Анализ заинтересованных сторон
- Фронтенд-инженеры: Нуждались в компонентах, которые соответствовали замыслу дизайна и напрямую попадали в продакшен, а не пересобирались из несогласованных спецификаций.
- Продуктовые дизайнеры: Моей команде нужен был один управляемый набор компонентов, чтобы они могли сосредоточиться на решении проблем, а не на воссоздании UI.
- Продакт-менеджеры: Нуждались в возможности быстро прототипировать и тестировать идеи, не отклоняясь от реального продукта.
Аудит системы
Прежде чем что-либо менять, я провёл аудит того, как система реально использовалась, чтобы перестройка основывалась на доказательствах.
- Инвентаризация компонентов: Каталогизировал каждый используемый компонент и выявил дубликаты.
- Сопоставление Figma и продакшена: Сравнил дизайн-библиотеки с выпущенным UI, чтобы найти дрейф.
- Интервью с командой: Поговорил с дизайнерами и инженерами о том, где система помогала и где они её обходили.
- Плагин UI Relay: Построил кастомный плагин Figma для управления системой — сопоставление компонентов с кодом, отслеживание покрытия и здоровья кода, генерация и синхронизация кода компонентов, управление токенами и шаблонами и отметка пробелов для исправления — превращая управление и design-to-code в непрерывный рабочий процесс, а не разовую уборку.
Вызовы и решения
Ключевым вызовом было отсутствующее звено между дизайном и кодом. Поскольку в репозитории не было присутствия UX, я получил доступ к GitHub и сам взял на себя файлы Code Connect и компонентов, чтобы дизайн-решения достигали продакшена верно, а не переинтерпретировались.
Фрагментация была вторым вызовом. Вместо того чтобы вручную следить за согласованностью, я консолидировал дубликаты в канонические компоненты и построил плагин UI Relay, чтобы не дать системе снова дрейфовать.
Адаптация была третьим. Встроив систему в инструменты, которые команды и так хотели использовать — закодированные прототипы, Lovable и Claude Design — я сделал работу в системе путём наименьшего сопротивления.
