Подключаем React

В предыдущих двух статьях я описал, как без особых усилий можно начать писать плагин для Figma. И для того, чтобы сделать простой плагин, этого знания вполне достаточно. Но вот если интерфейс вашего плагина более сложный, чем пара кнопок и инпутов, если наворочена логика состояний, такой подход становится неудобен. Особенно учитывая, что весь код надо писать в html. Решить данную проблему нам поможет его величество React и его преосвященство Webpack. Подключение к плагину обеих технологий хорошо описаны в официальной документации Figma. И можно было не писать эту статью если бы не одно но, официальная инструкция не работает. А раз так, поехали!

Часть 2
Взаимодействие с Figma

В статье про написание скриптов для  Adobe After Effects я предложил читателям сделать песочницу кода, работающую прямо в AE. Давайте теперь сделаем такую же и для Figma. За основу можно взять заготовку из предыдущей статьи. Здесь вы найдете необходимые для работы плагина файлы manifest.json, index.html и plugin.js.

Для начала откроем manifest.json и заменим значение поля name на актуальное. Я назвал плагин Script Notepad.

Часть 1

Hello World!!!

Второй раз сталкиваюсь с написанием плагина для Figma и второй раз недоумеваю, зачем так сложно? Ну, в общем-то, ничего особо сложного нет. Но вот этот TypeScript, это зачем все? Установи модули, настрой публикацию. Сколько я не думал, единственное объяснение, зачем все это нужно, это защита от дурака. Типа, кому надо - разберется, а остальным и нечего лезть, говнокод плодить.

Ну так, мы развеем этот снобистский тренд и прорубим ход в API Figma для всех желающих.

<= Предыдущая статья ExtendScript + Expression

И так, у нас готов макет для титров. Мы движемся к финишной прямой. Нам осталось только дописать скрипт, дополнив его методами копирования моделей на сцену. 

Заходим в метод createTitres и сразу после добавления сцены запускаем цикл, проходясь по массиву с данными титров.

Привет.

В предыдущей статье мы сделали основу модели для построения титров на сцене After Effects. Мы добавляем в проект сцену, или несколько сцен. Теперь нам надо добавить на сцену сами титры. Для того чтобы добавить титры, следует создать в макете AE модели, которые послужат нам для копирования.

Заходим в проект, где уже создана композиция ModelScene_1x1. В той же папке 1x1 создаем две композиции. Одну назовем ModelTitre_simple_1x1,  другую ModelTitre_double_1x1.

Одной из самых распространенных задач, которые встречались мне в работе, была динамичная расстановка титров в видеороликах. Видео сегодня, один из самых популярных форматов контента. Одно из ограничений накладываемых браузером, невозможность запустить в ролике звук без действия пользователя. Естественный выход из данной ситуации, заменить звук титрами. Если это 5 - 10 титров, то можно сделать их и руками. Ну, а что, если вам надо выпускать по пять роликов в день и в них не 10, а 50 - 70 титров? Да еще каждый ролик в 2 - 3 форматах. Да, плюс ко всему, еще и на нескольких языках? Если вам кажется такая ситуация необычной, то я сталкиваюсь с ней ежедневно.

Так давайте же упростим эту задачу на сколько это возможно. Мы сделаем более менее универсальный скрипт, который будет интерпретировать текст в титры на сцене After Effects. Хоть я и решал эту задачу уже много раз, буду писать свой скрипт прямо во время написания статьи, чтобы ничего не упустить и сделать свой рассказ максимально подробным. Приступим.

Всем привет.

В предыдущей статье я рассказал, как написать скрипт для Adobe After Effects. Напомню, что наш скрипт создает окно в интерфейсе программы. В этом окне можно вводить и выполнять код Extendscript - язык сценариев для программ Adobe. Теперь хочу предложит вам некоторое расширение функционала данного плагина. Давайте сделаем так, чтобы он мог загружать и сохранять написанные нами скрипты.

И так, поехали.

Начнем с загрузки скрипта. Для этого добавим кнопку Open и обработчик ее нажатия

Всем привет.

Хочу предложить вам небольшой пример, который поможет новичку с быстрым стартом в написании скриптов для программ Adobe. Данный скрипт предназначается для программы After Effects. Если вы не знакомы с самой программой это не страшно, будет достаточно базовых знаний javascript. Полный скрипт с комментариями вы можете найти тут.

И так, начнем.

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