Rapprocher Sketch et After Effects

Présentation de deux nouveaux outils de flux de travail d'animation de UX Motion Design sur Google

Présentation de Inspector Spacetime et Sketch2AE

Une bonne conception de mouvement UX ne consiste pas simplement à animer des ressources. Qu'il s'agisse d'injecter du plaisir et de s'amuser, de définir de nouveaux modèles évolutifs ou de conceptualiser un nouveau produit fou, Motion raconte une histoire. Et lorsque nous passons du temps à recréer des actifs et à rédiger des spécifications, nous avons moins de temps pour nous concentrer sur la narration, la partie la plus importante (et la plus agréable) de notre travail.

En tant que concepteur de mouvement UX chez Google, j’ai vu la fidélité de nos plateformes et de nos applications augmenter pour combler en partie le fossé entre la conception des interactions et l’animation. Google comprend la différence cruciale entre raconter une histoire et cliquer sur des écrans. Cette responsabilisation, combinée à la frustration liée aux lacunes restantes de notre flux de travail, a incité Adam Plouff¹ à nous donner plus de temps pour raconter des histoires.

Les outils de conception peuvent être pénibles ¯ \ _ (ツ) _ / ¯

Malgré les progrès réalisés, beaucoup de nos outils de création de mouvement préférés n’ont pas encore pris de la hauteur. Bien que des outils d'animation tels que Bodymovin et Lottie contribuent à améliorer notre flux de travail, nous pouvons probablement tous convenir que certaines parties de notre processus sont encore un peu, eh bien, cassées.

Adam et moi, les concepteurs d'UX, utilisons Sketch pendant que nous travaillons principalement dans After Effects (AE). Même si ces outils sont en train de devenir des standards de l’industrie, ils ne fonctionnent pas bien ensemble. Nos journées préférées les moins fréquentes sont consacrées à la reconstitution d'actifs dans Illustrator ou After Effects, ne laissant souvent que quelques heures pour créer quelque chose de significatif. Et une fois que nous avons finalement créé quelque chose, il y a une autre fin de livre fastidieuse - comprendre comment expliquer les spécifications de mouvement à l'ingénierie (° □ °) ╯︵ ┻━┻.) Fatigué de perdre du temps, Adam a créé des outils en or pour le SUMux² Motion Une équipe de designers que nous ne pouvions pas imaginer garder tout seuls, nous sommes donc ravis de partager:

Sketch2AE: Le beurre de cacahuète et la gelée entre Sketch et AE
Inspector Spacetime: Google Translate pour les ingénieurs

Sketch2AE: Sketch to After Effects moins l'aspirine

Sketch2AE est un plugin Sketch et un script AE qui permet de passer des planches d’art de Sketch à After Effects sous forme de calques de forme et de texte modifiable, sans recourir à des fichiers externes. Les groupes et les symboles sont préservés tandis que les formes simples sont importées en tant que formes paramétriques pour une animation facile. C’est comme si une personne recréait et organisait tous les actifs Sketch pour vous de manière native dans After Effects en quelques secondes. Merci, Adam!

Pour mon équipe, ce processus est même une étape supplémentaire du flux de travail convoité Adobe Illustrator => AE. Lorsque je reçois un fichier Illustrator d'un concepteur, il me reste encore une tonne de travaux préparatoires à faire avant de commencer à animer dans AE, impliquant beaucoup de va-et-vient entre applications. L'époque des reportages est révolue.

Collage des éléments d'esquisse dans After Effects

Un flux de travail qui coule réellement

Sketch2AE supprime un grand nombre d’étapes intermédiaires et crée une composition dans AE analogue au projet Sketch. Sketch2AE convertit votre:

  • Esquissez des symboles dans des précompositions de projet dans After Effects. Mettre à jour une fois met à jour partout.
  • Esquisse des groupes en couches avec un parent pour la mise à l'échelle et le repositionnement. Cela donne quelque chose comme la fonction de regroupement standard.
  • Esquissez les masques en groupes avec des effets de cache définis. Plus besoin de recréer des masques à partir de zéro.
  • Esquissez des formes en couches de formes AE natives. Les rectangles restent des rectangles et les ovales restent des ellipses. Animez efficacement (enfin).

En savoir plus ou télécharger Sketch2AE

Inspector Spacetime: Obtenez vos spécifications jusqu'au code

Inspector Spacetime est aussi un plugin et un script AE, mais il entre en jeu après la magie de la conception de mouvement. Inspector Spacetime crée des spécifications de mouvement pour les vidéos de référence en un clic afin que vous puissiez rester en dehors du chenil de l'équipe d'ingénieurs.

Bien que Bodymovin et Lottie facilitent l’exportation de code utilisable en dehors de AE, cette sorcellerie de code n’est pas nécessaire pour les communications de spécification telles que le délai ou la durée totale de la transition. Et pas toujours utile pour les éléments d’interface utilisateur évolutive contenant du contenu dynamique.

D'après mon expérience, communiquer et convertir les subtilités d'une bonne animation en code nécessite un bateau de dialogue. Cela vaut la peine, cependant, si vous voulez vous assurer que vos transitions sont reproduites avec une fidélité totale. Et c’est quand les choses vont bien. Je ne peux pas compter les moments de confusion dus à la barrière de la langue entre animateurs et ingénieurs décrivant les mêmes concepts. Qu'il s'agisse de prendre des millisecondes par rapport aux images ou d'essayer de décrire la représentation visuelle des courbes de mouvement à une personne qui ne veut que des chiffres, personne ne s'amuse dans cette équation.

J’ai souvent souhaité une baguette magique pour passer le tourment et l’ennui de rédiger des spécifications. Je préférerais faire la vaisselle ou épousseter ma maison. Maintenant, lorsque j'utilise Inspector Spacetime, tout ce que j'ai à faire est de sélectionner un groupe de paires d'images clés et de cliquer sur un bouton. Oui. C'est tout. Pas de calcul (désolé / pas désolé, Newton).

Génération d'une spécification d'ingénierie à partir d'images clés After Effects

Une fois que vous avez cliqué sur le bouton, le minutage, la relation entre les clés et la courbe de Bézier cubique sont collectés sous forme de texte et ajoutés à la composition que vous restituez sous forme de vidéo de référence. Quelles que soient les données dont les ingénieurs ont besoin, elles sont associées au rendu, combinant vos références visuelles et de données en une seule.

Le texte peut être édité pour identifier efficacement les clés, mais la méthode principale pour communiquer le minutage provient d'une expression sur le calque de texte. Cette expression mettra à jour le texte lorsque la tête de lecture se déplacera dans les images clés actives, même si les marqueurs de début et de fin sont déplacés.

En savoir plus ou télécharger Inspector Spacetime

Automatisez le tambour pour vous permettre de passer plus de temps à vous amuser

Sketch2AE et Inspector Spacetime ont amélioré le flux de travail entre les équipes et nous ont permis de consacrer plus d’énergie à la création. Nous sommes heureux de partager quelques moyens pour vous aider à vous concentrer sur le travail que vous aimez.

Essayez les outils et aidez-nous à les rendre encore meilleurs

  • Sketch2AE
  • Temps de l'inspecteur

Intéressé de travailler avec nous? Envoyez votre portfolio ou votre démo à [email protected]

- - - -

1. Adam Plouff a quitté Google pour poursuivre d'autres activités. Son ancienne famille Google garde une place chaleureuse dans leur cœur. En savoir plus sur les projets solo d’Adam sur battleaxe.co

2. L'équipe Search, User et Maps UX (SUMux) conçoit des produits tels que Google Assistant, Google Search App et Google Maps.