Cum să utilizați pluginul de mișcare în Figma pentru animația dvs.?

Figma este un instrument fantastic pentru planificarea punctelor de conectare pentru Web Design. Poate cel mai bun lucru este zona locală gigantică. Oferă o progresie consecventă a activelor extraordinare, cum ar fi formate, simboluri, instrumente și module, care fac procesul de lucru al planului dvs. mai rapid și mai simplu.

Figma se bucură de o mulțime de beneficii în contrast cu Adobe XD sau Sketch. Este un dispozitiv de configurare a interfeței bazat pe programe, care este în diferite etape și funcționează în orice program și sistem de operare. Oferă cel mai bun climat unui efort constant, coordonat cu diferiți creatori și colegi.

Pe lângă funcționalitățile sale de cooperare și capacitatea sa de a realiza modele inteligente, coduri comerciale, design și formate complete, cu ajutorul modulelor, Figma își poate extinde elementele și mai mult - cum ar fi robotizarea întreprinderilor plictisitoare.

Noile active Figma sunt transferate în fiecare zi în Comunitatea Figma. Am făcut o prezentare valoroasă a celor mai bune module și instrumente pentru a accelera procesul de lucru al planului dvs., în lumina informațiilor noastre directe, pentru a vă economisi timp.

Fiecare arhitect UX/UI vine la al doilea atunci când trebuie să-și vitalizeze planul. Mai mult, cu ce dispozitive ne-ar fi recomandabil să decidem să facem câteva conexiuni în UI, să adăugăm câteva impacturi uluitoare sau să energizăm o persoană pentru un joc portabil?

Vă voi arăta un modul Figma fascinant pentru a face toate acestea. Numele lui este Motion. Vom sublinia rapid punctul său de interacțiune, vom învăța elementele fundamentale ale vivacității și chiar vom face niște lucruri interesante.

Hai să punem totul să ruleze...

Ca o chestiune de primă semnificație, ar trebui să o introducem. Deschideți Figma și accesați Comunitatea.

Tastați „Mișcare” în bara de vânătoare în cel mai înalt punct al paginii și faceți clic pe pluginuri în rezultate.

În prezent, ar trebui să apăsați pe butonul Instalare și asta este pe scurt. Ar trebui să adăugăm un alt document Figma. Din meniul drop-down, selectați Plugins/Motion.

Am început recent Moțiunea. Suntem cu toții pregătiți pentru următoarea etapă.

Contur

• Înainte de a folosi un alt instrument, ar trebui să ne dăm seama cum să funcționăm cu el. Ar trebui să schițăm rapid punctul de interacțiune.
• Pare a fi Figma UI, nu? Este grozav pentru clienții noi.
• Avem file în partea de sus: activitățile noastre, o bară de instrumente dedesubt, un panou din stânga și un curs de evenimente cu cadre cheie. Puteți adăuga o mulțime de mișcări pentru orice înregistrare.
• Ar trebui să conturam rapid câteva butoane din bara de instrumente. Le vom discuta în subtilități mai târziu.
• Actualizați automat cadrele cheie.
• Rehash fără rehash/și întrerupere.

Redare/Oprire

• Poziția oră curentă/timpul total.
• Pe panoul din stânga, putem căuta prin straturi după numele lor și straturile de canal cu cadre cheie. În cazul în care nu se alege nimic în Figma, putem vedea straturi ale discului fără substraturi.
• Este făcut pentru documente grele, care pot fi întârziate. Căutați straturile dorite sau selectați straturi în Figma, iar o listă vă va arăta toate substraturile.

• În panoul de orar, vom vedea toate cadrele cheie ale stratului ales.

Adăugați cadru cheie

Cu ajutorul acestuia, puteți tranzacționa orice strat cu GIF, Sprite, Frames sau CSS.

Presupunând că lucrați în grup, fiecare individ care se apropie de document și rulează Motion vă va vedea vivacitatea.

Este grozav pentru utilizarea încrucișată cu grupul dvs. și designerii care vă vor executa activitățile în cod. O atingere de două ori pe orice cadru cheie va deschide panoul cadru-cheie unde puteți seta un punct de cotitură, o valoare și o capacitate de facilitare.

Cea mai memorabilă vivacitate a ta

De la ipoteză la repetiție. Ar trebui să facem o carcasă și o formă pătrată în interiorul ei. Dimensiunile și tonurile nu fac nicio diferență pentru prezent. Așezați forma pătrată mai aproape de trecerea de pe colțul carcasei pentru a avea un spațiu pe opțiunea de a o muta.

În prezent, accesați Motion și atingeți butonul Adăugați cadru cheie de pe proprietatea X.

Viocul nostru va continua timp de 500 ms. Mutați mânerul roz al orarului în poziția de 500 ms (0,5 s).

Mutați forma noastră pătrată într-o parte, mergeți la Mișcare și atingeți butonul Adăugați cadru cheie. Nu mai e nimic. Faceți clic pe Joacă și vedeți cea mai memorabilă activitate a dvs. Cu aceste metode, puteți accelera fiecare dintre proprietățile pe care le vedeți.

Continuați și modificați proprietățile Y, Lățime, Înălțime, Mătura colțului, Rotație, Opacitate și Umplere.

Rudimente

Ar trebui să continuăm și să sărim mai mult în subtilități.

Punctul de revoluție

Cel mai important, ar trebui să înțelegem ce este un punct de revoluție sau un punct de ancorare. Ar trebui să presupunem că avem o margine și o formă pătrată în ea. Forma pătrată: lățime = 100, nivel = 100, x = 100, y = 100, revoluție = 0°.

Accesați Motion și adăugați un cadru cheie pentru proprietatea X. Atingeți de două ori un nou cadru cheie. În prezent, vedem panoul cadru cheie pentru proprietăți specifice. Aici puteți configura un punct pivot sau un punct de ancorare, o estimare a proprietății și o capacitate de facilitare.

În panoul de proprietăți Figma, am caracterizat X ca echivalent cu 100; totusi, aici vedem 150. De ce?

Explicația este punctul de revoluție, care este setat să se concentreze pe axa X și Y. Pe aceste linii, poziția este: X + (Width/2) = 100 + (100/2) = 150. Pentru a gestiona calități similare ca Figma, ar trebui să alegeți colțul din stânga sus al punctului de pivot. Totuși, nu te grăbi!

Ar trebui să ne mișcăm forma pătrată cu 100 într-o parte de-a lungul X și să pivotăm cu - 45°.

Faceți clic pe Play și vedeți că se mișcă și pivotează. Cu toate acestea, imaginați-vă un scenariu în care schimbăm revoluția pentru a evidenția colțul din stânga sus.

Nu contează ce cadru cheie vei schimba punctul de pivotare. Este tipic pentru toate cadrele cheie ale stratului.

Ne vom rostogoli și ne vom întoarce conform colțului din stânga sus al stratului.

Figma vă arată valorile X și Y, așa cum sunt indicate de colțul din stânga sus al unui punct de revoluție al stratului; totuși, stima de rotație - conform punctului de mijloc. Ar trebui să-ți amintești asta atunci când vivifici ceva. Cu toate acestea, de regulă, nu va trebui să-l transformați din problema centrală în Motion.

Capacități de facilitare

Facilitarea capacităților controlează creșterea și decelerația vitezei. Există patru capacități de facilitare:

• Direct
• Ușurință-în-viteza crește la început
• Ieși înapoi – decelerație în cele din urmă
• Back in-out — viteza crește la început și decelerația în cele din urmă.

Există o altă alegere aici - Pași. Se va schimba imediat stima, practic fără progres. Ce zici să încercăm. Avem forma pătrată care se deplasează din partea trecută în jumătatea dreaptă a marginii. Selectați cadrul cheie de final și deschideți panoul de cadru cheie. Schimbați capacitățile de facilitare și vedeți rezultatul.

Duplicați/Lipiți

Reordonarea cadrelor cheie este, de asemenea, simplă. Selectați cadrele cheie, apăsați Ctrl/Cmd+C sau faceți clic pe Copiere din meniul derulant pentru a alege cadrele cheie. După aceea, le puteți lipi pe orice strat. Uneori, este benefic să animați câteva straturi în același mod.

Remediați/Refaceți

Puteți remedia și reîncerca orice progresie în activități. Ctrl/Cmd+Z pentru anulare și Ctrl/Cmd+Y pentru reluare vă vor ajuta.

Actualizați automat cadrele cheie

Dacă acest buton este dinamic, valorile cadrelor cheie vor fi, în consecință, reîmprospătate în poziția de timp curentă după activarea Mișcării. Aveți o întârziere de 1 s după ce fereastra modulului este angajată pentru a o dezactiva sau apăsați butonul Play și defocalizați fereastra.

Astfel, puteți adăuga cadre cheie, puteți merge la poziția sa de timp, puteți implementa îmbunătățiri specifice pentru straturile dvs. în Figma și centrați fereastra modulului. Mișcarea va face totul.

Vezi fps

Puteți seta numărul de carcase pe care le veți vedea în timp real în Figma: cum ar fi 24 sau 60. Puteți să-l transformați de la 60 la 24 în cazuri presupunând că intensitatea este întârziată. Încercați să nu subliniați că acest lucru nu va afecta comerțul.

Rehash

Există trei capacități aici:

• Nicio reluare
• Rehash
• Rehash și întrerupere

Ultima este fascinantă. Se va opri 1 secunde la sfârșitul mișcării și numai după aceea se va repeta. Din când în când, când setați Repeat, nu puteți vedea rezultatul mișcării dvs. Cel mai bine ar fi să aveți o amânare înainte de a începe o altă tură de activitate.

Puteți adăuga un cadru cheie pentru perioada de care aveți nevoie. În orice caz, Motion vă oferă astfel de instrumente — Repetați și întârziați.

Încheierea

Acest blog a adunat tone de cunoștințe utile astăzi despre vivacitatea în Figma. În prezent, aveți oportunitatea și voința de a vă exersa și de a vă face plină de viață.

Vrei să afli mai multe? Vizitați www.webdew.com sau contactați-ne pentru a beneficia de serviciile noastre!

Editor: Tamanna