Avvicinamento di Sketch e After Effects

Presentazione di due nuovi strumenti per il flusso di lavoro di animazione di UX Motion Design presso Google

Presentazione di Inspector Spacetime e Sketch2AE

Il buon design del movimento UX non consiste semplicemente nell'animazione delle risorse. Sia che stiamo iniettando gioia e giocosità, definendo nuovi modelli scalabili o concettualizzando un nuovo prodotto pazzo, il movimento racconta una storia. E quando passiamo pezzi di tempo a ricreare risorse e scrivere specifiche, abbiamo meno tempo per concentrarci sullo storytelling, la parte più importante (e più divertente) del nostro lavoro.

Come UX motion designer di Google, ho visto aumentare la fedeltà delle nostre piattaforme e applicazioni per colmare parzialmente il divario tra design dell'interazione e animazione. Google comprende la differenza cruciale tra raccontare una storia e fare clic sulle schermate. Quel potenziamento, unito alla frustrazione per le rimanenti lacune nel nostro flusso di lavoro, ha ispirato Adam Plouff¹ a darci più tempo per la narrazione.

Gli strumenti di progettazione possono essere un dolore ¯ \ _ (ツ) _ / ¯

Nonostante i progressi compiuti, molti dei nostri strumenti preferiti di motion design non sono ancora riusciti. Mentre strumenti di animazione come Bodymovin e Lottie aiutano a migliorare il nostro flusso di lavoro, probabilmente possiamo essere tutti d'accordo sul fatto che alcune parti del nostro processo sono ancora un po ', beh, rotte.

I designer UX Adam e io lavoriamo con l'uso di Sketch mentre lavoriamo principalmente in After Effects (AE). Anche se questi strumenti stanno diventando standard di settore, non giocano bene insieme, per niente. I nostri giorni meno preferiti sono trascorsi a ricreare risorse in Illustrator o After Effects, lasciando spesso solo poche ore per creare qualcosa di significativo. E una volta che finalmente creiamo qualcosa, c'è un altro fermalibri di lavoro noioso: capire come spiegare le specifiche di movimento all'ingegneria (╯ ° □ °) ╯︵ ┻━┻. Stanco di perdere tempo, Adam ha schierato alcuni strumenti d'oro per il SUMux² Motion Team di progettazione che non potevamo immaginare di tenere tutto per noi, quindi siamo entusiasti di condividere:

Sketch2AE: il burro di arachidi e la gelatina tra Sketch e AE
Inspector Spacetime: Google Translate per ingegneri

Sketch2AE: Sketch to After Effects meno l'aspirina

Sketch2AE è un plug-in Sketch e uno script AE che passa le tavole da disegno da Sketch ad After Effects come livelli forma e testo modificabile senza la necessità di file esterni. Gruppi e simboli vengono conservati mentre le forme semplici vengono importate come forme parametriche per una facile animazione. È come se qualcuno avesse ricreato e organizzato tutte le risorse di Sketch per te in modo nativo in After Effects in pochi secondi. Grazie Adam!

Per il mio team, questo processo è persino un passo avanti dall'ambito flusso di lavoro di Adobe Illustrator => AE. Quando ricevo un file Illustrator da un designer, ho ancora un sacco di lavori di preparazione prima di iniziare ad animare in AE, coinvolgendo molto avanti e indietro tra le app. Sono finiti i giorni di rimandare la narrazione.

Incollare risorse da Sketch in After Effects

Un flusso di lavoro che effettivamente scorre

Sketch2AE rimuove una serie di passaggi intermedi e crea una composizione in AE analoga al progetto Sketch. Sketch2AE converte il tuo:

  • Disegna i simboli in precompi a livello di progetto in After Effects. L'aggiornamento una volta si aggiorna ovunque.
  • Disegna i gruppi in livelli con un genitore per ridimensionarli e riposizionarli. Questo raggiunge qualcosa come la funzione di raggruppamento standard.
  • Disegna le maschere in gruppi con effetti opachi impostati. Non dovrai più ricreare le maschere da zero.
  • Disegna forme in livelli di forma AE nativi. I rettangoli rimangono rettangoli e gli ovali rimangono ellissi. Animare in modo efficiente (finalmente).

Scopri di più o scarica Sketch2AE

Inspector Spacetime: aggiorna le tue specifiche al codice

L'ispettore Spacetime è anche un plugin e uno script AE, ma entra in gioco dopo che si è verificata la magia del motion design. L'ispettore Spacetime crea le specifiche di movimento per i video di riferimento con un clic, in modo da poter rimanere fuori dalla cuccia del team di ingegneri.

Anche se Bodymovin e Lottie semplificano l'esportazione di codice utilizzabile da AE, questa stregoneria non è necessaria per comunicazioni specifiche come il ritardo o la durata della transizione totale. E non sempre utile per gli elementi dell'interfaccia utente scalabili contenenti contenuto dinamico.

Nella mia esperienza, comunicare e convertire le sottigliezze della buona animazione in codice richiede un carico di dialoghi. Ne vale la pena, tuttavia, se vuoi assicurarti che le tue transizioni vengano riprodotte in piena fedeltà. E questo è quando le cose stanno andando bene. Non posso contare i momenti di confusione a causa della barriera linguistica tra animatori e ingegneri che descrivono gli stessi concetti. Che si tratti di riattaccare in millisecondi contro frame o di cercare di descrivere la rappresentazione visiva delle curve di movimento a qualcuno che vuole solo i numeri, nessuno si diverte in questa equazione.

Ho spesso desiderato una bacchetta magica per saltare il tormento e la noia di scrivere le specifiche. Preferirei lavare i piatti o spolverare la mia casa. Ora, quando uso Inspector Spacetime, tutto quello che devo fare è selezionare un gruppo di coppie di fotogrammi chiave e fare clic su un pulsante. Sì. Questo è tutto. Nessun calcolo (scusa / non scusa, Newton).

Generazione di una specifica tecnica dai fotogrammi chiave di After Effects

Dopo aver fatto clic sul pulsante, i tempi, la relazione tra i tasti e la curva cubica di Bezier vengono raccolti come testo e aggiunti al comp che rendi come video di riferimento. Qualunque dato di cui gli ingegneri abbiano bisogno, si sposa con il rendering, fondendo i riferimenti visivi e di dati in uno solo.

Il testo può essere modificato per etichettare efficacemente quali chiavi sono quali, ma il metodo principale per comunicare i tempi deriva da un'espressione sul livello testo. Tale espressione aggiornerà il testo quando l'indicatore di riproduzione si sposta sui fotogrammi chiave attivi, anche se vengono spostati i marcatori di inizio e fine.

Scopri di più o scarica Inspector Spacetime

Automatizza il ronzio in modo da poter trascorrere più tempo divertendosi

Sketch2AE e Inspector Spacetime hanno migliorato il flusso di lavoro tra i team e ci hanno permesso di indirizzare più energia verso elementi creativi. Siamo felici di condividere alcuni modi per aiutarti a concentrarti sul lavoro che ami.

Prova gli strumenti e aiutaci a renderli ancora migliori

  • Sketch2AE
  • Ispettore Spacetime

Ti interessa lavorare con noi? Invia il tuo portafoglio o bobina demo a motiondesign@google.com

- - - -

1. Adam Plouff ha lasciato Google per perseguire altri sforzi. La sua ex famiglia di Google mantiene un posto caldo nei loro cuori. Scopri di più sui progetti solisti di Adam su battleaxe.co

2. Il team di ricerca, utente e UX di Maps (SUMux) progetta prodotti come l'Assistente Google, l'app Ricerca Google e Google Maps.