Ситуация

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

Задача

Дать инструмент, в котором можно собирать макеты интерфейсов до разработки и согласовывать их с заказчиком на этапе ожиданий, а не на этапе результата. Figma была очевидным выбором — гибкий, бесплатный, отраслевой стандарт. Команда работала на готовой платформе с собственным UI, и им нужны были не правила вёрстки с нуля, а готовый набор компонентов этого UI и знания, чтобы из этих компонентов собирать макеты.

Действия

Картинка будущего решения нарисовалась сразу.

Прошли через две итерации.

Первая — конструктор по шагам. Собрал библиотеку из ~40–50 компонентов типового UI продукта: поля разных типов, кнопки, таблица, карточка записи, панель разделов. Собирал, опираясь на реальный продукт — шрифты, отступы, цвета. Идея конструктора: переход в Figma-файл → пошаговая работа с компонентами → готовая страница → экспорт.

Итерация прошла внутреннее обсуждение, и её приняли. На практике стало видно, что конструктор слишком ограничивает.

Вторая итерация — видеокурс из трёх частей, в котором сама библиотека плюс обучение работе с ней:
— Первая часть: для чего курс, обзор интерфейса Figma, базовые принципы.
— Вторая часть: песочница с практическими задачами — несколько простых упражнений на работу с компонентами и базой.
— Третья часть: вёрстка реальной страницы записи от начала до конца, в записи.

Результат

Для смежной команды — готовый инструмент в виде библиотеки компонентов, видеокурса и песочницы. Для меня — полный цикл сборки обучающего продукта от диагноза проблемы до запуска.