Интерактивный PDF с заполняемыми полями прямо из Figma. История первого опыта в вайбкодинге.

Я работаю коммуникационным дизайнером в in-house команде Cloud.ru. До этого несколько лет занимал аналогичные позиции в других компаниях. И везде, вне зависимости от масштаба бизнеса, рано или поздно возникала одна и та же задача: создание заполняемых PDF-форм.

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

Представьте стандартный процесс: макет в Figma готов, дизайн согласован и утвержден. Теперь нужно превратить этот статичный макет в интерактивный PDF, где пользователь сможет вводить данные. И тут начинаются сложности.

Штатный экспорт из Figma выдает «плоский» файл без намека на интерактивность. Приходится открывать Adobe Acrobat и вручную расставлять текстовые поля поверх дизайна, выравнивая их на глаз. Если клиент вносит даже минимальную правку в текст — цикл запускается заново: правка в Figma → экспорт → рутинная настройка полей в Acrobat.

Я изучил существующие плагины. Оказалось, что их немного: одни давно заброшены разработчиками, другие предлагают избыточный или неподходящий функционал. В этот момент я понял — пора сделать собственный инструмент.

Главная идея моего плагина — максимальная нативность. Дизайнеру не нужно изучать сложный интерфейс. Достаточно просто называть слои, используя определенные префиксы, и плагин сам поймет, где в итоговом PDF должно появиться интерактивное поле.

Я выделил три основных типа полей:
field_название слоя — для текстового ввода;
checkbox_название слоя — для создания флажков (галочек);
radio_название слоя — для переключателей (радиокнопок).

Выделив нужный слой на макете, нажмите в окне плагина, например, на checkbox_*, и в названии вашего слоя появится префикс, понятный алгоритму.

Дополнительные возможности:

Группировка: Радиокнопки с одинаковым именем автоматически объединяются в группу переключателей.
Многостраничность: Несколько выбранных фреймов экспортируются в единый многостраничный документ.
Визуальный контроль: Есть опция прозрачного фона (если поле уже отрисовано в макете) и функция подсветки голубой рамкой для проверки корректности распознавания всех зон перед финальным экспортом.

Разработка велась в тесном симбиозе четырех инструментов:
1. Claude Code — мой основной ИИ-ассистент.
2. VS Code — основная среда разработки.
3. GitHub — для контроля версий и хранения истории изменений.
4. Figma — как «песочница» для тестирования в реальных условиях, а так же инструмент для проектирования интерфейса плагина. Для последнего использовал Figma MCP.

Claude Code это не просто чат-бот, он работает напрямую в терминале: читает файлы, правит код, запускает сборку и делает коммиты. Это не магия «сделай мне всё красиво», а полноценная работа в паре с ИИ-разработчиком, который берет на себя исполнение, пока вы принимаете продуктовые решения.

На ИИ лежала вся рутина. Настройка сборки через Webpack, типизация на TypeScript, CSS-анимации и создание системы локализации (русский/английский языки). Я формулировал задачу, проверял результат в Figma и давал фидбэк для следующей итерации.

Когда плагин был готов, я с оптимизмом отправил его на проверку. Через несколько дней пришел отказ. Оказалось, модерация в Figma — это серьезный процесс, а не формальность.

Проблема №1: Политика безопасности (CSP)
В коде остался вызов шрифта Manrope через Google Fonts (обычный <link> в HTML). Но так как интерфейс плагина работает в изолированном iframe, жесткие правила Content Security Policy запрещают загрузку внешних стилей.
Решение: Полный отказ от Google Fonts в пользу системного стека шрифтов. На визуале это почти не сказалось, зато плагин стал безопасным.

Проблема №2: Работа с внешними ссылками
Решил зашить донатную ссылку в UI. Стандартный метод window.open() в плагинах не работает. Платформа требует использовать метод figma.openExternal(), который вызывается из основного потока плагина. Это описано в документации, но на практике становится заметным только в момент отказа.

В целом, модераторы Figma реально запускают плагин, изучают консоль на наличие ошибок и сверяют всё с гайдлайнами. Мой совет: изучайте правила безопасности *до* отправки, а не после первого «реджекта».

Что получилось в сухом остатке? Interactive PDF Export — это лаконичный инструмент для Figma, который делает ровно то, что обещает: превращает фреймы в PDF с рабочими полями, чекбоксами и радиокнопками.

Если в вашей работе часто встречаются заполняемые PDF — попробуйте мой инструмент. Буду искренне рад фидбэку!

Плагин в Figma Community