Ситуация

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

Задача

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

Действия

Идея появилась в рабочем разговоре: меня спросили, можно ли в Figma решать подобные задачи. У меня сразу сложилась картинка, как это может работать, и я предложил это сделать.

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

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

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

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

Результат

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