Există un milion de moduri de a face o prezentare, dar Figma este un instrument subestimat pentru aceasta. Caracteristica prototip din Figma permite o multitudine de opțiuni de tranziție personalizabile. Nu numai că tranzițiile dvs. vă vor uimi publicul, dar puteți încorpora plugin-uri pentru un plus de pizazz și vă vor menține publicul implicat, făcându-vă să vă simțiți încrezători în abilitățile dvs.
Vă vom arăta cum să faceți o prezentare ucigașă folosind Figma; doar urmați acest ghid.
1. Configurați primul cadru de prezentare
Deschis Figma și faceți clic Fișier nou de design. Apasă pe Instrument pentru cadru (F) pentru a desena cadrul sau pentru a alege un cadru prestabilit în dreapta folosind Prezentare > Slide 16:9. Poti creați un șablon principal pentru a salva timp.
Redenumiți-vă cadrul făcând dublu clic pe titlul albastru din stânga sus. Setați o culoare de fundal; cu toate acestea, îl puteți schimba oricând ulterior evidențiind toate cadrele și schimbând culoarea de umplere.
2. Adăugați textul titlului
Folosește Instrumentul de text (T) și scrieți-vă titlul. Utilizați casete de text separate pentru rânduri separate, cu doar unul sau două cuvinte pe rând. Setați preferințele de text în Text meniul din dreapta. Figma folosește fonturi Google, așa că poate doriți să știți cele mai bune perechi de fonturi Google.
3. Adăugați o imagine
Poti utilizați o fotografie de stoc sau fă-ți propria fotografie relevantă. Pentru a adăuga o imagine, desenați un dreptunghi folosind Instrument dreptunghi (R). Imaginea ta va sta în această formă.
Faceți clic pe dreptunghi și accesați Completati și faceți clic pe pătrat colorat. Apoi apasa Solid > Imagine > Alegeți imaginea. Găsiți imaginea dvs. și faceți clic Deschis. Plasați cursorul peste imagine pentru a dezvălui 4 cercuri albe. Faceți clic și trageți un cerc spre interior pentru a rotunji colțurile imaginii.
Aranjați-vă straturile astfel încât imaginea să fie în spate și textul pe stratul superior. Puteți trage straturile în panoul de straturi sau utilizând Cmd/Ctrl + [ pentru a trimite un strat înapoi sau Cmd/Ctrl + ] pentru a aduce un strat înainte.
4. Creați prima tranziție
Prima tranziție va deschide imaginea și va permite textului titlului să alunece în cadru. Mai întâi, duplicați primul cadru selectându-l și apăsând Cmd/Ctrl + D pentru a-l duplica.
În cadrul din stânga, scalați imaginea prin reducerea atributelor de înălțime din H caseta la aproximativ 150, lăsând o fantă orizontală a imaginii. Aliniați-l în centru selectând ambele imagini peste cadre și făcând clic Oopțiunea + V (Mac) sau Alt + V (Windows).
Pentru a finaliza tranziția imaginii, selectați imaginea din stânga. Apoi schimbați opacitate la 0% în meniul din dreapta din caseta de lângă Pass Through sub Layer. Acest lucru va face imaginea invizibilă înainte de a trece și de a se deschide.
Faceți clic pe prima casetă de text și țineți apăsat Schimb. Începeți să trageți, apoi țineți apăsat Bara de spațiu și continuați să trageți textul din cadru. Se pare că dispare odată ieșit din cadru. Fără adăugarea barei de spațiu, această tranziție nu va funcționa, dar dacă țineți apăsată bara de spațiu înainte de a trage, aceasta vă va muta doar cadrul.
Faceți acest lucru din nou pentru a doua casetă de text sau pentru următoarele, dar trageți-le puțin mai spre stânga pentru a adăuga o varietate în tranziție. Cu textul încă selectat, reduceți opacitatea stratului la 0%, așa cum ați făcut anterior pentru imagine.
Pentru a seta tranziția, accesați Prototip. Selectați cadrul din stânga și faceți clic pe cerc albastru care apare în centrul părții din dreapta a cadrului. Trageți-l, astfel încât linia să ajungă la al doilea cadru.
În meniul derulant care spune instant, Selectați Animație inteligentă. Apoi schimbați cutia cu cronometru la 1000 ms. Aceasta va seta tranziția să dureze o secundă de la clicul mouse-ului. Celelalte setări ar trebui să fie setate implicit. Asigurați-vă că nu redenumiți titlurile cadrelor după setarea unei tranziții, altfel fișierele nu se vor conecta.
Apasă pe Joaca butonul pentru a testa tranziția. Intoarce-te la Proiecta pentru a-ți continua designul prezentării.
5. Adăugați mai multe diapozitive
Pentru a trece de la diapozitivul 1 la diapozitivul 2, duplicați diapozitivul din dreapta (Cmd/Ctrl + D). În noul cadru — diapozitivul 2 — mutați casetele de text din cadru folosind tehnica anterioară (Schimb + Trage apoi Bara de spațiu după ce ai început să tragi). Mutați o casetă de text la stânga și cealaltă la dreapta cadrului. Setați opacitatea la 0% pentru ambele.
Pentru imagine, reduceți-o și mutați-o ușor decentrat, apoi setați opacitatea la 0%. Acest lucru, efectiv, vă oferă o pânză goală pentru al doilea diapozitiv. Puteți adăuga conținutul deasupra activelor invizibile din diapozitivul anterior.
Adăugați o imagine mare în centrul cadrului. Pentru a adăuga câteva decorațiuni deasupra imaginii dvs., utilizați a Plugin Figma pentru GIF-uri sau descărcați un GIF autocolant de pe Giphy și trageți-l deasupra imaginii. Selectați imaginea principală și orice GIF-uri și grupați-le împreună (Cmd/Ctrl + G), acest lucru asigură că Smart Animate va funcționa corect.
Selectați grupul și copiați-l (Cmd/Ctrl + C). Apoi lipiți-l pe cadrul diapozitivului 1 (Cmd/Ctrl + V). Reduceți-l și setați opacitatea la 0%. Apoi mutați acest strat în spate (Cmd/Ctrl + [). Acest lucru asigură o tranziție lină în următorul diapozitiv.
Mergi la Prototip. Selectați diapozitivul 2 și faceți clic pe cercul albastru pentru al trage în diapozitivul 3. Setarea implicită a Figma în meniul prototip este să folosească setările anterioare, așa că ar trebui să fie toate setate în funcție de tranziția anterioară. Intoarce-te la Proiecta.
Duplicați ultimul diapozitiv (Cmd/Ctrl + D). Acest diapozitiv va folosi aceeași imagine ca cea precedentă, dar o vom scala pe o parte a cadrului. Mutați imaginea în stânga cadrului trăgând-o în timp ce țineți apăsat Schimb. Plasați cursorul pe marginea dreaptă a imaginii până când apar săgeți opuse, faceți clic și trageți marginea dreaptă a imaginii spre stânga până când sunteți satisfăcut.
Mergi la Prototip și legați cele două cadre împreună. Apoi întoarce-te la Proiecta.
Adăugați un titlu și un text în partea dreaptă a imaginii scalate și grupați-le. Copiați grupul de text și inserați-l pe diapozitivul anterior. Faceți clic și trageți grupul de text în dreapta cadrului ca înainte.
6. Adăugați o machetă
Creați o machetă; verificați-ne ghid pentru crearea de machete folosind plugin-uri în Figma. Adăugați un cadru nou, apoi lipiți macheta pe el. Redimensionați macheta pentru a se potrivi cu cadrul.
Copiați macheta și inserați-o în cadrul anterior. Redimensionați-o pentru a se potrivi în porțiunea imaginii, apoi mutați-o în spatele straturilor și setați opacitatea la 0%. Conectați cadrele Prototip.
7. Adăugați etichete
Duplicați cadrul machetei. Adăugați un titlu și o descriere pentru a explica părți ale machetei dvs. Grupează textul și denumește-l. Atunci poti creați un indicator de sticlă mată pentru punctele și liniile tale. Grupați o linie cu un cerc. Aliniați indicatorul cu ceea ce descrie și adăugați descrierea lângă el. Conectați cadrele Prototip.
Duplicați cadrul și adăugați un alt indicator marcator cu ceea ce descrie. Prototipează asta din nou. Duplicați fiecare cadru pe punct de marcator, astfel încât fiecare punct de marcator să treacă singur.
8. Încheiați prezentarea
Duplicați ultimul diapozitiv. Scrieți un ultim cuvânt sau două și centrați-l. Copiați textul și inserați-l pe diapozitivul anterior.
Reduceți textul ținând apăsat K în timp ce îl scalați - acest lucru vă păstrează textul formatat în timp ce îl reduceți. Plasați textul undeva lângă partea de sus a machetei și trimiteți stratul în spate, sub imagine. Setați opacitatea la 0%. Reveniți la diapozitivul final.
Mutați toate celelalte obiecte din cadru folosind metoda de glisare. Tranziția va aluneca totul spre părțile laterale și sus, pe măsură ce textul se mișcă în jos de sus și se extinde. Link-ul intră Prototip.
9. Distribuiți-vă prezentarea Figma
Vă puteți accesa prezentarea oriunde vă puteți conecta la contul Figma sau puteți partaja adresa URL cu alții, astfel încât aceștia să poată viziona de oriunde. Pentru a prezenta prezentarea finală cu tranzițiile sale, faceți clic pe Joaca butonul și prezentați în modul ecran complet.
De asemenea, puteți salva cadrele ca PDF-uri, deși veți pierde tranzițiile animate făcând asta.
Creșteți-vă prezentările cu Figma
Nu numai că această prezentare este minimalistă, ceea ce nu vă va copleși publicul, dar tranzițiile sunt profesionale și curate. Nu este nevoie de un expert UI/UX pentru a folosi Figma într-un mod care să avantajeze prezentările tale, indiferent de rolul tău. Prezintă cu încredere și vei fi inundat de întrebări despre cum a fost realizată prezentarea ta.
