Как экспортировать из figma в after effects
Анимация — важная составляющая любого проекта, которая при правильном использовании может произвести хорошее впечатление, придать вашему дизайну изюминку и привлечь как можно больше внимания.
Вот гайд по созданию анимаций с советами и замечаниями, которые улучшат вид вашего дизайна.
Часто мы используем анимации, чтобы произвести хорошее первое впечатление. Моушн-дизайн оживляет наш пользовательский интерфейс и показывает, как все функции будут работать без вмешательства со стороны программиста. Вот один из концептов, в котором мы применили анимацию для демонстрации наших идей клиенту.
Оживление иллюстраций
Иногда можно использовать простые анимации для оживления иллюстраций, на это не уйдет много времени, но приведёт к положительным результатам. Анимированные иллюстрации, даже самые маленькие, действительно отыгрывают большую роль, не стоит ими пренебрегать.
Упрощение реализации
Моушн-дизайн помогает быстрее реализовать ваш проект. Как?
Во-первых, вы можете анимировать сайт или приложение, чтобы наглядно показать разработчикам, что именно они должны сделать. Вы можете анимировать все составляющие вашего проекта или только некоторые нестандартные переходы/раскрытия.
Во-вторых, если вы анимировали иллюстрации в After Effects, вы можете экспортировать их в формат файлов Lottie. Таким образом, их реализация не займет много времени, а разработчики смогут потратить его на нечто более приоритетное.
Улучшите свое портфолио
Слайд-шоу — это здорово, но давайте будем честны — людям нравятся видео. Они просты, впечатляющи, интересны и информативны.
Если вы занимаетесь моушн-дизайном, вы можете создавать множество классных анимаций: поиграйте с эффектом параллакса, включите 3D-анимацию в пользовательский интерфейс, поиграйте с эффектами искажения на фотографиях, анимируйте иллюстрации и т.д.
Если вы UI/UX-дизайнер, даже простая прокрутка и раскрытия помогут привлечь больше внимания к вашему дизайну и сделать портфолио более выдающимся.
Импорт из Sketch
Импорт из Sketch выполняется просто. Для этого вам понадобится плагин AEUX для After Effects и Sketch.
- Организуйте все в группы и дайте правильные названия всем слоям
2. Настройте параметры импорта в плагине AE. В настройках плагина вы можете выбрать, куда импортировать: в новую или уже существующую композицию. Также плагин умеет предварительно создавать артборды, группы, изменять частоту кадров и размер композиции и т.д. (подробную информацию о настройках плагина вы можете прочитать здесь).
Импорт из Figma
Для этого вам понадобится помощь плагина AEUX для After Effects и онлайн-плагина Figma (инструкция здесь).
1. Убедитесь, что вы скачали шрифты, используемые в дизайне.
2. Убедитесь, что все слои названы правильно. Это очень важно, ведь в противном случае вы потратите массу времени на организацию работы в After Effects.
3. Настройте параметры импорта в After Effects, тут всё как и в работе со Sketch.
4. Перейдите в панель плагинов > development > AEUX. При необходимости измените настройки и нажмите «send to AE». В последней версии плагина исходный код из Figma будет автоматически открываться в After Effects.
Precompose подразумевает под собой новую композицию с анимацией, которую вы решили по какой-то причине сделать отдельно. Чаще всего это делается, чтобы отделить одну логически законченную работу от других.
Как мы знаем, есть два типа людей:
- Любят precompose и используют их все время;
- Предпочитают не использовать precompose.
Мы используем их только для организации неанимированных или лишь слегка анимированных частей дизайна: верхнего и нижнего колонтитула, карточек и панелей инструментов.
Зачем? Вы часто теряете гибкость в процессе анимации. Например, если вам нужно анимировать прокрутку и у вас есть анимация для частей экрана — вы будете терять много времени, перемещаясь туда-сюда в композициях.
Кроме того, некоторые эффекты слоя могут не работать должным образом, если вы создали анимацию в предварительной композиции (CC bend, 3D-слои и т.д.).
Если вы не используете Precompose, вам в любом случае необходимо организовать свои слои.
Мы всегда используем цветовой код для распределения слоёв по группам и NULL-объектам, что помогает быстрее анимировать и находить нужные нам слои.
Во время анимации меняйте цвет для всех слоев на каждом анимированном экране (как на левом изображении) или частей экрана с цветовым кодом (как на правом изображении). Например, у нас есть экран с заголовком, а затем идет 3 столбца с содержимым.
Первый вариант — применить одинаковый цвет ко всем элементам экрана, второй — применить уникальный цвет к каждому столбцу. Затем создайте объекты NULL и сделайте все слои экрана родительскими для этого NULL.
Когда подготовка будет окончена, вы будете готовы приступить к анимации. Мы не будем учить вас анимировать основные параметры, но дадим несколько личных советов, которые мы выучили сами.
Motion Tools
Мы не можем представить себе даже день анимации без этого плагина. Он помогает оптимизировать рабочий процесс и сэкономить много времени.Все инструкции о том, как его использовать, вы найдете в этом видео.
Это ещё один простой, но удобный плагин. У него есть только одна простая функция — копирование динамики из одного ключевого кадра в другой. Как это использовать? Просто выберите ключевые кадры, когда вы уже настроили динамику, нажмите «копировать», выберите нужные кадры, для которых вам нужна такая же динамика и нажмите «вставить». Легко и полезно!
Bodymovin и Lottie Files
Также мы используем плагины для экспорта наших иллюстраций, предварительных загрузок и анимаций значков.Эти плагины преобразуют композиции After Effects в файлы формата JSON, которые можно использовать на iOS, Android и React Native без изменений.
Хорошее смягчение — самое главное в анимации и ключ ко всему. Так как же научиться делать хорошее смягчение?
В движении пользовательского интерфейса вы все время будете анимировать две вещи: прокрутки и раскрытие.
Для их анимации используются стандартные свойства: положение, непрозрачность, масштаб и поворот.
Например, вы анимируете прокрутку: все ваши слои готовы и организованы, вы уже создали NULL для прокрутки и родительские слои для него (мы говорили о создании NULL для каждого экрана). Теперь вам нужно сделать их родительскими для прокрутки NULL. Хорошо, пора творить чудеса.
- Нажмите на scroll NULL и активируйте свойство Position (нажмите «P» на клавиатуре);
- Создайте ключевые кадры для начальной и конечной точек;
- Выберите ключевые кадры и перейдите в редактор графиков. Выберите график скорости, если он еще не активен.
- Отрегулируйте кривую, как на изображении.
- Вернитесь к временной шкале и при необходимости отрегулируйте время.
Теперь пора поговорить об анимации раскрытия объектов. Вы уже анимировали движение прокрутки, но этого все ещё недостаточно. Чтобы движение выглядело хорошо, необходимо анимировать отображение слоев, которые вы прокручиваете.
Как оживить раскрытие?
- Выберите слои, нажмите «P» и «T» на клавиатуре, чтобы выбрать положение и свойства непрозрачности;
- Переместитесь на 20 кадров вперед и создайте ключевые кадры;
- Вернитесь назад, анимируйте непрозрачность до 0, положение Y до +20;
- Создайте динамику, как показано на графике ниже.
Просмотрите анимацию и вы заметите, что теперь все движения выглядят более плавными.
Итак, вы анимировали движение прокрутки, раскрытия и добавили динамику, но чего-то всё еще не хватает… Смещений! Без них никуда, они всегда имеют большое значение.
Что из себя представляет «Смещение»?
Это означает, что анимация не одновременна. Например, анимация каждого следующего слоя начнётся на 2 кадра позже, чем анимация предыдущего слоя.
- Создайте смещения — переместите каждый слой на 2 кадра дальше (перемещайте ключевые кадры каждого слоя по одному или используйте плагин MDS, чтобы сделать это одним щелчком мыши).
- Просмотрите и при необходимости настройте анимацию. Теперь вы увидите большую разницу. Так что не забывайте использовать смещения, это всегда помогает!
Когда вы освоили базовую анимацию, пришло время проявить больше творчества.
Раскрытие фото
Добавьте маски, масштаб, поворот или даже искажение ваших фотографий и это мгновенно улучшит ваше положение.
Например, здесь вы можете наблюдать добавленную масштабную анимацию и отображаемую маску. Такое действие легко реализовать и выглядеть это будет гораздо лучше, нежели стандартное раскрытие.
Фотоэффекты
Помимо раскрытия, вы можете добавить эффекты искажения фотографий, которые будут отображаться при наведении курсора или же видны постоянно.
Создание искажений — довольно комплексный, а иногда и достаточно сложный процесс, но вы можете использовать уже готовые пресеты, которые есть в свободном доступе, в Интернете. Вот несколько отличных вариантов того, как фотоэффекты могут быть применены на ваших сайтах.
В большинстве случаев мы используем простые анимации для текста, но иногда вам может понадобиться добавить некоторые интересные детали к базовой анимации.
Анимацию текстовых эффектов достаточно легко освоить. Если вы наберете «текстовая анимация в After Effects» на YouTube, там будет представлено множество руководств. Но если вы не хотите тратить свое время на изучение анимации текста — можете использовать уже готовые пресеты. Их можно использовать как для заголовков, так и для основной текстовой анимации.
Посмотрите, как такой вид анимации может помочь в создании впечатляющего видео.
Оживите свои иллюстрации и ваш дизайн на 100% станет более впечатляющим.
Всегда стоит анимировать иллюстрации для сайтов/приложений. Это быстро, легко и просто реализовать, а профит от этих действий будет максимален.
Когда анимация будет завершена, разработчикам потребуются файлы в формате JSON. Для их создания мы используем плагин Bodymovin или Lottie files для After Effects. В большинстве случаев эффекты не работают в формате Lottie, поэтому мы пытаемся создать красивую анимацию с основными свойствами: положением, вращением, масштабом, непрозрачностью и анимацией пути.
Когда вы закончите создание анимаций, проверьте пару вещей:
1. Предварительно просмотрите все анимации несколько раз. Не один раз, а хотя-бы пять. Убедитесь, что все выглядит так, как вы хотели.
2. Сделайте так, чтобы в панели проекта все выглядело красиво. Все источники должны находиться в отдельных папках. Предварительные композиции правильно названы и собраны вместе в одной папке. Создайте папку «Архив» и храните здесь все версии анимаций (просто сделайте это, так будет лучше).
3. Выполните визуализацию и снова проверьте визуализированную анимацию. Наберитесь терпения и проверьте всё это еще хотя-бы 5 раз, уверяю, вы найдете там ошибки.
Если вы новичок в анимации, у нас есть для вас несколько советов.
Используйте Adobe Media Encoder. Да, вы можете рендерить .mov прямо в After Effects, но это не самый лучший формат. MOV имеет большой вес, и не всегда правильно воспроизводится. Конечно, вы можете выполнять рендеринг в MOV, а затем использовать онлайн-конвертеры для рендеринга в формате MP4 или GIF.
В Media Encoder рендеринг проходит в формате h.264. Чаще всего вам будет достаточно стандартных настроек. При необходимости можно изменить частоту кадров или размер видео здесь, не возвращаясь к AE. Просто убедитесь, что для вашего рендера установлено «Ускорение графического процессора Mercury Playback Engine (металл)».
Иногда вам нужно оптимизировать видео, чтобы оно весило меньше. Для этого мы рекомендуем приложение HandBrake. Пользоваться им очень просто и интуитивно понятно. Здесь вы можете уменьшить размер файла видео, оптимизировать, изменить размер, битрейт или частоту кадров.
Советы по социальным сетям
Первое и самое главное — миниатюры. Самая распространённая ошибка — забывать о хороших миниатюрах. В результате у вас может быть пустой или непривлекательный эскиз, который испортит впечатление обо всей проделанной вами работе.
Второе, над чем нужно работать — зацикленная анимация. Это тот пункт, который делает анимацию красивее и плавнее.
Давно не переносил макеты из фигмы в афтер эффектс, сегодня возникла такая необходимость, ну думаю сейчас быстренько все закину, тем более все давно установлено и настроено. Как же я ошибался.
Запустил значит 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.
Создатели плагина для скетча разработали отличный конвертер для переноса макетов из Figma в After Effects.
Инструкция есть на сайте разработчика кому ее будет мало вот пошаговое руководство по переносу макетов:
Скачайте AEUX с сайта разработчика
Перейдите на сайт разработчика и скачайте расширение AEUX
Скачайте ZXP Installer с aescripts
Для дальнейшей интеграции расширения в After Effects необходим ZXP Installer, скачиваем ZXP Installer
У меня операционная система Windows соответственно скачиваю файл для Windows
Установите ZXP Installer
Затем устанавливаем его. Ничего военного в установке нет, просто запускаете экзешник, соглашаетесь с условиями и по сути все, окно откроется автоматически
Откроется такое окно:
Перенесите AEUX в ZXP Installer
Теперь необходимо перенести ранее скачанный файл AEUX (предварительно его разархивировав) в ZXP Installer для того чтобы все заработало в After Effects, перенести файл можно Drag and Drop но у меня так не получилось с первого раза поэтому я сделал так — File — Open, отлично все открылось.
Соглашаетесь со всеми угрозами:
Появится окошко с подсказкой где найти панель AEUX в After Effects:
Также можно легко удалить или переустановить AEUX:
Переходим в Figma
Скопируйте ссылку проекта Figma
Тут все просто — перейдите в Figma откройте проект и в адресной строке скопируйте URL
Перенесите ссылку проекта Figma в конвертер AEUX
Теперь перейдите в конвертер AEUX и вставьте туда свою ссылку
Скачайте сгенерированный файл JSON
Конвертер сгенерирует файл JSON, который необходимо скачать
Перетащите файл JSON на панель AEUX After Effects
После того как вы скачали файл JSON перейдите в After Effects и откройте панель AEUX, она находится в Window — Extensions — AEUX
Откроется такое окно:
Остался последний шаг — перетащите файл JSON на эту панель в верхнее поле
Установка расширения AEUX без ZXP Installer
Если по какой то причине у вас не получилось установить расширение AEUX через ZXP Installer, выход есть. (как в том анекдоте: даже если вас съели у вас всегда есть два выхода).
Перейдите на диск C: и скопируйте файл AEUX.zxp в папку / extensions / которая находится по этому пути: C: / Users / ** имя пользователя ** / AppData / Roaming / Adobe / CEP / extensions /
AEUX is a set of panels for After Effects and Sketch 52+ and a converter for Figma to transfer layers into After Effects with the least amount of friction from visual design to motion.
Formerly known as Sketch2AE, AEUX is designed to keep up with the newest ways people are designing for screens. Spell it out or say it like A-Yo.
Download
Note: This is an archive of the previous version of AEUX for use with versions of Sketch 52-56. Use of the current version is recomended.
Transfer animatable layers right into Ae with a couple clicks
Sketch
- Open the plugin panel in Sketch from the top Plugin menu
- Select layers in Sketch
- Transfer shapes with either:
- Selection to Ae - layer data is transfered behind the scenes
- Export AEUX.json - layer data is saved as a file
Figma
- Copy Figma file URL
- Open a Figma file in the browser and copy the whole URL
- or in Figma, click SHARE in the top right, then click Copy Link
- A list of frames within the file will load
- Select from the available pages directly above the frames list
- An option to download thumbnails is available but disabling will speed things up
Note: At this time, it is not possible to add a plugin panel to the Figma interface. Unlike the Sketch AEUX plugin, it is not yet possible to select individual layers from a frame. Instead, all layers within an artboard will be downloaded.
Targeting specific layers within a frame is possible by hiding unwanted layers (the eyeball icon). Hidden layers will be skipped when converting a frame.
After Effects
-
and open AEUX inside of After Effects
- Located in the top menu Window>Extensions
Customize the way layers are built
New Comp
While most design apps are able to work at a lower resolution for different pixel densities Ae needs real pixel values. The size of the new comp is defined by the Comp size multiplier. When creating a new comp, a comp size multiplier dropdown will be visible.
Current Comp
When adding new layers to an existing comp, the current comp’s width is measured and used to define the comp size multiplier of the incoming artboard. The comp size multiplier will scale the new layers so the width of the artboard and the width of the comp match.
Detect parametric shapes
You may prefer rectangles and ellipses or you may love paths. Limit conversions by transfering shapes the way you want.
Precomp groups
By default, groups are created as invisible parent layers to the visible layers in the main comp. This option will automatically precomp these grouped layers. Precomps may also be ungrouped with the grouping buttons.
Auto build artboards
Enabling this option will create layers as soon as they are available from Sketch using the other currently selected options.
Organizing layers into groups just like all the other design apps
Group and ungroup
Precomping can simplify a long list of layers in a single comp but creates multiple inaccessible comps. It is now possible for the first time in After Effects to precomp and un-precomp groups with a click.
Show and hide
Group layers are rectangle guide layers that do not render but can help transform multiple elements. Interacting with these is possible by switching layer visibility eyeball or adjusting the transform properties. Click to toggle all guild layer visibility with a click.
Delete all guide layers
If groups aren’t your thing and you end up with a bunch of unnecessary layers, click to remove all guide layers from the comp.
Simplify selected Sketch layers for cleaner transfers
Symbols may be nested, overridden, transformed or constrained and this can lead to a lot of confusion in Ae (usually with image overrides). If layers build incorrectly inside of Ae, try detaching the symbol from its master. This removes the symbols dependence on nested data in order to draw its layers more accurately.
Building icons from simple shapes is a flexible way to design and can make animation possible inside of Ae. AEUX supports Boolean operations, but mixing different operators (like an Add then a Subtract) within a single group can be a little hard for Ae to draw. Click to flatten and combine shapes into a single element.
Sketch can only export what it sees on an artboard. That means if part of an image is beyond the artboard bounds, it will be trimmed and the placement of the image inside of AE will be misaligned. Converting images to symbols creates a parent artboard sized to the image. No cropping will occur and everything will align correctly.
Очень много воды
Напрямую перенести макет ПОЛУЧИТЬСЯ! Используя плагин для фигмы AEUX. Не благодарите
Скажите плз название шрифта в заголовках?
в будущее возьмут не все это про песню мадонны на евровидении
Но есть замечание, может пригодится: на мой взгляд не стоит рассказывать как выделять слои, что нажимать чтобы экспортировать и прочие мелочи. Если человек этого делать не умеет, то как он работает с макетом? Ему действительно нужно учиться анимировать что-то? Треть видео про все эти мелочи. В общем, видео могло быть более концентрированным, быть короче. С удовольствием смотрел бы что-то такое, где только суть на 10 минут.
С помощью AEUX можно довольно просто экспортировать макет из Figma и Sketch в After Effects
По какой сетке рисуют такой дизайн? Или контент выходит за границы стандартной сетки?
Благодарю, все четко, понятно и главное за 15 минут)
Это видео о том как делать не надо, я молчу про херово обтравленного клоуна лежащего на полу, а про то что я должен в пнг сохранить белый квадрат вообще бред, чувак все делается шейпами и масками за 5 секунд в самом афтере, кидается одна пдгешка-жипешка на фон, лочится и за пять сек накидывается весь макет, притом что текст лучше кидать текстом чтобы можно было применять текстовые бл@ть эффекты а не смотреть потом на гребаную ворсисто-махровую фигню. Но показал способ малацом, посмотрите ребята и точно так не делайте, будет долго и херово в итоге.
Запишите как сделать дизайн мобильного приложения, какие есть фишече, тренды material design, тренды iOS. Слышал, что с точки зрения дизайна эти платформы сильно сблизились (я сам программист)
спасибо - доступно изложил.
жаль, нельзя экспортировать с привязкой по координатам относительно разрешения будущего видео.
ну, чтоб не двигать и угадывать в афтере. хотелось бы пиксель в пиксель))Привет! Снимите, пожалуйста, урок как анимировать в Principle и интегрировать это все в фигме)
Спасибо! Хотелось бы увидеть видео по аминированию в ProtoPie. Работаю на Винде :)
Спасибо, всё понятно. Ты за 15 минут рассказал больше чем скилбокс за два часа.
Жаль что в Фигме вместо того, чтобы разрабатывать нужные функции занимаются хернёй. Они даже нормальное масштабирование в компоненте элементов относительно сестринских элементов не реализовали
Ох, огромное человеческое спасибо! Все предельно ясно и понятно. Пооолно мастер классов в интернете о фотошопе, а о простых программах видимо все считают, что их знают по любому. Отдельное спасибо за приятное воспроизведение материала. Очень приятно слушать комментарии! 😁
Отличное видео. Очень надеюсь, что "Фигмовцы" всё же решат задачи с прямым экспортом файлов(по слоям) в АЕ, либо сделают возможность создания анимаций в самой программе.
Есть способ проще:
выбираем объекты в Фигме, копируем как svg, вставляем в Adobe XD (свежую версию). А оттуда в Афтер все идет корректно.Читайте также: