Дизайн-система Transcribe — Андрей Глухов
Андрей Глухов

Продуктовый дизайнер

Фото Андрея Глухова
Андрей Глухов

Продуктовый дизайнер

Дизайн-система Transcribe

В Transcribe накопилась визуальная несогласованность, а устаревший UI Kit замедлял работу. Я пересобрал дизайн-систему с нуля: перенёс из Sketch в Figma, провёл аудит, выстроил атомарную архитектуру, внедрил токены, сетку, оптимизировал компоненты и создал витрину компонентов в коде.

  • Дизайн токены

    Border, Color, Font, Spacing переменными Figma

  • Светлая и темная тема

    Переключение через режим переменных Figma

  • 70+ компонентов

    Button, Input, Navigation Bar, Select, Slot, Table и другие

  • Настраиваемые компоненты

    Размер, состояние, отображение и другое

  • Шаблоны экранов

    Образцы готовых к использованию макетов

  • Витрина компонентов

    Интерактивный каталог с примерами состояний и настройками на лету

Проблемы

  1. Все находится в Sketch, что тормозит переход на Figma

  2. Неполный UI Kit вынуждает постоянно искать элементы или создавать их с нуля

  3. Существующие компоненты не адаптируются под частые сценарии

  4. Несогласованность визуального стиля в цветах, типографике, размерах и отступах

  5. Ручная адаптация макетов под устройства и темную тему занимает много времени

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

Задачи

  1. Сократить время проектирования и передачи макетов в разработку

  2. Устранить визуальную несогласованность, обеспечив единый язык дизайна на iOS, iPadOS, macOS и Web

  3. Упростить и автоматизировать поддержку светлой и темной тем

  4. Ускорить адаптацию интерфейсов под разные размеры устройств и разрешения

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

Решения

Перешел со Sketch на Figma

Использовал преимущества Figma, такие как скорость работы, интерактивность, Components и Variants, Auto Layout и Constraints, а также Component Properties. Кроме того, применял вложенные и упрощенные экземпляры, предпочтительные значения (Nested instances, Simplified instances и Preferred values), а также Styles и Variables.

Для поддержки и оптимизации работы использовались плагины: Instance Finder, Appearance для темной темы (с ранее подготовленными цветовыми стилями), Delete Hidden Layers, Master, Find Variables и Styles & Variables Organizer.

Провел аудит компонентов

  1. Выявил дублирующие элементы, неточности и неиспользуемые компоненты

  2. Распределил компоненты по отдельным страницам для удобной навигации

  3. Создал страницу с отображением всех основных компонентов

Привязал все размеры к модульной сетке

Привязал все размеры, включая размеры элементов, радиусы скруглений и отступы, к модульной сетке, взяв за основу шаг 4px.

Внедрил дизайн-токены

Провел аудит компонентов дизайн-системы для создания токенов, после чего реализовал систему через Figma Variables, распределив их по трем уровням: глобальные, семантические и компонентные токены.

В структуру вошли токены для Color (Background, Text, Icon, Border, Gradient), Border (Radius, Width), Breakpoints, Font (Weight, Size, Line height), Shadow, Spacing, а также токены для Device (размеры экранов).

Переработал компоненты по методологии атомарного дизайна

Токены → Атомы → Молекулы → Организмы → Шаблоны → Экраны

Оптимизировал компоненты

  1. Добавил дополнительные Properties для гибкой настройки

  2. Добавил вложенность (Nested instances)

  3. Добавил интерактивные состояния

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

Реализовал поддержку светлой и темной темы

  1. Первоначально: цветовые стили для светлой и темной темы + плагин Appearance

  2. Впоследствии: переход на Figma Variables для более гибкого управления темами

Поддерживал и развивал

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

  1. Добавлял новые элементы

  2. Дорабатывал существующие компоненты

  3. Создавал новые компоненты

  4. Внедрял нововведения от Figma, упрощающие работу с дизайн-системой

Витрина компонентов в коде

Витрина компонентов и экранов синхронизирует дизайн и код, объединяя визуальный слой с логикой продукта. От токенов (цвета, типографика, отступы) до готовых компонентов и гибкого конструктора с настройкой состояний на лету – каждый элемент сопровождается кодом (Web, Swift).

Погружение в сценарии использования обеспечивается прототипом с переключением языков, устройств, настройками экрана и светлой/темной темы, а также наглядным User flow. Прототип доступен для живого тестирования – просмотр в браузере на десктопе и телефоне, а карта нажатий (heatmap) помогает анализировать взаимодействие.

В итоге дизайн-система превратилась не просто в библиотеку компонентов, а в инструмент, сокращающий время на проектирование, тестирование и разработку.

Результат

  • на 40%

    сократил время создания макетов.

  • на 60%

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

  • на 90%

    сократил время переключения макетов на темную тему.

  • на 50%

    сократил время создания прототипов.

  • на 60%

    сократил число уточнений от разработчиков и количество ошибок при верстке.

  • 70+

    компонентов обеспечили консистентность продукта на iOS, iPadOS, macOS и Web.