Sketch и After Effects

Экспорт файлов Sketch перестает быть болью

Из Sketch в After Effects ¯\_(ツ)_/¯

Существует несколько способов перекачивать исходный sketch-файл в After Effects. Можно использовать экспорт артборда в svg-файл, затем открытие в Illustrator с последующим импортом сохраненного ai-файла в After Effects и «распаковкой» объекта. Долго. Несовместимо назад. Каждый раз рутина. Правки. Проблемы на каждом шагу: с масками, группами, стилями, текст не текст.

Формат Svg хорошо подходит для относительно простой плоской графики. Когда визуальная часть отстоит от плоских квадратов чуть дальше, начинаются проблемы с переводом графики.

Отступление

Два года назад мы делали интерфейс игрового мобильного проекта Warpship — игра в жанре Moba. Мы решили сделать интерфейс векторным, в Sketch, с использованием символов. Проще вносить изменения в быстром потоке тестирования новых механик. Приведу главный экран:

Главный экран с анимацией сборки\разборки.

Как видно, все элементы обладают стилями с градиентами и кучей теней, внутренних и внешних.

Настало время анимации. Мы хотели показать интерфейсные взаимодействия максимально быстро. Не тут-то было! Экспорт в SVG был неприемлем. Illustrator открывал Sketch-файл с ошибками отображения. Мы решили использовать прослойку — Affinity Designer. Написали скрипт, который обходил все дерево групп в Sketch и растеризовывал их, затем экспортировали артборды в SVG (с растровыми картинками слоев), открывали в Affinity Designer, и сохраняли в PSD. Таким образом удавалось сохранить позиции растровых слоев в After Effects.

Боль. Подготовка каждого артборда. Любые изменение клиента сбрасывали нас в начало процесса.

Мы, конечно, использовали Framer для сложных взаимодействий и Principle с Flinto для отдельных задач. Но интерфейсы игр далеко не всегда 2D, нужно интегрировать видео игрового процесса, пробовать звуки и иметь свободу и вариативность. На тот момент все это было нереализуемо ни в одном из приложений, кроме After Effects.

Про связку AE+Sketch интернет-сообщество молчало. Лишь пара статей в англоязычном вебе. Казалось все эти анимации — сакральное знание пары-тройки студий на Dribbble. Молчало оно и до настоящего момента. Пока не подоспели ребята из Google SUMUx.

Сегодня

Sketch и After Effects — два стандарта в современном процессе. Первый в области проектирования интерфейсов, второй в области анимации и видео-презентаций. Существует тысяча исключений, когда After Effects избыточен и не нужен. Благо есть с десяток заменителей и упростителей (Principle, Flinto, Proto.io, Justinmind, Origami, Quartz Composer, Framer, KiteApp и др.). Никто не настаивает на его использовании всегда и везде. Боже упаси! В свете развития новых интерфейсов для смешанной реальности, в трехмерном пространстве, в нестандартных ситуациях и условиях, After Effects — лучшее решение для быстрого тестирования, проверки сценариев и визуальных экспериментов. Кроме того, у After Effects нет дна в освоении, богатый инструментарий плагинов, всегда есть место для «а что если вот так захерачить?». Остальные инструменты, как правило, имеют дно, прямо под ногами.

За последний год появились плагины-расширители: Bodymovin (https://github.com/bodymovin/bodymovin) и Lottie (https://airbnb.design/lottie/)). Один парень написал Sketch2AE-скрипт (https://github.com/bigxixi/Sketch2AE/blob/master/README.md) плагин, который растеризует артборд и сопровождает его Json-файлом. Второй скармливается скрипту в After Effects, и скрипт расставляет все слои внутри композиции по местам. Казалось, что вопрос назрел настолько, что кто-то из профессиональной среды должен решить его раз и навсегда.

Завтра

Буквально на днях ребята из SUMUx (часть Google, The Search, User, and Maps UX team) выпустили два новых инструмента в помощь дизайнеру-аниматору:

• Sketch2AE для экспорта артбордов из Sketch в After Effects (https://google.github.io/sketch2ae/)
• Inspector Spacetime для передачи спецификаций на анимации https://google.github.io/inspectorspacetime/

Над инструментами работал Adam Plouff (http://www.battleaxe.co/), создатель популярного ae-плагина Rubberhorse (http://www.battleaxe.co/rubberhose) для реализации анимационных ригов (rigs).

Я рассмотрю только первый инструмент, второй оставлю за рамками данной статьи.

Sketch2AE

Sketch2AE — плагин для Sketch и скрипт для After Effects. Основаны все на той же механике с JSON-файлами и скриптингом для After Effects. Напомню, что файл sketch — банальный zip-архив с метаданными json и двоичными данными (картинки, превью документа).

Для примера я сделал навигационную панель для приложения и крупную кнопку. Все пиктограммы — символы-шейпы внутри своих артбордов 50×50.

Экспортируем с помощью Sketch2AE и сохраняем на диск:

Единственный файл при экспорте, имя всегда одно и тоже (_SketchExport.Sketchae).

Открываем After Effects, импортируем файл и смотрим, что прилетело:

Отметим:

• Символы Sketch переводятся в precomps, т.е. получают по композиции на каждый символ. Все символы группируются внутри After Effects в папку Symbols.

Символы как precomps

• Символы сохраняют размеры исходного артборда, точка привязки всегда в левом верхнем углу. Название символа внутри страницы Symbols в Sketch игнорируется, используется название экземпляра символа.

• Группы слоев не поддерживаются в After Effects без плагинов. Но можно подчинить слои родителю. Так плагин и делает.
• Маски поддерживаются!
• Векторные шейпы переводятся в шейпы After Effects. Есть небольшие проблемы с комбинированными вариантами.
• Поддерживаются тени и градиенты.

Тени для овала в Sketch и в After Effects. Один-в-один.

• Текстовые слои являются текстом. Однако, с позиционированием (см. экран выше) случаются проблемы. Можно жить.

Что не поддерживается:

• Размытия, включая Background Blur.
• Настройки изображения (Hue, Saturation, Brightness и Contrast).
• Spread у внешней и внутренней тени (величина толщины\жирности тени).
• Окончания стрелок. Давно пора уничтожить их в Sketch.
• Граница всегда по центру слоя (AE не поддерживает ориентацию границ наружу и вовнутрь).
• Поворот слоя. Нужно растеризовывать.
• Отступ до параграфа
• Настройки отображений шрифта (text decorations). Именно поэтому в примере выше «журнал», а не прописной «ЖУРНАЛ».

Полный список здесь.

Вывод

Экспорт с помощью Sketch2AE я оцениваю как очень качественный. Практически полная поддержка объектов Sketch средствами After Effects, включая эффекты слоев, векторы, удобные группировки, маски и, конечно, поддержку символов как отдельных композиций.

Надеюсь эта статья поможет вам в упрощении рутинного процесса переноса файлов между приложениями!

Успехов!

Ссылки

Ниже я привел ссылки на все упоминаемые в статье ресурсы.

• Оригинальная статья на английском, которая послужила основой для данной [Bringing Sketch and After Effects closer together — Google Design — Medium](https://medium.com/google-design/bringing-sketch-and-after-effects-closer-together-d83b3e729c93)
• Sketch2AE от Google, https://google.github.io/sketch2ae/
• Sketch2AE от http://bigxixi.com/
• Lottie, https://airbnb.design/lottie/
• Bodymovin, https://github.com/bodymovin/bodymovin
• Inspector SpaceTime, https://google.github.io/inspectorspacetime/