Det finns en miljon sätt att göra en presentation, men Figma är ett underskattat verktyg för det. Prototypfunktionen i Figma möjliggör en mängd anpassningsbara övergångsalternativ. Dina övergångar kommer inte bara att imponera på din publik, utan du kan inkludera plugins för extra piss och hålla din publik engagerad, vilket gör att du känner dig säker på dina färdigheter.
Vi kommer att visa dig hur du gör en mördande presentation med Figma; följ bara den här guiden.
1. Konfigurera din första presentationsram
Öppna Figma och klicka Ny designfil. Klicka på Ramverktyg (F) för att rita din ram eller för att välja en förinställd ram till höger med Presentation > Bild 16:9. Du kan skapa en huvudmall för att spara tid.
Byt namn på din ram genom att dubbelklicka på den blå titeln uppe till vänster. Ställ in en bakgrundsfärg; även om du alltid kan ändra det senare genom att markera alla ramar och ändra fyllningsfärgen.
2. Lägg till titeltexten
Använd Textverktyg (T) och skriv din titel. Använd separata textrutor för separata rader, med endast ett eller två ord per rad. Ställ in dina textpreferenser i
Text menyn till höger. Figma använder Google-teckensnitt, så du kanske vill veta de bästa Google-typsnittskombinationerna.3. Lägg till en bild
Du kan använd en bild eller ta ditt eget relevanta foto. För att lägga till en bild, rita en rektangel med hjälp av Rektangelverktyg (R). Din bild kommer att sitta i denna form.
Klicka på rektangeln och gå till Fylla och klicka på färgad kvadrat. Klicka sedan Fast > Bild > Välj bild. Hitta din bild och klicka Öppna. Håll muspekaren över bilden för att visa 4 vita cirklar. Klicka och dra en cirkel inåt för att runda bildens hörn.
Ordna dina lager så att bilden ligger längst bak och texten ligger på det översta lagret. Du kan dra lagren i lagerpanelen eller genom att använda Cmd/Ctrl + [ för att skicka tillbaka ett lager eller Cmd/Ctrl + ] för att föra fram ett lager.
4. Skapa den första övergången
Den första övergången öppnar bilden och låter titeltexten glida in i ramen. Duplicera först den första bildrutan genom att markera den och trycka Cmd/Ctrl + D att duplicera det.
På den vänstra ramen, skala ner bilden genom att minska höjdattributen i H rutan till cirka 150, vilket lämnar en horisontell skåra i bilden. Centrera den genom att markera båda bilderna över ramarna och klicka Option + V (Mac) eller Alt + V (Windows).
För att slutföra bildövergången, välj den vänstra bilden. Ändra sedan opacitet till 0 % i menyn till höger i rutan bredvid Pass Through under Layer. Detta kommer att göra bilden osynlig innan den övergår och öppnas.
Klicka på den första textrutan och håll nere Flytta. Börja dra och håll sedan också intryckt Mellanslagstangenten och fortsätt att dra texten bort från ramen. Det ser ut som att det försvinner en gång ut ur ramen. Utan tillägget av mellanslagstangenten kommer denna övergång inte att fungera, men om du håller ned mellanslagstangenten innan du drar, kommer den bara att flytta din ram.
Gör detta igen för dina andra eller efterföljande textrutor, men dra dem lite längre åt vänster för att lägga till lite variation i övergången. Med texten fortfarande markerad minskar du lagerets opacitet till 0 % på samma sätt som du tidigare gjorde för bilden.
För att ställa in övergången, gå till Prototyp. Välj den vänstra ramen och klicka på blå cirkel som visas i mitten av den högra sidan av ramen. Dra den så att linjen går till din andra bildruta.
I rullgardinsmenyn står det Omedelbar, Välj Smart animering. Byt sedan rutan med stoppur till 1000 ms. Detta kommer att ställa in din övergång att ta en sekund från ett musklick. De andra inställningarna bör ställas in som standard. Se till att du inte byter namn på ramtitlar efter att ha ställt in en övergång, annars kommer filerna inte att ansluta.
Klicka på Spela för att testa din övergång. Gå tillbaka till Design för att fortsätta din presentationsdesign.
5. Lägg till fler bilder
För att gå över från bild 1 till bild 2, duplicera bilden längst till höger (Cmd/Ctrl + D). I den nya ramen – bild 2 – flyttar du textrutorna från ramen med den tidigare tekniken (Flytta + Drag sedan Mellanslagstangenten efter att du har börjat dra). Flytta en textruta till vänster och den andra till höger om ramen. Ställ in opaciteten till 0 % för båda.
För bilden, skala ner den och flytta den något utanför mitten, ställ sedan in opaciteten till 0 %. Detta ger dig faktiskt en tom duk för din andra bild. Du kan lägga till innehållet ovanpå de osynliga tillgångarna från föregående bild.
Lägg till en stor bild i mitten av ramen. För att lägga till några dekorationer ovanpå din bild, använd en Figma plugin för GIF eller ladda ner en klistermärke GIF från Giphy och dra den ovanpå bilden. Välj din huvudbild och eventuella GIF-bilder och gruppera dem (Cmd/Ctrl + G), detta säkerställer att Smart Animate fungerar korrekt.
Välj gruppen och kopiera den (Cmd/Ctrl + C). Klistra sedan in den på ramen på bild 1 (Cmd/Ctrl + V). Skala ner den och ställ in opaciteten till 0 %. Flytta sedan detta lager bakåt (Cmd/Ctrl + [). Detta säkerställer en smidig övergång till nästa bild.
Gå till Prototyp. Välj bild 2 och klicka på den blå cirkeln för att dra den till bild 3. Figmas standard i prototypmenyn är att använda de tidigare inställningarna, så de bör alla vara inställda enligt den tidigare övergången. Gå tillbaka till Design.
Duplicera den sista bilden (Cmd/Ctrl + D). Den här bilden kommer att använda samma bild som den föregående, men vi skalar den till ena sidan av ramen. Flytta bilden till vänster om ramen genom att dra den medan du håller ned Flytta. Håll muspekaren över bildens högra kant tills motsatta pilar visas, klicka och dra bildens högra kant mot vänster tills du är nöjd.
Gå till Prototyp och länka ihop de två ramarna. Gå sedan tillbaka till Design.
Lägg till en titel och brödtext till höger om den skalade bilden och gruppera dem. Kopiera textgruppen och klistra in den på föregående bild. Klicka och dra textgruppen till höger om ramen som tidigare.
6. Lägg till en mockup
Skapa en mockup; kolla in vår guide för att skapa mockups med plugins i Figma. Lägg till en ny ram och klistra sedan in din mockup på den. Ändra storlek på modellen så att den passar ramen.
Kopiera mockupen och klistra in den i föregående bildruta. Ändra storleken så att den passar inom bilddelen, flytta den sedan till baksidan av lagren och ställ in opaciteten till 0 %. Koppla in ramarna Prototyp.
7. Lägg till etiketter
Duplicera mockup-ramen. Lägg till en titel och beskrivning för att förklara delar av din mockup. Gruppera texten och namnge den. Då kan du skapa en frostat glasindikator för dina kulpunkter och linjer. Gruppera en rad med en cirkel. Ställ in din indikator med vad den beskriver och lägg till din beskrivning bredvid den. Koppla in ramarna Prototyp.
Duplicera ramen och lägg till ytterligare en punktindikator med vad den beskriver. Prototyp detta igen. Duplicera varje bildruta per punkt, så varje punkt övergår ensam.
8. Avsluta din presentation
Duplicera den sista bilden. Skriv ett eller två sista ord och centrera det. Kopiera texten och klistra in den på föregående bild.
Skala ner texten genom att hålla ned K medan du skalar den – detta behåller din text formaterad samtidigt som den minskar storleken. Placera din text någonstans nära toppen av mockupen och skicka lagret till baksidan, under bilden. Ställ in opaciteten till 0 %. Gå tillbaka till din sista bild.
Flytta alla andra objekt ut ur ramen med hjälp av drametoden. Övergången kommer att glida ut allt mot sidorna och toppen när texten flyttas ner från toppen och expanderar. Länken glider in Prototyp.
9. Dela din Figma-presentation
Du kan komma åt din presentation var som helst där du kan logga in på ditt Figma-konto eller dela webbadressen med andra, så att de kan titta på var som helst. För att presentera din slutliga presentation med dess övergångar, klicka på Spela knappen och visas i helskärmsläge.
Du kan också spara ramarna som PDF-filer, även om du förlorar de animerade övergångarna genom att göra det.
Uppgradera dina presentationer med Figma
Denna presentation är inte bara minimalistisk, vilket inte kommer att överväldiga din publik, utan övergångarna är professionella och rena. Det krävs ingen UI/UX-expert för att använda Figma på ett sätt som gynnar dina presentationer, oavsett din jobbroll. Presentera med tillförsikt och du kommer att översvämmas av frågor om hur din presentation gjordes.
