Det er en million måter å lage en presentasjon på, men Figma er et undervurdert verktøy for det. Prototypefunksjonen i Figma gir mulighet for en rekke tilpassede overgangsalternativer. Ikke bare vil overgangene dine imponere publikum, men du kan inkludere plugins for ekstra pizazz og holde publikumet engasjert, slik at du føler deg trygg på ferdighetene dine.
Vi skal vise deg hvordan du lager en morder presentasjon ved hjelp av Figma; bare følg denne veiledningen.
1. Sett opp din første presentasjonsramme
Åpen Figma og klikk Ny designfil. Klikk på Rammeverktøy (F) for å tegne rammen eller for å velge en forhåndsinnstilt ramme til høyre ved å bruke Presentasjon > Lysbilde 16:9. Du kan lage en hovedmal for å spare tid.
Gi nytt navn til rammen ved å dobbeltklikke på den blå tittelen øverst til venstre. Angi en bakgrunnsfarge; Selv om du alltid kan endre det senere ved å markere alle rammer og endre fyllfargen.
2. Legg til tittelteksten
Bruke Tekstverktøy (T) og skriv tittelen din. Bruk separate tekstbokser for separate linjer, med bare ett eller to ord per linje. Angi tekstpreferansene dine i
Tekst menyen til høyre. Figma bruker Google-fonter, så det kan være lurt å vite det de beste Google-skrifttypene.3. Legg til et bilde
Du kan bruk et arkivbilde eller ta ditt eget relevante bilde. For å legge til et bilde, tegn et rektangel ved hjelp av Rektangelverktøy (R). Bildet ditt vil sitte i denne formen.
Klikk på rektangelet og gå til Fylle og klikk på farget firkant. Klikk deretter Fast > Bilde > Velg bilde. Finn bildet ditt og klikk Åpen. Hold musepekeren over bildet for å vise 4 hvite sirkler. Klikk og dra én sirkel innover for å runde hjørnene på bildet.
Ordne lagene dine slik at bildet er på baksiden og teksten er på det øverste laget. Du kan dra lagene i lagpanelet eller ved å bruke Cmd/Ctrl + [ å sende et lag tilbake eller Cmd/Ctrl + ] å bringe et lag frem.
4. Lag den første overgangen
Den første overgangen åpner bildet og lar tittelteksten gli inn i rammen. Dupliser først den første rammen ved å velge den og trykke Cmd/Ctrl + D å duplisere den.
På venstre ramme skaler du bildet ned ved å redusere høydeattributtene i H boksen til rundt 150, og etterlater en horisontal spalte i bildet. Midtjuster den ved å velge begge bildene på tvers av rammene og klikke Option + V (Mac) eller Alt + V (Windows).
For å fullføre bildeovergangen, velg bildet til venstre. Deretter endrer du opasitet til 0 % i høyremenyen i boksen ved siden av Pass Through under Lag. Dette vil gjøre bildet usynlig før det går over og åpnes.
Klikk på den første tekstboksen og hold nede Skifte. Begynn å dra, og hold deretter nede Mellomromstasten og fortsett å dra teksten ut av rammen. Det ser ut som det forsvinner en gang ut av rammen. Uten tillegg av mellomromstasten vil ikke denne overgangen fungere, men hvis du holder mellomromstasten før du drar, vil den bare flytte rammen din.
Gjør dette igjen for andre eller påfølgende tekstbokser, men dra dem litt lenger til venstre for å legge til litt variasjon i overgangen. Mens teksten fortsatt er valgt, reduser lagets opasitet til 0 % på samme måte som du tidligere gjorde for bildet.
For å angi overgangen, gå til Prototype. Velg den venstre rammen og klikk på blå sirkel som vises i midten av høyre side av rammen. Dra den, så linjen går til den andre rammen.
I rullegardinlisten står det Umiddelbar, å velge Smart animasjon. Bytt deretter boksen med stoppeklokke til 1000 ms. Dette vil sette overgangen din til å ta ett sekund fra et museklikk. De andre innstillingene bør angis som standard. Pass på at du ikke gir nytt navn til rammetitler etter at du har angitt en overgang, ellers kobles ikke filene til.
Klikk på Spille for å teste overgangen. Gå tilbake til Design for å fortsette presentasjonsdesignet.
5. Legg til flere lysbilder
For å gå over fra lysbilde 1 til lysbilde 2, duplisere lysbildet ditt lengst til høyre (Cmd/Ctrl + D). I den nye rammen—lysbilde 2—flytt tekstboksene ut av rammen ved å bruke den forrige teknikken (Skifte + Dra deretter Mellomromstasten etter at du har begynt å dra). Flytt en tekstboks til venstre og den andre til høyre for rammen. Sett opasiteten til 0 % for begge.
For bildet, skaler det ned og flytt det litt utenfor midten, og sett deretter opasiteten til 0 %. Dette gir deg effektivt et tomt lerret for ditt andre lysbilde. Du kan legge til innholdet på toppen av de usynlige ressursene fra forrige lysbilde.
Legg til et stort bilde i midten av rammen. For å legge til noen dekorasjoner på toppen av bildet ditt, bruk en Figma-plugin for GIF-er eller last ned en klistremerke GIF fra Giphy og dra den oppå bildet. Velg hovedbildet ditt og eventuelle GIF-er, og grupper dem sammen (Cmd/Ctrl + G), sikrer dette at Smart Animate vil fungere skikkelig.
Velg gruppen og kopier den (Cmd/Ctrl + C). Lim den deretter inn på rammen til lysbilde 1 (Cmd/Ctrl + V). Skaler den ned og sett opasiteten til 0 %. Flytt deretter dette laget bakover (Cmd/Ctrl + [). Dette sikrer en jevn overgang til neste lysbilde.
Gå til Prototype. Velg lysbilde 2 og klikk på den blå sirkelen for å dra den til lysbilde 3. Figmas standard i prototypemenyen er å bruke de tidligere innstillingene, så alle bør være satt i henhold til forrige overgang. Gå tilbake til Design.
Dupliser det siste lysbildet (Cmd/Ctrl + D). Dette lysbildet vil bruke det samme bildet som det forrige, men vi skalerer det til den ene siden av rammen. Flytt bildet til venstre for rammen ved å dra det mens du holder Skifte. Hold musepekeren på høyre kant av bildet til motsatte piler vises, klikk og dra høyre kant av bildet mot venstre til du er fornøyd.
Gå til Prototype og koble de to rammene sammen. Gå deretter tilbake til Design.
Legg til en tittel og brødtekst til høyre for det skalerte bildet, og grupper dem sammen. Kopier tekstgruppen og lim den inn på forrige lysbilde. Klikk og dra tekstgruppen til høyre for rammen som før.
6. Legg til en Mockup
Lag en mockup; sjekk ut vår veiledning for å lage mockups ved hjelp av plugins i Figma. Legg til en ny ramme, og lim deretter inn modellen på den. Endre størrelsen på modellen slik at den passer til rammen.
Kopier mockupen og lim den inn i forrige ramme. Endre størrelsen på den for å passe innenfor bildedelen, flytt den deretter til baksiden av lagene og sett opasiteten til 0 %. Koble rammene inn Prototype.
7. Legg til etiketter
Dupliser mockup-rammen. Legg til en tittel og beskrivelse for å forklare deler av modellen din. Grupper teksten sammen og navngi den. Da kan du lage en frostet glass indikator for dine kulepunkter og linjer. Grupper sammen en linje med en sirkel. Still inn indikatoren din med det den beskriver, og legg til beskrivelsen din ved siden av den. Koble rammene inn Prototype.
Dupliser rammen og legg til en ny punktindikator med det den beskriver. Prototyp denne igjen. Dupliser hver ramme per punkt, slik at hvert punkt går over alene.
8. Avslutt presentasjonen
Dupliser det siste lysbildet. Skriv et siste ord eller to og sentrer det. Kopier teksten og lim den inn på forrige lysbilde.
Skaler teksten ned ved å holde K mens du skalerer den – dette holder teksten din formatert mens du skalerer den ned. Plasser teksten din et sted nær toppen av mockupen og send laget til baksiden, under bildet. Sett opasiteten til 0 %. Gå tilbake til det siste lysbildet ditt.
Flytt alle de andre objektene ut av rammen ved å bruke drametoden. Overgangen vil skyve alt ut mot sidene og toppen når teksten beveger seg ned fra toppen og utvides. Link glir inn Prototype.
9. Del din Figma-presentasjon
Du kan få tilgang til presentasjonen din hvor som helst du kan logge på Figma-kontoen din eller dele URL-en med andre, slik at de kan se hvor som helst. For å presentere den endelige presentasjonen med dens overganger, klikk på Spille knappen og presentere i fullskjermmodus.
Du kan også lagre rammene som PDF-er, selv om du vil miste de animerte overgangene ved å gjøre det.
Oppgrader presentasjonene dine med Figma
Ikke bare er denne presentasjonen minimalistisk, som ikke vil overvelde publikum, men overgangene er profesjonelle og rene. Det trengs ikke en UI/UX-ekspert for å bruke Figma på en måte som gagner presentasjonene dine, uansett jobbrolle. Presenter med selvtillit, og du vil bli oversvømmet med spørsmål om hvordan presentasjonen ble laget.