Acercando el boceto y After Effects

Presentamos dos nuevas herramientas de flujo de trabajo de animación de UX Motion Design en Google

Presentación de Inspector Spacetime y Sketch2AE

Un buen diseño de movimiento UX no es simplemente animar activos. Ya sea que estemos inyectando deleite y diversión, definiendo nuevos patrones escalables o conceptualizando un nuevo producto loco, el movimiento cuenta una historia. Y cuando pasamos mucho tiempo recreando activos y escribiendo especificaciones, tenemos menos tiempo para concentrarnos en contar historias, la parte más importante (y más agradable) de nuestro trabajo.

Como diseñador de movimiento UX en Google, he visto aumentar la fidelidad de nuestras plataformas y aplicaciones para cerrar parcialmente la brecha entre el diseño de interacción y la animación. Google comprende la diferencia crucial entre contar una historia y hacer clic en las pantallas. Ese empoderamiento, combinado con la frustración en las brechas restantes en nuestro flujo de trabajo, inspiró a Adam Plouff¹ a darnos más tiempo para contar historias.

Las herramientas de diseño pueden ser un dolor ¯ \ _ (ツ) _ / ¯

A pesar del progreso realizado, muchas de nuestras herramientas de diseño de movimiento favoritas aún no se han puesto al día. Si bien las herramientas de animación como Bodymovin y Lottie ayudan a mejorar nuestro flujo de trabajo, probablemente todos podamos estar de acuerdo en que algunas partes de nuestro proceso todavía están un poco rotas.

Los diseñadores de UX Adam y yo trabajamos con Sketch mientras trabajamos principalmente en After Effects (AE). Aunque estas herramientas se están convirtiendo en estándares de la industria, no funcionan bien juntas, en absoluto. Nuestros días menos favoritos los pasamos recreando activos en Illustrator o After Effects, a menudo dejando solo unas pocas horas para crear algo significativo. Y una vez que finalmente creamos algo, hay otro anticipo de trabajo tedioso: descubrir cómo explicar las especificaciones de movimiento a la ingeniería (╯ ° □ °) ╯︵ ┻━┻. Cansado de perder el tiempo, Adam creó algunas herramientas doradas para SUMux² Motion Equipo de diseño que no podíamos imaginar mantenernos para nosotros, así que estamos emocionados de compartir:

Sketch2AE: la mantequilla de maní y la gelatina entre Sketch y AE
Inspector Spacetime: Traductor de Google para ingenieros

Sketch2AE: Sketch a After Effects menos la aspirina

Sketch2AE es un complemento de Sketch y un script AE que pasa las mesas de trabajo de Sketch a After Effects como capas de forma y texto editable sin la necesidad de archivos externos. Los grupos y símbolos se conservan, mientras que las formas simples se importan como formas paramétricas para facilitar la animación. Es como si alguien recreara y organizara todos los elementos de Sketch de forma nativa en After Effects en cuestión de segundos. Gracias Adam!

Para mi equipo, este proceso es incluso un paso adelante del codiciado flujo de trabajo de Adobe Illustrator => AE. Cuando obtengo un archivo de Illustrator de un diseñador, todavía tengo un montón de trabajo de preparación antes de comenzar a animar en AE, lo que implica un montón de ida y vuelta entre aplicaciones. Atrás quedaron los días de posponer la narración.

Pegar activos de Sketch en After Effects

Un flujo de trabajo que realmente fluye

Sketch2AE elimina varios pasos intermedios y crea una composición en AE que es análoga al proyecto Sketch. Sketch2AE convierte tu:

  • Dibuje símbolos en precomps de todo el proyecto en After Effects. Actualizar una vez se actualiza en todas partes.
  • Dibuje grupos en capas con un padre para escalar y reposicionar. Esto logra algo así como la función de agrupación estándar.
  • Dibuja máscaras en grupos con efectos mate definidos. No más recrear máscaras desde cero.
  • Dibuje formas en capas de formas AE nativas. Los rectángulos permanecen rectángulos y los óvalos permanecen elipses. Animar eficientemente (finalmente).

Obtenga más información o descargue Sketch2AE

Inspector Spacetime: Obtenga sus especificaciones hasta el código

Inspector Spacetime también es un complemento y un script de AE, pero entra en juego después de que ocurre la magia del diseño de movimiento. El inspector Spacetime crea especificaciones de movimiento para videos de referencia con un solo clic, para que pueda permanecer fuera de la caseta del equipo de ingenieros.

A pesar de que Bodymovin y Lottie hacen que sea más fácil exportar código utilizable desde AE, este hechicero de código no es necesario para comunicaciones específicas como retraso de tiempo o duración de transición total. Y no siempre es útil para elementos de IU escalables que contienen contenido dinámico.

En mi experiencia, comunicar y convertir las sutilezas de una buena animación en código requiere una gran cantidad de diálogo. Sin embargo, vale la pena si quiere asegurarse de que sus transiciones se reproduzcan con total fidelidad. Y ahí es cuando las cosas van bien. No puedo contar los momentos de confusión debido a la barrera del idioma entre animadores e ingenieros que describen los mismos conceptos. Ya sea que esté colgado en milisegundos frente a cuadros o que esté tratando de describir la representación visual de las curvas de movimiento a alguien que solo quiere los números, nadie se está divirtiendo en esa ecuación.

A menudo he deseado una varita mágica para evitar el tormento y el tedio de las especificaciones de escritura. Prefiero lavar platos o desempolvar mi casa. Ahora, cuando uso Inspector Spacetime, todo lo que tengo que hacer es seleccionar un grupo de pares de fotogramas clave y hacer clic en un botón. Sí. Eso es. Sin cálculo (lo siento / no lo siento, Newton).

Generando una especificación de ingeniería a partir de fotogramas clave de After Effects

Después de hacer clic en el botón, la sincronización, la relación entre las teclas y la curva cúbica de Bezier se recopilan como texto y se agregan a la composición que se muestra como video de referencia. Cualquier información que los ingenieros necesiten está unida al renderizado, combinando sus referencias visuales y de datos en una sola.

El texto puede editarse para etiquetar efectivamente qué teclas son cuáles, pero el método principal para comunicar el tiempo proviene de una expresión en la capa de texto. Esa expresión actualizará el texto a medida que el cursor de reproducción se mueva a través de los fotogramas clave activos, incluso si se mueven los marcadores de inicio y fin.

Obtenga más información o descargue Inspector Spacetime

Automatice el zumbido para que pueda pasar más tiempo divirtiéndose

Sketch2AE e Inspector Spacetime han mejorado el flujo de trabajo entre equipos y nos han permitido dirigir más energía hacia cosas creativas. Nos complace compartir algunas formas de ayudarlo a centrarse en el trabajo que ama.

Pruebe las herramientas y ayúdenos a mejorarlas

  • Sketch2AE
  • Inspector Spacetime

Interesado en trabajar con nosotros? Envíe su cartera o carrete de demostración a motiondesign@google.com

- - - -

1. Adam Plouff dejó Google para perseguir otros esfuerzos. Su antigua familia de Google mantiene un lugar cálido en sus corazones. Descubre más sobre los proyectos en solitario de Adam en battleaxe.co

2. El equipo de Búsqueda, Usuario y Maps UX (SUMux) diseña productos como The Google Assistant, Google Search App y Google Maps.