Come utilizzare il plug-in di movimento in Figma per la tua animazione?

Figma è uno strumento fantastico per i punti di connessione della pianificazione di Web Design. Forse la cosa migliore è la gigantesca area locale. Fornisce una progressione coerente di risorse straordinarie come formati, simboli, strumenti e moduli che rendono il processo di lavoro del piano più rapido e semplice.

Figma gode di molti vantaggi rispetto ad Adobe XD o Sketch. È un dispositivo di configurazione dell'interfaccia basato su programma che è cross-stage e funziona in qualsiasi programma e sistema operativo. Dà il clima migliore a uno sforzo costante e coordinato con diversi creatori e colleghi.

A parte le sue funzionalità cooperative e la sua capacità di creare modelli intelligenti, codici commerciali, design e formati completi, con l'assistenza di moduli, Figma può espandere ulteriormente i suoi elementi, come la robotizzazione di attività noiose.

Nuovi asset Figma vengono trasferiti ogni giorno alla Community Figma. Abbiamo fatto una preziosa carrellata dei migliori moduli e strumenti per accelerare il processo di lavoro del tuo piano alla luce della nostra visione diretta per farti risparmiare tempo.

Ogni architetto UX/UI arriva al secondo quando ha bisogno di vitalizzare il proprio piano. Inoltre, quali dispositivi sarebbe consigliabile per noi decidere di stabilire alcune connessioni nell'interfaccia utente, aggiungere alcuni effetti abbaglianti o dare energia a qualcuno per un gioco portatile?

Ti mostrerò un affascinante modulo Figma per fare tutto questo. Il suo nome è Movimento. Delineeremo rapidamente il suo punto di interazione, impareremo i fondamenti della vivacità e faremo anche cose interessanti.

Facciamo girare tutto...

Come una questione di primo significato, dovremmo introdurlo. Apri Figma e vai alla Community.

Digita "Movimento" nella barra di ricerca nel punto più alto della pagina e inserisci i plug-in nei risultati.

Al momento dovresti toccare il pulsante Installa, e questo è tutto in poche parole. Dovremmo aggiungere un altro documento Figma. Dal menu a tendina, seleziona Plugin/Movimento.

Abbiamo recentemente avviato Motion. Siamo tutti pronti per la fase successiva.

Schema

• Prima di utilizzare un altro strumento, dovremmo capire come utilizzarlo. Dovremmo delineare rapidamente il punto di interazione.
• Sembra essere l'interfaccia utente di Figma, giusto? È fantastico per i nuovi clienti.
• Abbiamo le schede in alto: le nostre attività, una barra degli strumenti in basso, una bacheca a sinistra e un corso di eventi con fotogrammi chiave. Puoi aggiungere molti movimenti per qualsiasi record.
• Dovremmo delineare rapidamente alcuni pulsanti della barra degli strumenti. Ne discuteremo in sottigliezze più avanti.
• Aggiorna automaticamente i fotogrammi chiave.
• Rehash no rehash/e interruzione.

Riproduci/Interrompi

• Posizione dell'ora corrente/tempo totale.
• Sulla scheda di sinistra, possiamo guardare attraverso i livelli in base al loro nome e i livelli di canale con i fotogrammi chiave. Nella remota possibilità che in Figma non venga scelto nulla, possiamo vedere strati del record senza sottolivelli.
• È fatto per documenti pesanti, che possono essere in ritardo. Cerca i livelli che desideri o seleziona i livelli in Figma e un elenco ti mostrerà tutti i sottolivelli.

• Nella scheda dell'orario, vedremo tutti i fotogrammi chiave del livello scelto.

Aggiungi fotogramma chiave

Fai trading con la sua assistenza, puoi scambiare qualsiasi livello con GIF, Sprite, Frame o CSS.

Partendo dal presupposto che lavori in gruppo, ogni individuo che si avvicina al documento e gestisce Motion vedrà la tua vivacità.

È ottimo per l'utilizzo incrociato con il tuo gruppo e i designer che eseguiranno le tue attività nel codice. Un doppio tocco su qualsiasi fotogramma chiave aprirà la scheda fotogramma chiave in cui è possibile impostare un punto di svolta, un valore e una capacità di facilitazione.

La tua vivacità più memorabile

Dall'ipotesi alla prova. Dovremmo fare un involucro e una forma quadrata al suo interno. Dimensioni e tonalità non fanno alcuna differenza per il momento. Posizionare la forma quadrata più vicino al passaggio sull'angolo dell'involucro per avere uno spazio sull'opzione per spostarlo.

Ora vai su Movimento e tocca il pulsante Aggiungi fotogramma chiave sulla proprietà X.

La nostra vivacità andrà avanti per 500 ms. Spostare la maniglia rosa dell'orario nella posizione 500 ms (0,5 s).

Sposta la nostra forma quadrata su un lato, vai su Movimento e tocca il pulsante Aggiungi fotogramma chiave. Non c'è più niente da fare. Fai clic su Gioca e guarda la tua attività più memorabile. Con questi metodi, puoi velocizzare tutte le proprietà che vedi.

Vai avanti e modifica le proprietà Y, Larghezza, Altezza, Angolo, Rotazione, Opacità e Riempimento.

Rudimenti

Dovremmo continuare e saltare di più nelle sottigliezze.

Punto di rivoluzione

Ancora più importante, dovremmo capire cos'è un punto di rivoluzione o un punto di ancoraggio. Dovremmo presumere di avere un bordo e una forma quadrata al suo interno. La forma quadrata: larghezza = 100, livello = 100, x = 100, y = 100, rivoluzione = 0°.

Vai su Motion e aggiungi un fotogramma chiave per la proprietà X. Tocca due volte su un nuovo fotogramma chiave. Attualmente vediamo la scheda fotogramma chiave per proprietà specifiche. Qui puoi impostare un punto pivot o un punto di ancoraggio, una stima della proprietà e una capacità di facilitazione.

Nella scheda delle proprietà di Figma, abbiamo caratterizzato X come equivalente a 100; tuttavia, qui ne vediamo 150. Perché?

La spiegazione è il punto di rivoluzione, che è impostato per mettere a fuoco l'asse X e Y. Lungo queste linee, la posizione è: X + (Larghezza/2) = 100 + (100/2) = 150. Per gestire qualità simili a Figma, dovresti scegliere l'angolo superiore sinistro del punto di rotazione. Eppure, non affannarti!

Dovremmo spostare la nostra forma quadrata di 100 su un lato lungo la X e ruotare di -45°.

Fai clic su Riproduci e vedrai che si muove e ruota. Tuttavia, immagina uno scenario in cui cambiamo la rivoluzione per evidenziare l'angolo in alto a sinistra.

Non fa alcuna differenza su quale fotogramma chiave cambierai il punto di rotazione. È tipico per tutti i fotogrammi chiave del livello.

Rotoleremo e gireremo come nell'angolo in alto a sinistra del livello.

Figma ti mostra i valori X e Y come indicato dall'angolo in alto a sinistra di un punto di rivoluzione del livello; tuttavia, Stima della rotazione, come nel punto centrale. Dovresti ricordarlo quando vivi qualcosa. Tuttavia, di norma, non dovrai trasformarlo dalla questione centrale in Motion.

Capacità di facilitazione

Le capacità facilitanti controllano l'aumento e la decelerazione della velocità. Ci sono quattro capacità di facilitazione:

• Diretto
• Facilità-in-aumento di velocità all'inizio
• Indietro: alla fine la decelerazione
• Back in-out: la velocità aumenta all'inizio e alla fine la decelerazione.

C'è un'altra scelta qui: Steps. Cambierà immediatamente le stime praticamente senza progressi. Che ne dici se ci proviamo. Abbiamo la forma quadrata che si sposta dal lato passato alla metà destra del bordo. Seleziona il fotogramma chiave finale e apri la scheda fotogramma chiave. Cambiare le capacità di facilitazione e vedere il risultato.

Duplica/Incolla

Anche riordinare i fotogrammi chiave è semplice. Seleziona i fotogrammi chiave, premi Ctrl/Cmd+C o fai clic su Copia dal menu a discesa per scegliere i fotogrammi chiave. Successivamente, puoi incollarli su qualsiasi livello. A volte, è utile animare alcuni livelli allo stesso modo.

Correggi/Ripeti

Puoi correggere e riprovare qualsiasi progressione nelle attività. Ctrl/Cmd+Z per Annulla e Ctrl/Cmd+Y per Ripristina ti aiuteranno.

Aggiorna automaticamente i fotogrammi chiave

Se questo pulsante è dinamico, i valori dei fotogrammi chiave verranno di conseguenza aggiornati sulla posizione temporale corrente dopo l'attivazione di Motion. Hai un ritardo di 1 secondo dopo che la finestra del modulo è stata assunta per disattivarla o premere il pulsante Riproduci e sfocare la finestra.

Pertanto, puoi aggiungere fotogrammi chiave, andare alla sua posizione temporale, implementare miglioramenti specifici per i tuoi livelli in Figma e centrare la finestra del modulo. Il movimento farà tutto.

Vedi fps

Puoi impostare il numero di involucri che vedrai in tempo reale in Figma: come 24 o 60. Puoi trasformarlo da 60 a 24 nei casi supponendo che la vivacità sia lenta. Cerca di non sottolineare che ciò non influirà sul commercio.

Rimaneggiamento

Ci sono tre capacità qui:

• Nessun rimaneggiamento
• Rimaneggiamento
• Rehash e interruzione

L'ultimo è affascinante. Si fermerà 1 secondo alla fine del movimento e solo dopo che lo ricorrerà. Di tanto in tanto, quando imposti Ripeti, non puoi vedere l'esito della tua mossa. Sarebbe meglio se avessi un rinvio prima dell'inizio di un altro giro di attività.

Puoi aggiungere un fotogramma chiave per il periodo di cui hai bisogno. In ogni caso, Motion ti offre tali strumenti: Ripeti e ritarda.

Avvolgendo

Questo blog ha raccolto tonnellate di utili conoscenze oggi sulla vivacità di Figma. Attualmente hai l'opportunità e la forza di volontà di esercitarti e rendere la tua bella vivacità.

Voglio sapere di più? Visita www.webdew.com o contattaci per usufruire dei nostri servizi!

Editore: Tamanna