Автоматизация дизайна на JS: от Adobe до веба

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

Обычно это делают верстальщики, если автоматизация недоступна. Помочь может автоматизация в Adobe, но она сильно ограничена, так как Adobe не «выпускает» в интернет, или текст может быть длиннее дизайна, и его необходимо уменьшать. Либо какие-то элементы дизайна могут отсутствовать. Отдельная боль для менеджеров — наличие ошибок и отсутствие отчетности.

Обновление данных и проверка количества макетов — важная задача, которую автоматизация помогает решать. У диджитал-дизайнеров есть Figma, которая решает много проблем (но не все). Но макеты из нее не подходят для полиграфии. В полиграaии CMYK, а не RGB, миллиметры, а не пиксели, шрифты надо переводить в кривые… Поэтому я начал разрабатывать экстеншены, которые позволили выйти за пределы Adobe: получать данные из Google-таблиц, делать автоматическую верстку, сохранять готовые макеты на сайт клиента. И все быстро и с проверкой данных.

После создания подобных систем я сконцентрировался вообще на отказе от Adobe при масштабировании дизайна. Современный JS позволяет создавать PDF-файлы почти с любыми шрифтами, вкладывать графику или даже делать PDF-файлы из других PDF-файлов. Так я сделал движок JP.

Это что-то вроде CSS+JS для PDF-файлов: некий конфиг графических файлов, который описывает размещение, размер и условия отображения элементов. Работает он даже в браузере (без сервера) и может создавать сотни PDF-файлов за секунды. Современная версия движка уже умеет не только делать PDF-файлы из конфигов, но и собирать конфиги из других конфигов. То есть компонентный подход. В докладе подробно расскажу про его создание и работу.