At bringe skitse og After Effects tættere sammen

Introduktion af to nye arbejdsgange til animation fra UX Motion Design hos Google

Introduktion til Inspector Spacetime og Sketch2AE

Godt UX-bevægelsesdesign er ikke blot animerende aktiver. Uanset om vi sprøjter glæde og legesygdom, definerer skalerbare nye mønstre eller konceptualiserer et skørt nyt produkt, fortæller motion en historie. Og når vi bruger tid på tid på at genskabe aktiver og skrive specifikationer, har vi mindre tid til at fokusere på historiefortælling, den vigtigste (og mest underholdende) del af vores job.

Som UX-bevægelsesdesigner hos Google har jeg set, at vores platforme og applikations troværdighed øges for delvist at bro mellem interaktionsdesign og animation. Google forstår den afgørende forskel mellem at fortælle en historie og klikke gennem skærme. Denne styrkelse kombineret med frustration i de resterende huller i vores arbejdsgang inspirerede Adam Plouff¹ til at give os mere tid til historiefortælling.

Designværktøjer kan være en smerte ¯ \ _ (ツ) _ / ¯

På trods af fremskridt, er mange af vores foretrukne bevægelsesdesignværktøjer endnu ikke fanget. Mens animationsværktøjer som Bodymovin og Lottie hjælper med at forbedre vores arbejdsgang, kan vi sandsynligvis alle være enige om, at dele af vores proces stadig er lidt, godt, ødelagte.

UX-designerne Adam og jeg arbejder med brug af Sketch, mens vi hovedsageligt arbejder i After Effects (AE). Selvom disse værktøjer er ved at blive industristandarder, spiller de ikke godt sammen - overhovedet. Vores mindst foretrukne dage bruges til at genskabe aktiver i Illustrator eller After Effects, og ofte efterlader vi kun et par timer til at skabe noget meningsfuldt. Og når vi endelig har skabt noget, er der endnu et bogmærke af kedeligt arbejde - at finde ud af, hvordan man forklarer bevægelsesspecifikationer til teknik (╯ ° □ °) ╯︵ ┻━┻. Træt af at spilde tid klækkede Adam nogle gyldne værktøjer til SUMux²-bevægelsen Designteam, som vi ikke kunne forestille os at holde alt for os selv, så vi er glade for at dele:

Sketch2AE: Jordnøddesmør og gelé mellem Sketch og AE
Inspektør Rumtid: Google Translate til ingeniører

Sketch2AE: Skitse til After Effects minus aspirinet

Sketch2AE er et Sketch-plugin og et AE-script, der videregiver tegnebræt fra Sketch til After Effects som formlag og redigerbar tekst uden behov for eksterne filer. Grupper og symboler bevares, mens enkle figurer importeres som parametriske figurer til let animation. Det er som om nogen genskabte og organiserede alle Sketch-aktiver for dig indfødt i After Effects inden for få sekunder. Tak Adam!

For mit team er denne proces endda en step-up fra den eftertragtede Adobe Illustrator => AE-arbejdsgang. Når jeg får en Illustrator-fil fra en designer, har jeg stadig masser af præparater, inden jeg begynder at animere i AE, hvor der involveres en masse frem og tilbage mellem apps. Borte er de dage, hvor historien fortælles.

Indsættelse af aktiver fra Sketch i After Effects

En arbejdsgang, der faktisk flyder

Sketch2AE fjerner en masse mellemtrin og bygger en komposition i AE, der er analog med Sketch-projektet. Sketch2AE konverterer din:

  • Skitse symboler til projektomfattende forudkomponenter i After Effects. Opdatering en gang opdateringer overalt.
  • Tegn grupper i lag med en overordnet til skalering og omplacering. Dette opnår noget som standardgruppefunktionen.
  • Skit masker i grupper med indstillede matte effekter. Ikke flere rekreative masker fra bunden.
  • Skitse figurer i oprindelige lag i AE-form. Rektangler forbliver rektangler og ovaler forbliver ellipser. Animer effektivt (endelig).

Lær mere eller download Sketch2AE

Inspektør Rumtid: Få dine specifikationer op til kode

Inspector Spacetime er også et plugin og AE-script, men det kommer i spil efter, at bevægelsesdesignmagien sker. Inspector Spacetime opretter bevægelsesspecifikationer til referencevideoer med et enkelt klik, så du kan holde dig ude af ingeniørholdets hundehus.

Selvom Bodymovin og Lottie gør det lettere at eksportere brugbar kode ud af AE, er denne kodekørsel ikke nødvendig for spec-kommunikation som tidsforsinkelse eller total overgangsvarighed. Og ikke altid nyttigt til skalerbare UI-elementer, der indeholder dynamisk indhold.

Efter min oplevelse kræver kommunikation og konvertering af finesser med god animation til kode en bådfylde dialog. Det er dog værd, hvis du vil forsikre, at dine overgange gengives med fuld tro. Og det er, når det går godt. Jeg kan ikke tælle forvirringens øjeblikke på grund af sprogbarrieren mellem animatorer og ingeniører, der beskriver de samme koncepter. Uanset om det hænger på millisekunder vs. rammer eller forsøger at beskrive den visuelle repræsentation af bevægelseskurver til nogen, der bare vil have numrene, er det ingen der har det sjovt i den ligning.

Jeg har ofte ønsket, at en tryllestav springer over pine og tedium ved at skrive specifikationer. Jeg vil hellere vaske opvask eller støve mit hus. Nu, når jeg bruger Inspector Spacetime, er alt, hvad jeg skal gøre, at vælge en gruppe af nøglekammerpar og klikke på en knap. Ja. Det er det. Ingen beregninger (undskyld / ikke ked, Newton).

Genererer en engineering spec fra After Effects nøglerammer

Når du har klikket på knappen, samles timingen, forholdet mellem nøgler og den kubiske Bezier-kurve som tekst og tilføjes til den komp, som du gengiver som en referencevideo. Uanset hvilke data ingeniørerne har brug for er gift med renderet, blander du dine visuelle og datareferencer til en.

Tekst kan redigeres for effektivt at mærke, hvilke taster der er, men den vigtigste metode til at kommunikere timing kommer fra et udtryk på tekstlaget. Dette udtryk vil opdatere teksten, når playhead bevæger sig på tværs af de aktive keyframes, selvom start- og slutmarkeringerne flyttes.

Lær mere eller download Inspector Spacetime

Automatiser brumtrommen, så du kan bruge mere tid på at have det sjovt

Sketch2AE og Inspector Spacetime har forbedret arbejdsgangen mellem teams og gjort det muligt for os at rette mere energi mod kreative ting. Vi er glade for at dele nogle måder at hjælpe dig med at fokusere på det arbejde, du elsker.

Prøv værktøjerne, og hjælp os med at gøre dem endnu bedre

  • Sketch2AE
  • Inspektør rumtid

Er du interesseret i at arbejde sammen med os? Send din portefølje eller demospole til motiondesign@google.com

- - - -

1. Adam Plouff forlod Google for at forfølge andre bestræbelser. Hans tidligere Google-familie holder et varmt sted i deres hjerter. Find ud af mere om Adams solo-projekter på battleaxe.co

2. UUM-teamet Search, User og Maps (SUMux) designer produkter som Google Assistant, Google Search App og Google Maps.