Aducând Sketch și After Effects mai aproape

Prezentarea a două noi instrumente de flux de lucru pentru animație de la UX Motion Design la Google

Introducerea inspectorului spațiu și Sketch2AE

Proiectarea bună a mișcării UX nu înseamnă doar animarea activelor. Fie că injectăm încântare și jucăuș, definim noi tipare scalabile sau conceptualizăm un produs nou nebun, mișcarea spune o poveste. Și când petrecem bucăți de timp recreând active și scriem specificații, avem mai puțin timp să ne concentrăm asupra povestirii, cea mai importantă (și cea mai plăcută) parte a meseriei noastre.

În calitate de proiectant de mișcare UX la Google, am urmărit creșterea fidelității platformelor noastre și a aplicațiilor noastre, pentru a trece parțial decalajul dintre designul interacțiunii și animație. Google înțelege diferența crucială dintre a spune o poveste și a face clic pe ecrane. Această împuternicire, combinată cu frustrarea în lipsurile rămase din fluxul nostru de lucru, l-a inspirat pe Adam Plouff¹ să ne ofere mai mult timp pentru povestiri.

Instrumentele de proiectare pot fi o durere ¯ \ _ (ツ) _ / ¯

În ciuda progreselor înregistrate, multe dintre instrumentele noastre preferate de proiectare a mișcărilor nu au fost încă surprinse. În timp ce instrumentele de animație precum Bodymovin și Lottie ajută la îmbunătățirea fluxului nostru de lucru, probabil cu toții putem fi de acord cu faptul că anumite părți ale procesului nostru sunt încă un pic, bine, rupte.

Designerii UX Adam și cu mine lucrează cu Sketch în timp ce lucrăm mai ales în After Effects (AE). Chiar dacă aceste instrumente devin standarde industriale, acestea nu joacă bine împreună - deloc. Zilele noastre cele mai puțin preferate sunt petrecute recreând active în Illustrator sau After Effects, lăsând adesea doar câteva ore pentru a crea ceva semnificativ. Și odată ce în sfârșit creăm ceva, există o altă carte de lucrări obositoare - care să explice modul de explicare a tehnicilor de mișcare pentru inginerie (╯ ° □ °) ╯︵ ┻━┻. Obosit de pierderea timpului, Adam a incubat câteva instrumente de aur pentru mișcarea SUMux²) Echipa de proiectare pe care nu ne-am putea imagina păstrându-ne pe noi înșine, așa că suntem încântați să împărtășim:

Sketch2AE: untul de arahide și jeleu între Sketch și AE
Inspector Spacetime: Google Translate pentru ingineri

Sketch2AE: Sketch la After Effects minus aspirina

Sketch2AE este un plugin Sketch și un script AE care transmite tablouri de artă de la Sketch la After Effects ca straturi de formă și text modificabil, fără a fi nevoie de fișiere externe. Grupurile și simbolurile sunt păstrate în timp ce formele simple sunt importate ca forme parametrice pentru o animare ușoară. Este ca și cum cineva a recreat și a organizat toate elementele Sketch pentru tine în mod nativ în After Effects în câteva secunde. Mulțumesc, Adam!

Pentru echipa mea, acest proces este chiar un pas din râvnitul flux de lucru Adobe Illustrator => AE. Când primesc un fișier Illustrator de la un designer, mai am o grămadă de lucrări de pregătire înainte de a începe să animez în AE, care implică o mulțime de întoarceri între aplicații. S-au terminat zilele de a renunța la povești.

Inserați active din Sketch în After Effects

Un flux de lucru care curge de fapt

Sketch2AE elimină o grămadă de pași intermediari și creează o compoziție în AE care este analogă proiectului Sketch. Sketch2AE vă transformă:

  • Schițează simboluri în precompete la nivel de proiect din After Effects. Actualizarea actualizărilor o dată peste tot.
  • Schițează Grupuri în straturi cu un părinte pentru scalare și repoziționare. Astfel se obține ceva de genul funcției standard de grupare.
  • Sketch Masks în grupuri cu efecte mate setate. Nu mai sunt măști de recreere de la zero.
  • Forme de schiță în straturi de formă ale AE native. Dreptunghiurile rămân dreptunghiuri și ovalele rămân elipsele. Animați eficient (în sfârșit).

Aflați mai multe sau descărcați Sketch2AE

Inspector Spațiu: Aduceți specificațiile la cod

Inspector Spacetime este, de asemenea, un plugin și script AE, dar intră în joc după ce magia designului mișcării se întâmplă. Inspectorul Spațiu creează specificații de mișcare pentru videoclipurile de referință într-un singur clic, astfel încât să puteți rămâne în afara casei echipei de inginerie.

Chiar dacă Bodymovin și Lottie facilitează exportarea codului utilizabil din AE, acest vrăjitoriu nu este necesar pentru comunicări specifice precum întârzierea timpului sau durata totală a tranziției. Și nu întotdeauna util pentru elementele UI scalabile care conțin conținut dinamic.

În experiența mea, comunicarea și transformarea subtilităților unei bune animații în cod necesită o încărcătură de dialog. Cu toate acestea, merită, dacă doriți să vă asigurați că tranzițiile dvs. sunt reproduse cu fidelitate deplină. Și atunci lucrurile merg bine. Nu pot conta momentele de confuzie din cauza barierei de limbaj dintre animatori și ingineri care descriu aceleași concepte. Fie că este agățat de milisecunde vs. cadre sau încearcă să descrie reprezentarea vizuală a curbelor de mișcare pentru cineva care dorește doar numerele, nimeni nu se distrează cu această ecuație.

De multe ori mi-am dorit o baghetă magică pentru a omite chinul și tediul specificațiilor de scriere. Aș prefera să îmi spăl vasele sau să îmi fac praf în casă. Acum, când folosesc Inspector Spacetime, tot ce trebuie să fac este să selectez un grup de perechi de cadre cheie și să fac clic pe un buton. Da. Asta e. Fără calcul (îmi pare rău / nu-mi pare rău, Newton).

Generarea unui specimen de inginerie din cadrele cheie After Effects

După ce faceți clic pe buton, sincronizarea, relația dintre taste și curba Bezier cubică sunt colectate ca text și adăugate la calculul pe care îl faceți ca videoclip de referință. Orice date de care au nevoie inginerii este căsătorită cu redarea, amestecând referințele dvs. vizuale și de date într-una.

Textul poate fi editat pentru a eticheta în mod eficient care sunt cheile, dar metoda principală de a comunica cronologia vine dintr-o expresie pe stratul de text. Acea expresie va actualiza textul pe măsură ce headhead-ul se va muta pe cadrele cheie active, chiar dacă markerele de început și de final sunt mutate.

Aflați mai multe sau descărcați inspectorul spațiu

Automatizați toba de hum pentru a putea petrece mai mult timp distrându-vă

Sketch2AE și Inspector Spațiu au îmbunătățit fluxul de lucru între echipe și ne-au permis să direcționăm mai multă energie către lucruri creative. Suntem bucuroși să împărtășim câteva modalități de a vă ajuta să vă concentrați pe munca pe care o iubiți.

Încercați instrumentele și ajutați-ne să le îmbunătățim și mai bine

  • Sketch2AE
  • Inspector Spațiu timp

Vrei să lucrezi cu noi? Trimiteți portofoliul sau tamburul demo la motiondesign@google.com

- - - -

1. Adam Plouff a părăsit Google să urmărească alte eforturi. Fosta sa familie Google păstrează un loc cald în inimile lor. Aflați mai multe despre proiectele solo ale lui Adam pe battleaxe.co

2. Echipa Search, User și Maps UX (SUMux) proiectează produse precum Asistentul Google, Aplicația de căutare Google și Google Maps.