Er zijn een miljoen manieren om een presentatie te maken, maar Figma is er een onderschatte tool voor. De prototypefunctie in Figma biedt een groot aantal aanpasbare overgangsopties. Niet alleen zullen uw overgangen uw publiek verbazen, maar u kunt ook plug-ins opnemen voor extra pit en uw publiek betrokken houden, zodat u zeker bent van uw vaardigheden.
We gaan je laten zien hoe je een geweldige presentatie maakt met Figma; volg gewoon deze handleiding.
1. Stel uw eerste presentatieframe in
Open Figma en klik Nieuw ontwerpbestand. Klik op de Frame-tool (F) om uw kader te tekenen of om een vooraf ingesteld kader aan de rechterkant te kiezen met Presentatie > Dia 16:9. Jij kan een hoofdsjabloon maken tijd besparen.
Hernoem je frame door te dubbelklikken op de blauwe titel links bovenaan. Stel een achtergrondkleur in; u kunt het echter later altijd wijzigen door alle kaders te markeren en de vulkleur te wijzigen.
2. Voeg de titeltekst toe
Gebruik de Teksttool (T) en schrijf je titel. Gebruik aparte tekstvakken voor aparte regels, met slechts één of twee woorden per regel. Stel uw tekstvoorkeuren in in de
Tekst menu aan de rechterkant. Figma gebruikt Google-lettertypen, dus misschien wil je dit weten de beste combinaties van Google-lettertypen.3. Voeg een afbeelding toe
Jij kan gebruik een stockfoto of maak je eigen relevante foto. Om een afbeelding toe te voegen, tekent u een rechthoek met de Rechthoekgereedschap (R). Je afbeelding zal in deze vorm zitten.
Klik op de rechthoek en ga naar Vullen en klik op de gekleurd vierkant. Dan klikken Effen > Afbeelding > Afbeelding kiezen. Zoek je afbeelding en klik op Open. Beweeg over de afbeelding om 4 witte cirkels te onthullen. Klik en sleep een cirkel naar binnen om de hoeken van je afbeelding af te ronden.
Schik je lagen zo dat de afbeelding aan de achterkant staat en de tekst op de bovenste laag. U kunt de lagen in het lagenpaneel slepen of door. te gebruiken Cmd/Ctl + [ om een laag terug te sturen of Cmd/Ctl + ] om een laag naar voren te halen.
4. Creëer de eerste overgang
De eerste overgang opent de afbeelding en laat de titeltekst in het frame schuiven. Dupliceer eerst het eerste frame door het te selecteren en op. te drukken Cmd/Ctrl + D om het te dupliceren.
Schaal de afbeelding in het linkerframe naar beneden door de hoogte-attributen in de H box tot ongeveer 150, waardoor een horizontale spleet van het beeld overblijft. Lijn het uit in het midden door beide afbeeldingen over de frames te selecteren en op. te klikken Ooptie + V (Mac) of Alt + V (Ramen).
Selecteer de afbeelding aan de linkerkant om de afbeeldingsovergang te voltooien. Verander dan de ondoorzichtigheid naar 0% in het rechtermenu in het vak naast Pass Through onder Layer. Hierdoor wordt de afbeelding onzichtbaar voordat deze overgaat en wordt geopend.
Klik op het eerste tekstvak en houd ingedrukt Verschuiving. Begin met slepen en houd dan ook ingedrukt spatiebalk en blijf de tekst van het frame slepen. Het lijkt alsof het eenmaal uit het frame verdwijnt. Zonder de toevoeging van de spatiebalk werkt deze overgang niet, maar als u de spatiebalk vasthoudt voordat u sleept, wordt alleen uw frame verplaatst.
Doe dit opnieuw voor uw tweede of volgende tekstvakken, maar sleep ze iets verder naar links om wat variatie in de overgang toe te voegen. Terwijl de tekst nog steeds is geselecteerd, verlaagt u de laagdekking tot 0% op dezelfde manier als voorheen voor de afbeelding.
Om de overgang in te stellen, ga naar Voorlopig ontwerp. Selecteer het linkerframe en klik op de blauwe cirkel die in het midden van de rechterkant van het frame verschijnt. Sleep het, zodat de lijn naar je tweede frame gaat.
In de vervolgkeuzelijst die zegt: direct, selecteer Slimme animatie. Verander dan het vakje met de stopwatch tot 1000 ms. Dit zorgt ervoor dat uw overgang één seconde duurt vanaf de klik van de muis. De andere instellingen moeten standaard worden ingesteld. Zorg ervoor dat u de naam van frametitels niet hernoemt na het instellen van een overgang, anders maken de bestanden geen verbinding.
Klik op de Toneelstuk om uw overgang te testen. Ga terug naar Ontwerp om uw presentatieontwerp voort te zetten.
5. Voeg meer dia's toe
Om over te schakelen van dia 1 naar dia 2, dupliceert u uw meest rechtse dia (Cmd/Ctrl + D). Verplaats in het nieuwe frame - dia 2 - de tekstvakken uit het frame met behulp van de vorige techniek (Verschuiving + Sleuren dan spatiebalk nadat u bent begonnen met slepen). Verplaats het ene tekstvak naar links en het andere naar rechts van het frame. Zet de dekking voor beide op 0%.
Schaal de afbeelding voor de afbeelding naar beneden en verplaats deze iets uit het midden, en stel vervolgens de dekking in op 0%. Dit geeft u in feite een leeg canvas voor uw tweede dia. U kunt de inhoud toevoegen aan de onzichtbare middelen van de vorige dia.
Voeg een grote afbeelding toe aan het midden van het frame. Om wat decoraties aan je afbeelding toe te voegen, gebruik je a Figma-plug-in voor GIF's of download een sticker-GIF van Giphy en sleep het naar de bovenkant van de afbeelding. Selecteer uw hoofdafbeelding en eventuele GIF's en groepeer ze samen (Cmd/Ctrl + G), dit zorgt ervoor dat Smart Animate goed werkt.
Selecteer de groep en kopieer deze (Cmd/Ctrl + C). Plak het vervolgens op het frame van dia 1 (Cmd/Ctrl + V). Schaal het naar beneden en stel de dekking in op 0%. Verplaats deze laag vervolgens naar achteren (Cmd/Ctrl + [). Dit zorgt voor een soepele overgang naar de volgende dia.
Ga naar Voorlopig ontwerp. Selecteer dia 2 en klik op de blauwe cirkel om deze naar dia 3 te slepen. De standaardinstelling van Figma in het prototypemenu is om de vorige instellingen te gebruiken, dus ze moeten allemaal worden ingesteld volgens de vorige overgang. Ga terug naar Ontwerp.
Dupliceer de laatste dia (Cmd/Ctrl + D). Deze dia gebruikt dezelfde afbeelding als de vorige, maar we schalen deze naar één kant van het frame. Verplaats de afbeelding naar de linkerkant van het kader door deze te slepen terwijl u deze ingedrukt houdt Verschuiving. Beweeg over de rechterrand van de afbeelding totdat de tegenoverliggende pijlen verschijnen, klik en sleep de rechterrand van de afbeelding naar links totdat u tevreden bent.
Ga naar Voorlopig ontwerp en koppel de twee frames aan elkaar. Ga dan terug naar Ontwerp.
Voeg een titel en hoofdtekst toe aan de rechterkant van de geschaalde afbeelding en groepeer ze. Kopieer de tekstgroep en plak deze op de vorige dia. Klik en sleep de tekstgroep naar rechts van het frame zoals eerder.
6. Een mock-up toevoegen
Maak een mock-up; bekijk onze gids over het maken van mockups met plug-ins in Figma. Voeg een nieuw frame toe en plak je mockup erop. Pas het formaat van de mockup aan zodat het in het frame past.
Kopieer de mockup en plak deze in het vorige frame. Pas het formaat aan zodat het binnen het afbeeldingsgedeelte past, verplaats het dan naar de achterkant van de lagen en stel de dekking in op 0%. Koppel de kaders in Voorlopig ontwerp.
7. Labels toevoegen
Dupliceer het mockup-frame. Voeg een titel en beschrijving toe om delen van je mockup uit te leggen. Groepeer de tekst en noem deze. Dan kunt u maak een matglazen indicator voor uw opsommingstekens en lijnen. Groepeer één lijn met één cirkel. Lijn uw indicator uit met wat deze beschrijft en voeg uw beschrijving ernaast toe. Koppel de kaders in Voorlopig ontwerp.
Dupliceer het frame en voeg nog een opsommingsteken toe met wat het beschrijft. Maak hier nog een prototype van. Dupliceer elk frame per opsommingsteken, zodat elk opsommingsteken alleen overgaat.
8. Beëindig uw presentatie
Dupliceer de laatste dia. Schrijf een laatste woord of twee en centreer het. Kopieer de tekst en plak deze op de vorige dia.
Verklein de tekst door. ingedrukt te houden K terwijl het wordt geschaald - dit houdt uw tekst opgemaakt terwijl het kleiner wordt. Plaats je tekst ergens in de buurt van de bovenkant van de mockup en stuur de laag naar de achterkant, onder de afbeelding. Zet de dekking op 0%. Ga terug naar je laatste dia.
Verplaats alle andere objecten uit het frame met behulp van de sleepmethode. De overgang schuift alles naar de zijkanten en bovenkant terwijl de tekst vanaf de bovenkant naar beneden beweegt en groter wordt. Link komt binnen Voorlopig ontwerp.
9. Deel uw Figma-presentatie
Je hebt overal toegang tot je presentatie waar je kunt inloggen op je Figma-account of de URL kunt delen met anderen, zodat ze overal kunnen kijken. Om uw eindpresentatie met zijn overgangen te presenteren, klikt u op de Toneelstuk knop en presenteer in de modus Volledig scherm.
U kunt de frames ook opslaan als PDF's, hoewel u daarbij de geanimeerde overgangen verliest.
Verbeter uw presentaties met Figma
Deze presentatie is niet alleen minimalistisch, wat uw publiek niet zal overweldigen, maar de overgangen zijn professioneel en schoon. Er is geen UI/UX-expert voor nodig om Figma te gebruiken op een manier die uw presentaties ten goede komt, ongeacht uw functie. Presenteer met vertrouwen en je wordt overspoeld met vragen over hoe je presentatie is gemaakt.
