Hur man skapar mastermallar för presentationer i Figma

Om du skapar en stiliserad presentation, men inte vill använda överanvända mallar från PowerPoint, Google Slides eller Canva, du kan skapa dina egna mastermallar för din framtid presentationsdesign.

Detta är ett bra alternativ för dem som vill ha presentationsdesigner med teman eller som behöver följa en stilguide för varumärket. Fortsätt läsa för att ta reda på hur du använder Figma för att skapa mastermallar för dina presentationer.

1. Hur man ställer in ett Figma-dokument för presentationer

Registrera dig för ett gratis konto på Figma.com, eller om du redan har ett konto, logga in. Du kan använda Figma direkt i din webbläsare, eller så kan du ladda ner skrivbordsappen.

Öppna a Ny designfil, Klicka sedan Ofrälse högst upp för att byta namn på din fil, till exempel "Presentation Master Template". Klicka på till vänster Sida 1, sedan plustecken för att lägga till en ny sida. Byt namn på den nya sidan till "Mall". Detta gör att du kan hålla dina huvudbilder åtskilda från dina designbilder senare.

För att skapa en ram – Figmas namn för en rityta eller duk – använd Ramverktyg (F), klicka sedan var som helst för att öppna en ram. I inställningarna till höger ändrar du W och H attribut till en lämplig presentationsstorlek; vi använder 1920 x 1080, vilket är standardskärmstorleken. Det här kommer att bli din första mastermall.

Dubbelklicka på den blå titeln överst i ramen för att byta namn på den. Tänk på sidlayouten du planerar och namnge den därefter - till exempel "Översta titel två kolumn" eller "Översta titel höger bild" skulle vara till hjälp.

2. Designa presentationslayouterna

För att hjälpa till med layoutdesign kan du använda layoutrutnätet. För att aktivera det, välj din ram och klicka sedan på i det högra verktygsfältet plustecken bredvid Layout Grid. Detta öppnar ett rött genomskinligt rutnät ovanpå din design.

För att skapa kolumner – som är lättare att designa med – klicka på kvadrat-prickade rutnätsikon under Layout Grid och klicka sedan Rutnät i rullgardinsmenyn och välj Kolumner. Ställ in antalet till 12, vilket är typiskt för skärmdesign. Rutnätet sparar inte på din slutliga design. Du kan tillfälligt slå på eller av den med hjälp av ögonikon eller ta bort den permanent genom att klicka på minus ikon bredvid ögat.

Oavsett om du använder layoutrutnätet eller inte, kan du börja lägga till grundläggande platshållarkomponenter till din första bildlayout. Överlag är layouten på dina bilder upp till dig.

3. Skapa en textlayout med två kolumner

Låt oss börja med att designa en topptitel med en tvåkolumns brödtextbild. För att lägga till din titelplatshållare, använd Textverktyg (T), och skriv "Titelplatshållare". Standardtextstorleken i Figma är ganska liten, så med platshållaren inskriven, markera den och använd inställningarna till höger för att öka storleken och välja ett teckensnitt—ladda ner ett typsnitt om det behövs. Du kan också ställa in kerning och andra attribut.

För att passa bredden på bilden, öka bredden på titeltextrutan genom att klicka och dra hörnet till höger. Lämna en marginal på varje sida. Detta innebär att textrutan kommer att rymma olika titellängder i framtida presentationer.

Om du vill lägga till ett brödtextområde med två kolumner använder du Textverktyg (T) och dra textrutan enligt ditt layoutrutnät, och lämna tillräckligt med utrymme för en andra kolumn av samma storlek bredvid.

Med din textruta på plats, välj ett lämpligt teckensnitt och storlek. Markera textrutan och duplicera den genom att hålla ned Oalternativ (Mac) eller Alt (Windows) medan du drar rutan. Detta skapar en layout med två kolumner; du kan dock använda det här systemet för att designa andra typer av layouter.

4. Lägg till en bakgrundsfärg eller bild

Du kan ställa in en bakgrundsfärg genom att välja ramen och gå till Fylla på menyn till höger för att välja en färg. Men om du hellre vill använda en bild, eller en uppsättning bilder, som bakgrund kan du. Dra bara din bakgrundsbild från en mapp till din ram. Du kan ändra storlek på den direkt genom att dra i hörnen så att de passar din ram.

Om du använder en bild som bakgrund, se till att du arrangerar bilden längst bak eller längst ned i lagren för varje bild genom att högerklicka och välja Skicka tillbaka, eller genom att dra den till botten på den vänstra lagerpaletten.

För att ytterligare redigera bilden, under Fylla, klick Bild i rullgardinsmenyn. Du kommer att kunna ändra blandningsläge, beskärningsfaktor och andra aspekter. För att ändra opaciteten, ändra procentsatsen bredvid rullgardinsmenyn.

För en enskild bild som inte är en bakgrund, använd Ramverktyg (F) för att rita en ram där du vill att bilden ska sitta, och dra filen från din dator in i ramen. Då kan du använda samma inställningar som tidigare.

5. Hur man skapar textstilar i Figma

När du skapar en huvudmall bör textstilarna vara konsekventa genom alla bilder. Detta kan göras manuellt genom att ställa in varje textkomponent på samma sätt, men om du har många bilder kan detta vara tråkigt att göra. De goda nyheterna? Du kan automatisera dina textstilar i Figma.

Med den valda texten markerad – till exempel en underrubrik i önskad stil, typsnitt och storlek – klicka på kvadrat med fyra punkter bredvid Text i menyn till höger. Klicka på plustecken att sätta en ny stil.

Namnge stilen i popup-fönstret, till exempel "Diabildsrubrik eller brödtext". När du designar andra bilder i den här mallen kan du välja den listade stilen i textmenyn genom att markera texten och välja stil. För att ta bort länken till stilen och åsidosätta funktionen, klicka på bruten länk ikon som visas när du håller muspekaren över textstilens titel.

Det fungerar likadant för färger. Välj något med den färg du vill ha, klicka sedan på menyknappen Figma och Snabba åtgärder. Skriv "Välj alla med samma fyllning" och det kommer att välja allt av samma färg. Sedan kan du ställa in det som färgstil under Fylla menyn på samma sätt som att göra en textstil. Detta fungerar bra för bakgrundsfärger genom att helt enkelt välja ram och välja din färg.

Om du inte redan följer en stilguide finns det många sätt att skapa färgpaletter.

6. Skapa komponenter

För att kunna använda dina mallar senare måste de vara komponenter, så de länkar. För att förvandla ramen till en komponent, välj den aktuella ramen och klicka Cmd + Alternativ + K (Mac) eller Ctrl + Alt + K (Windows).

Ramens titel ändras från blå till lila med en diamantikon för att visa att den nu är en komponent. Klicka sedan för att duplicera ramen Cmd + D (Mac) eller Ctrl + D (Windows) en gång och dra den nya ramen till höger om den första.

Ta bort komponenten i dubbletten från originalet genom att högerklicka på den nya ramens titel och välja Koppla bort instans. Byt namn på den nya bilden med en lämplig titel för dess layout. Lägg till den nya designen på bilden och gör den sedan till sin egen komponent genom att klicka Cmd + Alternativ + K (Mac) eller Ctrl + Alt + K (Windows). Denna process måste göras varje gång du skapar en ny bild.

När du designar layouten för varje ny bild, använd dina färdiga text- och färgstilar för att spara tid. Slutför denna process med så många basbilder som du behöver, och se till att de alla har beskrivande namn.

7. Hur du använder dina Master Slides

För att använda bilderna för dina framtida mönster, välj Sida 1 i Sidor meny – med din mall under sin egen titel – och skapa en ny ram i presentationsstorlek. Klicka sedan till vänster Tillgångar > Lokala komponenter var dina mallbilder ska vara. Dra mallen till din nya ram och centrera den. Redigera platshållarna för ditt innehåll.

Följ samma process tills din presentation är klar.

Spara tid genom att skapa dina egna mastermallar i Figma

Du kan ge din huvudmall till lagkamrater eller medarbetare, behålla den för personligt bruk eller till och med sälja dem som designpaket. Även om det från början kan verka skrämmande att skapa en mall för bildspel, kommer det att underlätta produktiviteten när du gör framtida presentationer i Figma, vilket i slutändan sparar tid.

De 10 bästa Figma-funktionerna som alla designers bör använda

Läs Nästa

Om författaren