UXPUB 🇺🇦 Дизайн-спільнота

Редакція
Редакція

Опубліковано

Представляем AEUX, инструмент для интеграции After Effects в рабочий процесс Sketch и Figma

AEUX позволяет тратить меньше времени на рутинные задачи и сосредоточиться на главном

Motion Design помогает пользователям ориентироваться, предоставляя контекст и различные подсказки по навигации. Но не всегда было легко интегрировать что-то новое в установленные рабочие процессы разработки UX.

Совсем недавно, в 2016 году, все еще ощущались темные века UX motion design. Было много новых шаблонов, но это было еще до появления Lottie, которая дала нам возможность визуализировать анимацию на устройствах. Подготовка визуального дизайна для After Effects подразумевает изменение изображения внутри Illustrator, принимая во внимание сложные процессы импорта и преобразования.

Чтобы ограничить, снизить до минимума эти бесполезные шаги, в середине 2016 года я начал создавать внутренний инструмент Sketch2AE в Google. Это был первый инструмент такого рода, предназначенный для передачи данных между приложениями. Но это было больше, чем просто импортер файлов. Этот инструмент был способом компенсировать время людям. В 2017 году он был выпущен публично и помог как проектировщикам, работающим в UX, так и визуальным дизайнерам, начинающим в After Effects.

Процесс переноса винтажного слоя в Sketch2AE

С тех пор сфера UX motion design стала более развитой. Многие команды разработчиков теперь думают, что UX также занимается размышлениями о том, как информация воспринимается по прошествии времени. Совместные итерации Motion дизайнеров с визуальными дизайнерами на протяжении долгого времени, может существенно повлиять на поиск успешных решений. Со времени первого выпуска Sketch2AE инструменты усовершенствовались, а также возросли требования к интеграции для дизайнеров, работающих в моушн. Я очень рад поделиться с вами AEUX, более надежной системой для работы с UX motion design в After Effects.

Руководство по Material Motion в After Effects

Добро пожаловать в AEUX

Одной из целей новой системы является поддержка большего количества хост-приложений и повышение гибкости при работе между командами. Обмен данными в экосистеме Adobe теперь хорошо поддерживается в XD и Illustrator, но с AEUX вы можете импортировать слои из Sketch и Figma и поддерживать новые функции Sketch. Плюс …

  • Cкорость сборки сложных артбордов увеличена на 93%.
  • Теперь поддерживается редактирование символов для текста и вложенных символов.
  • Мастера символов расположены более эффективно, что положит конец многим неудобствам.
  • Экспорт изображений был улучшен за счет рисования собственных Ae градиентов и устранения лишних изображений.
  • Точность текстового слоя была значительно улучшена за счет позиционирования, отслеживания переднего, верхнего/нижнего регистра.
  • Группы могут автоматически создаваться как Ae precomps.
  • Кроме того, группы слоев могут быть предварительно скомпонованы и раскомпонованы одним нажатием, даже если вы не используете импортер AEUX.
  • Появились дополнительные новые функции, такие как вложенные логические значения, маскирование слоев и групп, размытие фигур, параметры для работы с контурами или параметрическими фигурами.

Узнайте больше - загрузите AEUX

https://www.youtube.com/watch?v=DSCtuSrcfOo

AEUX + Figma

Хоть Sketch и очень популярен, многие визуальные дизайнеры также начали использовать Figma. AEUX был разработан для обеспечения бесперебойной работы при переключении между командами.

Основной особенностью Figma является совместная работа, поэтому экспорт данных слоев осуществляется через веб-приложение, которое подключается к API Figma. На данный момент плагины Figma не могут работать внутри среды проектирования, что означает, что экспорт слоев выполняется как более традиционный экспорт/импорт. В онлайн приложениях для дизайна безопасность является самым важным фактором.

После аутентификации приложения экспорта AEUX вам будет предложено ввести URL-адрес файла Figma. Приложение будет собирать все данные для каждого из кадров (монтажных областей) в файле. Каждый кадр может быть загружен отдельно, а любые необходимые изображения будут обработаны. Перетащите новый файл AEUX.json на панель AEUX в After Effects, и слои будут построены.

Примечание: Приложение AEUX не отслеживает пользовательские данные и не просматривает и не сохраняет ваши проекты. Это слепой робот, который выполняет преобразование ваших проектов в формат AEUX JSON прямо в браузере на вашем компьютере. Доступ к данным файла управляется владельцем файла из меню «Поделиться».

Полученные уроки

Создание инструментов, при котором вы полагаетесь на исходник работы другого дизайнера может быть достаточно сложным. Иногда ваши лучшие намерения не очень полезны, или люди находят новые пути и способы решения различных задач, о которых вы даже и не подозревали. Я много узнал о сборке Sketch2AE, а затем еще больше узнал о сборке Overlord (бесстыдный плагин для коммерческого инструмента).

Самый полезный урок, который я извлек из этих проектов, - это ограничение переключения внимания. Если кто-то пытается создать дизайн, пусть он разрабатывает дизайн, а не фокусирует все внимание на чтении руководства.

Удалить/копировать/вставить

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

Создайте интерактив

Для меня одна из самых интересных частей в процессе проектирования - это тестировать и находить, что работает, а что нет. Это довольно противоречит импорту файлов, где вы должны перезапустить все заново, если вы подготовили один из слоев неправильно. Основная идея Overlord - позволить вам передавать то, что вам нужно, когда вам это нужно. Я хотел, чтобы эта концепция была центральной в AEUX, что требовало отойти от погружения в меню и перейти к плавающей панели плагинов для Sketch, чтобы соответствовать ожидаемому опыту работы с инструментами в Ae.

Покажите мне, что происходит

В предыдущей версии уведомления отображались только после успешного экспорта и их можно было просто напросто не увидеть в нижней части окна Sketch. Так что вам приходилось ждать и гадать, сработало ли это.

Новая плавающая панель Sketch также предоставляет специальное место для уведомлений. Идея показывать прогресс распространяется и на Ae. Мы можем следить за обновлениями панели и индикатором прогресса на слабых компьютерах, а также видеть уведомления об ошибках в элементах, которые Ae не может отрисовать в данный момент.

Двигаемся дальше

UX motion design растет, и мы все еще изучаем все, и как лучше всего выполнить и протестировать различные проекты. Каждый раз когда мы что-то делаем, мы пытаемся поделиться тем, что узнаем в процессе. Я надеюсь, что AEUX поможет вам работать быстрее и получать больше удовольствия от процесса.

Начинайте работу с AEUX


Перевод статьи Adam Plouff

Топ коментарі (0)