Как экспортировать из figma в after effects
Обновлено: 07.07.2024
Сделал пилотное видео в котором рассказал, как импортировать векторную графику из Figma в After Effects для создания векторной анимации, и как экспортировать полученный результат в JSON файл для использования с библиотекой Lottie в коде.
Утконос ОНЛАЙН запустил детский подкаст, в котором продукты поют, выступают со стендапом и читают рэпУтконос ОНЛАЙН и студия подкастов Brainstorm запустили подкаст-кастинг, в котором продукты поют, выступают со стендапом и читают рэп и показывают, какие soft-skills нужно развивать детям с раннего возраста.
Инновационная зрелость: определяем развитие корпоративных инновацийЧто такое инновационная зрелость? Как ее измерить? Какие возможности раскрывают инновации перед компанией? Об этом расскажем прямо сейчас в нашей небольшой аналитической заметке.
Топ-8 героев сериалов, у которых можно научиться крутым управленческим решениям Как прошла онлайн-конференция «Бизнес24»: обзор докладов23 ноября 2021 года состоялась онлайн-конференция «Бизнес24», организованная DD Planet совместно с «Битрикс24». Спикеры обсудили инструменты автоматизации бизнеса, CRM-маркетинг и новые возможности развития в сложные времена пандемии.
«Яндекс.Драйв» списал 84,735 рублей за поездку в 3 часа и несколько километровЕсли кратко, то данной публикацией я хочу предупредить всех пользователей подобных сервисов: не привязывайте основную карту никогда, только виртуальную или ту, где не будет много денег.
В Рыбинске открылся магазин «Вкусвилла» в дореволюционном стиле Статьи редакции«Вкусвиллъ» присоедился к «Магнитъ Косметикъ», «Росбанкъ» и другим.
За них можно купить кофе, кино и технику.
Здравствуйте. Попала в тупиковую ситуацию, прошу совета, что дальше делать.
«Работать настолько приятно, что деньги неважны»: кем был создатель «теории потока» Михай Чиксентмихайи Статьи редакцииАмериканский психолог Михай Чиксентмихайи искал ответ на вопрос, что делает человека счастливым. Его главная теория показала, что в любой деятельности результат и вознаграждение — это не главное, а стремление к благополучию нужно поддерживать и на рабочем месте.
Давно не переносил макеты из фигмы в афтер эффектс, сегодня возникла такая необходимость, ну думаю сейчас быстренько все закину, тем более все давно установлено и настроено. Как же я ошибался.
Запустил значит ZXP Installer, в After Effects выудил AEUX, скопировал ссылку в Figma и открыл конвертер AEUX для получения файла JSON, ссылка открывается и радует меня новостью о том что Фигма больше не поддерживает конвертер и чтобы перенести файл нужен танец и бубен.
В качестве альтернативы Figma предлагает более мощный плагин правда только в бета версии и только для десктопной версии и пока только в режиме разработчика. Вобщем сейчас все несколько запутанно. Хотя на этот случай Figma заготовила довольно объемный гайд с инструкцией по подключению, кто желает может изучить ее, ну а кто изучил но недопонял, вэлком. Давайте разбираться что работает, а что нет и что нужно чтобы заработало.
Как было раньше
Нужно для установки и сейчас, это работает
- Скачиваем AEUX с сайта разработчика
- Скачиваем ZXP Installer с aescripts
- Установите ZXP Installer
- Перенесите AEUX в ZXP Installer
Как переносили макеты раньше смотрите здесь.
Не нужно, уже не работает, Figma перестала поддерживать конвертер
- Скопируйте ссылку проекта Figma
- Перенесите ссылку проекта Figma в конвертер AEUX
- Скачиваем сгенерированный файл JSON
- Перетащите файл JSON на панель AEUX After Effects
Как сейчас
AEUX скачиваем с официального сайта последнюю версию (на сегодняшний день 0.75)
Далее, переходим в приложение Figma (это десктопная версия), надеюсь что оно у вас уже установлено, если нет качаем с официального сайта, авторизуемся, создаем проект.
Подвал официального сайта, пункт Downloads
Выбираем нужную ссылку — Винда или Мак
В созданном проекте нажимаем правой кнопкой мыши в любом месте и в контектном меню выбираем Plugins → Development → New Plugin.
Нажимаем на блок Link existing plugin и в папке AEUX выбираем файл манифеста — manifest.json
Этот файл находится в скачанной ранее папке AEUX → AEUX Figma.
После этого окно исчезнет, опять нажимаем правой кнопкой мыши и в контектном меню выбираем Plugins → Development → AEUX.
Выбираем и вуаля получаем окошко AEUX.
Теперь чтобы нужные элементы перенести в афтер эффектс достаточно нажать на “Send selection to ae” и выделенные объекты автоматом экспортируются в After Effects, но при условии что у вас правильно установлен AEUX версии 0.75 через ZXP Installer.
Также AEUX должен быть запущен в AE.
Надеюсь я вас не сильно запутал. Ну а если все таки непонятно, всегда есть подробная текстовая и видео инструкция от разработчиков Figma.
Arsen, по умолчанию в хд встроена не плохая работа с анимацией, по крайней мере для большинства задач хватает, другое дело, что фигма вообще даже этого мизера не имеет и приходится корячится вот так в афтере или платить за принципл
Никита, я думаю, задача стоит не в прототипировании, а в анимации. Прототипирование хоть в inVision сделать можно, ну или для лучшего эффекта сразу в вебе (путь не для всех), ну или платить сервисам, это не проблема (на мой взгляд). А вот чтоб легко конвертнуть в After Effects именно с целью создания анимации — вот с этим проблемы.
Motion Design помогает пользователям ориентироваться, предоставляя контекст и различные подсказки по навигации. Но не всегда было легко интегрировать что-то новое в установленные рабочие процессы разработки UX.
Совсем недавно, в 2016 году, все еще ощущались темные века UX motion design. Было много новых шаблонов, но это было еще до появления Lottie, которая дала нам возможность визуализировать анимацию на устройствах. Подготовка визуального дизайна для After Effects подразумевает изменение изображения внутри Illustrator, принимая во внимание сложные процессы импорта и преобразования.
Чтобы ограничить, снизить до минимума эти бесполезные шаги, в середине 2016 года я начал создавать внутренний инструмент Sketch2AE в Google. Это был первый инструмент такого рода, предназначенный для передачи данных между приложениями. Но это было больше, чем просто импортер файлов. Этот инструмент был способом компенсировать время людям. В 2017 году он был выпущен публично и помог как проектировщикам, работающим в UX, так и визуальным дизайнерам, начинающим в After Effects.
С тех пор сфера UX motion design стала более развитой. Многие команды разработчиков теперь думают, что UX также занимается размышлениями о том, как информация воспринимается по прошествии времени. Совместные итерации Motion дизайнеров с визуальными дизайнерами на протяжении долгого времени, может существенно повлиять на поиск успешных решений. Со времени первого выпуска Sketch2AE инструменты усовершенствовались, а также возросли требования к интеграции для дизайнеров, работающих в моушн. Я очень рад поделиться с вами AEUX, более надежной системой для работы с UX motion design в After Effects.
Одной из целей новой системы является поддержка большего количества хост-приложений и повышение гибкости при работе между командами. Обмен данными в экосистеме Adobe теперь хорошо поддерживается в XD и Illustrator, но с AEUX вы можете импортировать слои из Sketch и Figma и поддерживать новые функции Sketch. Плюс …
- Cкорость сборки сложных артбордов увеличена на 93%.
- Теперь поддерживается редактирование символов для текста и вложенных символов.
- Мастера символов расположены более эффективно, что положит конец многим неудобствам.
- Экспорт изображений был улучшен за счет рисования собственных Ae градиентов и устранения лишних изображений.
- Точность текстового слоя была значительно улучшена за счет позиционирования, отслеживания переднего, верхнего/нижнего регистра.
- Группы могут автоматически создаваться как Ae precomps.
- Кроме того, группы слоев могут быть предварительно скомпонованы и раскомпонованы одним нажатием, даже если вы не используете импортер AEUX.
- Появились дополнительные новые функции, такие как вложенные логические значения, маскирование слоев и групп, размытие фигур, параметры для работы с контурами или параметрическими фигурами.
AEUX + Figma
Хоть Sketch и очень популярен, многие визуальные дизайнеры также начали использовать Figma. AEUX был разработан для обеспечения бесперебойной работы при переключении между командами.
Основной особенностью Figma является совместная работа, поэтому экспорт данных слоев осуществляется через веб-приложение, которое подключается к API Figma. На данный момент плагины Figma не могут работать внутри среды проектирования, что означает, что экспорт слоев выполняется как более традиционный экспорт/импорт. В онлайн приложениях для дизайна безопасность является самым важным фактором.
После аутентификации приложения экспорта AEUX вам будет предложено ввести URL-адрес файла Figma. Приложение будет собирать все данные для каждого из кадров (монтажных областей) в файле. Каждый кадр может быть загружен отдельно, а любые необходимые изображения будут обработаны. Перетащите новый файл AEUX.json на панель AEUX в After Effects, и слои будут построены.
Полученные уроки
Создание инструментов, при котором вы полагаетесь на исходник работы другого дизайнера может быть достаточно сложным. Иногда ваши лучшие намерения не очень полезны, или люди находят новые пути и способы решения различных задач, о которых вы даже и не подозревали. Я много узнал о сборке Sketch2AE, а затем еще больше узнал о сборке Overlord (бесстыдный плагин для коммерческого инструмента).
Самый полезный урок, который я извлек из этих проектов, – это ограничение переключения внимания. Если кто-то пытается создать дизайн, пусть он разрабатывает дизайн, а не фокусирует все внимание на чтении руководства.
Удалить/копировать/вставить
Данные слоя теперь передаются автоматически, чтобы избежать путаницы. Это не совсем мгновенно, но к моменту перехода от Sketch к Ae панель должна обновиться, чтобы показать новые слои, готовые для работы. Это упрощает процесс передачи и позволяет больше сосредоточиться на дизайне.
Создайте интерактив
Для меня одна из самых интересных частей в процессе проектирования – это тестировать и находить, что работает, а что нет. Это довольно противоречит импорту файлов, где вы должны перезапустить все заново, если вы подготовили один из слоев неправильно. Основная идея Overlord – позволить вам передавать то, что вам нужно, когда вам это нужно. Я хотел, чтобы эта концепция была центральной в AEUX, что требовало отойти от погружения в меню и перейти к плавающей панели плагинов для Sketch, чтобы соответствовать ожидаемому опыту работы с инструментами в Ae.
Покажите мне, что происходит
В предыдущей версии уведомления отображались только после успешного экспорта и их можно было просто напросто не увидеть в нижней части окна Sketch. Так что вам приходилось ждать и гадать, сработало ли это.
Новая плавающая панель Sketch также предоставляет специальное место для уведомлений. Идея показывать прогресс распространяется и на Ae. Мы можем следить за обновлениями панели и индикатором прогресса на слабых компьютерах, а также видеть уведомления об ошибках в элементах, которые Ae не может отрисовать в данный момент.
Двигаемся дальше
UX motion design растет, и мы все еще изучаем все, и как лучше всего выполнить и протестировать различные проекты. Каждый раз когда мы что-то делаем, мы пытаемся поделиться тем, что узнаем в процессе. Я надеюсь, что AEUX поможет вам работать быстрее и получать больше удовольствия от процесса.
Читайте также: