Der er en million måder at lave en præsentation på, men Figma er et undervurderet værktøj til det. Prototype-funktionen i Figma giver mulighed for et væld af tilpassede overgangsmuligheder. Ikke kun vil dine overgange imponere dit publikum, men du kan inkorporere plugins for ekstra pizazz og holde dit publikum engageret, hvilket får dig til at føle dig sikker på dine færdigheder.
Vi skal vise dig, hvordan du laver en dræberpræsentation ved hjælp af Figma; bare følg denne guide.
1. Konfigurer din første præsentationsramme
Åben Figma og klik Ny designfil. Klik på Rammeværktøj (F) for at tegne din ramme eller for at vælge en forudindstillet ramme til højre ved hjælp af Præsentation > Slide 16:9. Du kan oprette en masterskabelon for at spare tid.
Omdøb din ramme ved at dobbeltklikke på den blå titel øverst til venstre. Indstil en baggrundsfarve; selvom du altid kan ændre det senere ved at fremhæve alle rammer og ændre fyldfarven.
2. Tilføj titelteksten
Brug Tekstværktøj (T) og skriv din titel. Brug separate tekstbokse til separate linjer, med kun et eller to ord pr. linje. Indstil dine tekstpræferencer i
Tekst menuen til højre. Figma bruger Google-skrifttyper, så du vil måske gerne vide det de bedste Google-skrifttyper.3. Tilføj et billede
Du kan brug et stockfoto eller tag dit eget relevante billede. For at tilføje et billede skal du tegne et rektangel ved hjælp af Rektangel værktøj (R). Dit billede vil sidde i denne form.
Klik på rektanglet og gå til Fylde og klik på farvet firkant. Klik derefter Fast > Billede > Vælg billede. Find dit billede og klik Åben. Hold markøren over billedet for at afsløre 4 hvide cirkler. Klik og træk en cirkel indad for at runde hjørnerne af dit billede.
Arranger dine lag, så billedet er bagerst, og teksten er på det øverste lag. Du kan trække lagene i lagpanelet eller ved at bruge Cmd/Ctrl + [ at sende et lag tilbage eller Cmd/Ctrl + ] at bringe et lag frem.
4. Opret den første overgang
Den første overgang åbner billedet og tillader titelteksten at glide ind i rammen. Dupliker først den første ramme ved at vælge den og trykke Cmd/Ctrl + D at duplikere det.
På den venstre ramme skal du nedskalere billedet ved at reducere højdeattributterne i H boksen til omkring 150, hvilket efterlader en vandret spalte af billedet. Centrer den ved at vælge begge billeder på tværs af rammerne og klikke Option + V (Mac) eller Alt + V (Windows).
For at fuldføre billedovergangen skal du vælge det venstre billede. Skift derefter Gennemsigtighed til 0 % i højremenuen i boksen ved siden af Pass Through under Lag. Dette vil gøre billedet usynligt, før det skifter og åbner.
Klik på det første tekstfelt, og hold nede Flytte. Begynd at trække, og hold derefter også nede Mellemrumstasten og fortsæt med at trække teksten ud af rammen. Det ser ud som om det forsvinder én gang ud af rammen. Uden tilføjelsen af mellemrumstasten vil denne overgang ikke fungere, men hvis du holder mellemrumstasten nede, før du trækker, vil den kun flytte din ramme.
Gør dette igen for dine andre eller efterfølgende tekstbokse, men træk dem lidt længere til venstre for at tilføje lidt variation i overgangen. Mens teksten stadig er markeret, skal du reducere lagets opacitet til 0 % på samme måde, som du tidligere gjorde for billedet.
Gå til for at indstille overgangen Prototype. Vælg den venstre ramme, og klik på blå cirkel der vises i midten af højre side af rammen. Træk den, så linjen går til dit andet billede.
I rullemenuen står der Øjeblikkelig, Vælg Smart animation. Skift derefter boksen med stopur til 1000 ms. Dette vil indstille din overgang til at tage et sekund fra et klik med musen. De øvrige indstillinger skal være indstillet som standard. Sørg for, at du ikke omdøber rammetitler efter indstilling af en overgang, ellers vil filerne ikke oprette forbindelse.
Klik på Spil knappen for at teste din overgang. Gå tilbage til Design for at fortsætte dit præsentationsdesign.
5. Tilføj flere dias
For at skifte fra dias 1 til dias 2 skal du duplikere dit dias længst til højre (Cmd/Ctrl + D). I den nye ramme—slide 2—flyt tekstboksene ud af rammen ved at bruge den tidligere teknik (Flytte + Træk derefter Mellemrumstasten efter du er begyndt at trække). Flyt det ene tekstfelt til venstre og det andet til højre for rammen. Indstil opaciteten til 0 % for begge.
For billedet skal du skalere det ned og flytte det lidt væk fra midten, og derefter indstille opaciteten til 0 %. Dette giver dig effektivt et tomt lærred til dit andet dias. Du kan tilføje indholdet oven på de usynlige aktiver fra det forrige dias.
Tilføj et stort billede til midten af rammen. For at tilføje nogle dekorationer oven på dit billede, brug en Figma plugin til GIF'er eller download en mærkat GIF fra Giphy og træk det oven på billedet. Vælg dit hovedbillede og eventuelle GIF'er, og grupper dem sammen (Cmd/Ctrl + G), sikrer dette, at Smart Animate fungerer korrekt.
Vælg gruppen og kopier den (Cmd/Ctrl + C). Indsæt det derefter på rammen af dias 1 (Cmd/Ctrl + V). Skaler den ned og indstil opaciteten til 0 %. Flyt derefter dette lag bagud (Cmd/Ctrl + [). Dette sikrer en jævn overgang til næste dias.
Gå til Prototype. Vælg dias 2, og klik på den blå cirkel for at trække den til dias 3. Figmas standard i prototypemenuen er at bruge de tidligere indstillinger, så de skal alle indstilles i henhold til den tidligere overgang. Gå tilbage til Design.
Dupliker det sidste dias (Cmd/Ctrl + D). Dette dias vil bruge det samme billede som det forrige, men vi skalerer det til den ene side af rammen. Flyt billedet til venstre for rammen ved at trække det, mens du holder det nede Flytte. Hold musen på højre kant af billedet, indtil modsatte pile vises, klik og træk højre kant af billedet mod venstre, indtil du er tilfreds.
Gå til Prototype og bind de to rammer sammen. Gå derefter tilbage til Design.
Tilføj en titel og brødtekst til højre for det skalerede billede, og grupper dem sammen. Kopier tekstgruppen og indsæt den på det forrige dias. Klik og træk tekstgruppen til højre for rammen som før.
6. Tilføj en mockup
Opret en mockup; tjek vores guide til at lave mockups ved hjælp af plugins i Figma. Tilføj en ny ramme, og indsæt derefter din mockup på den. Tilpas størrelsen på mockup'en, så den passer til rammen.
Kopier mockup'en og indsæt den til den forrige ramme. Tilpas størrelsen på den, så den passer inden for billeddelen, flyt den derefter til bagsiden af lagene, og indstil opaciteten til 0 %. Forbind rammerne ind Prototype.
7. Tilføj etiketter
Dupliker mockup-rammen. Tilføj en titel og beskrivelse for at forklare dele af din mockup. Gruppér teksten og navngiv den. Så kan du opret en indikator for matteret glas for dine punkttegn og linjer. Gruppér én linje med én cirkel. Sæt din indikator på linje med det, den beskriver, og tilføj din beskrivelse ved siden af den. Forbind rammerne ind Prototype.
Dupliker rammen, og tilføj endnu en punkt-indikator med det, den beskriver. Prototype denne igen. Dupliker hvert billede pr. punktopstilling, så hvert punktopstillingspunkt skifter alene.
8. Afslut din præsentation
Dupliker det sidste dias. Skriv et sidste ord eller to og centrer det. Kopier teksten og indsæt den på det forrige dias.
Skaler teksten ned ved at holde nede K mens du skalerer den – dette holder din tekst formateret, mens du skalerer den ned. Placer din tekst et sted nær toppen af mockup'et og send laget til bagsiden under billedet. Indstil opaciteten til 0 %. Gå tilbage til dit sidste dias.
Flyt alle de andre objekter ud af rammen ved hjælp af trækmetoden. Overgangen vil glide alt ud mod siderne og toppen, når teksten bevæger sig ned fra toppen og udvides. Linket glider ind Prototype.
9. Del din Figma-præsentation
Du kan få adgang til din præsentation hvor som helst, hvor du kan logge ind på din Figma-konto eller dele URL'en med andre, så de kan se hvor som helst. For at præsentere din endelige præsentation med dens overgange, skal du klikke på Spil knappen og præsenteres i fuldskærmstilstand.
Du kan også gemme rammerne som PDF'er, selvom du mister de animerede overgange ved at gøre det.
Opgrader dine præsentationer med Figma
Ikke kun er denne præsentation minimalistisk, som ikke vil overvælde dit publikum, men overgangene er professionelle og rene. Det kræver ikke en UI/UX-ekspert at bruge Figma på en måde, der gavner dine præsentationer, uanset din jobrolle. Præsenter med tillid, og du vil blive oversvømmet med spørgsmål om, hvordan din præsentation blev lavet.
