Es gibt eine Million Möglichkeiten, eine Präsentation zu erstellen, aber Figma ist ein unterschätztes Werkzeug dafür. Die Prototyp-Funktion in Figma ermöglicht eine Vielzahl von anpassbaren Übergangsoptionen. Ihre Übergänge werden nicht nur Ihr Publikum begeistern, sondern Sie können Plugins für zusätzlichen Schwung integrieren und Ihr Publikum bei der Stange halten, sodass Sie sich auf Ihre Fähigkeiten verlassen können.
Wir zeigen Ihnen, wie Sie mit Figma eine tolle Präsentation erstellen. Folgen Sie einfach dieser Anleitung.
1. Richten Sie Ihren ersten Präsentationsrahmen ein
Offen Figma und klicken Neue Designdatei. Drücke den Rahmenwerkzeug (F), um Ihren Rahmen zu zeichnen oder rechts mit einen voreingestellten Rahmen auszuwählen Präsentation > Folie 16:9. Du kannst Erstellen Sie eine Master-Vorlage um Zeit zu sparen.
Benennen Sie Ihren Frame um, indem Sie auf den blauen Titel oben links doppelklicken. Legen Sie eine Hintergrundfarbe fest; Sie können es jedoch später jederzeit ändern, indem Sie alle Rahmen markieren und die Füllfarbe ändern.
2. Fügen Sie den Titeltext hinzu
Verwenden Sie die Textwerkzeug (T) und schreiben Sie Ihren Titel. Verwenden Sie separate Textfelder für separate Zeilen mit nur einem oder zwei Wörtern pro Zeile. Legen Sie Ihre Texteinstellungen in fest Text Menü rechts. Figma verwendet Google-Schriftarten, also möchten Sie es vielleicht wissen die besten Google-Font-Paarungen.
3. Fügen Sie ein Bild hinzu
Du kannst Verwenden Sie ein Archivfoto oder machen Sie Ihr eigenes relevantes Foto. Um ein Bild hinzuzufügen, zeichnen Sie mit dem ein Rechteck Rechteck-Werkzeug (R). Ihr Bild wird in dieser Form sitzen.
Klicken Sie auf das Rechteck und gehen Sie zu Füllen und klicken Sie auf die farbiges Quadrat. Dann klick Solid > Bild > Bild auswählen. Finden Sie Ihr Bild und klicken Sie darauf Offen. Bewegen Sie den Mauszeiger über das Bild, um 4 weiße Kreise anzuzeigen. Klicken und ziehen Sie einen Kreis nach innen, um die Ecken Ihres Bildes abzurunden.
Ordnen Sie Ihre Ebenen so an, dass sich das Bild hinten und der Text auf der obersten Ebene befindet. Sie können die Ebenen im Ebenenbedienfeld oder mithilfe von ziehen CMD/Ctrl + [ eine Schicht zurückschicken oder CMD/Ctrl + ] um eine Schicht nach vorne zu bringen.
4. Erstellen Sie den ersten Übergang
Der erste Übergang öffnet das Bild und lässt den Titeltext in den Rahmen gleiten. Duplizieren Sie zuerst den ersten Frame, indem Sie ihn auswählen und drücken CMD/Ctrl + D um es zu duplizieren.
Verkleinern Sie das Bild auf dem linken Frame, indem Sie die Höhenattribute in reduzieren H Box auf etwa 150, wodurch ein horizontaler Schlitz des Bildes verbleibt. Richten Sie es zentriert aus, indem Sie beide Bilder über die Rahmen auswählen und klicken ÖOption + V (Mac) bzw Alt + V (Windows).
Um den Bildübergang abzuschließen, wählen Sie das linke Bild aus. Dann ändern Sie die Opazität auf 0 % im rechten Menü im Feld neben Pass Through unter Layer. Dadurch wird das Bild unsichtbar, bevor es übergeht und geöffnet wird.
Klicken Sie auf das erste Textfeld und halten Sie es gedrückt Wechsel. Beginnen Sie mit dem Ziehen und halten Sie dann auch gedrückt Leertaste und ziehen Sie den Text weiter aus dem Rahmen. Es sieht so aus, als würde es einmal aus dem Rahmen verschwinden. Ohne das Hinzufügen der Leertaste funktioniert dieser Übergang nicht, aber wenn Sie die Leertaste vor dem Ziehen gedrückt halten, wird nur Ihr Rahmen verschoben.
Wiederholen Sie dies für Ihre zweiten oder nachfolgenden Textfelder, ziehen Sie sie jedoch etwas weiter nach links, um dem Übergang etwas Abwechslung zu verleihen. Reduzieren Sie bei weiterhin ausgewähltem Text die Deckkraft der Ebene auf 0 %, so wie Sie es zuvor für das Bild getan haben.
Um den Übergang einzustellen, gehen Sie zu Prototyp. Wählen Sie den linken Rahmen aus und klicken Sie auf blauer Kreis das in der Mitte der rechten Seite des Rahmens erscheint. Ziehen Sie es, sodass die Linie zu Ihrem zweiten Frame geht.
In der Dropdown-Liste, die sagt Sofortig, auswählen Intelligent animieren. Wechseln Sie dann die Box mit der Stoppuhr bis 1000ms. Dadurch wird Ihr Übergang so eingestellt, dass er ab dem Mausklick eine Sekunde dauert. Die anderen Einstellungen sollten standardmäßig eingestellt sein. Stellen Sie sicher, dass Sie Frame-Titel nach dem Festlegen eines Übergangs nicht umbenennen, da die Dateien sonst nicht verbunden werden.
Drücke den Spielen Schaltfläche, um Ihren Übergang zu testen. Geh zurück zu Entwurf um Ihr Präsentationsdesign fortzusetzen.
5. Fügen Sie weitere Folien hinzu
Um von Folie 1 zu Folie 2 zu wechseln, duplizieren Sie die Folie ganz rechts (CMD/Ctrl + D). Verschieben Sie im neuen Rahmen – Folie 2 – die Textfelder mit der vorherigen Technik aus dem Rahmen (Wechsel + Ziehen dann Leertaste nachdem Sie mit dem Ziehen begonnen haben). Verschieben Sie ein Textfeld nach links und das andere nach rechts vom Rahmen. Setzen Sie die Deckkraft für beide auf 0 %.
Verkleinern Sie das Bild für das Bild und verschieben Sie es leicht außermittig. Stellen Sie dann die Deckkraft auf 0 % ein. Dies gibt Ihnen effektiv eine leere Leinwand für Ihre zweite Folie. Sie können den Inhalt über den unsichtbaren Elementen der vorherigen Folie hinzufügen.
Fügen Sie ein großes Bild in der Mitte des Rahmens hinzu. Um ein paar Dekorationen auf Ihr Bild hinzuzufügen, verwenden Sie a Figma-Plugin für GIFs oder Laden Sie ein Sticker-GIF von Giphy herunter und ziehen Sie es auf das Bild. Wählen Sie Ihr Hauptbild und alle GIFs aus und gruppieren Sie sie zusammen (CMD/Ctrl + G), dies stellt sicher, dass Smart Animate ordnungsgemäß funktioniert.
Wählen Sie die Gruppe aus und kopieren Sie sie (CMD/Ctrl + C). Fügen Sie es dann in den Rahmen von Folie 1 ein (CMD/Ctrl + v). Verkleinern Sie es und setzen Sie die Deckkraft auf 0%. Dann verschieben Sie diese Ebene nach hinten (CMD/Ctrl + [). Dies gewährleistet einen reibungslosen Übergang in die nächste Folie.
Gehe zu Prototyp. Wählen Sie Folie 2 aus und klicken Sie auf den blauen Kreis, um ihn auf Folie 3 zu ziehen. Figmas Standardeinstellung im Prototypenmenü ist die Verwendung der vorherigen Einstellungen, daher sollten sie alle gemäß dem vorherigen Übergang eingestellt sein. Geh zurück zu Entwurf.
Duplizieren Sie die letzte Folie (CMD/Ctrl + D). Diese Folie verwendet dasselbe Bild wie die vorherige, aber wir werden es auf eine Seite des Rahmens skalieren. Bewegen Sie das Bild auf die linke Seite des Rahmens, indem Sie es ziehen, während Sie es gedrückt halten Wechsel. Bewegen Sie den Mauszeiger über den rechten Rand des Bildes, bis entgegengesetzte Pfeile erscheinen, klicken Sie und ziehen Sie den rechten Rand des Bildes nach links, bis Sie zufrieden sind.
Gehe zu Prototyp und verbinden Sie die beiden Rahmen miteinander. Gehen Sie dann zurück zu Entwurf.
Fügen Sie rechts neben dem skalierten Bild einen Titel und einen Textkörper hinzu und gruppieren Sie sie. Kopieren Sie die Textgruppe und fügen Sie sie auf der vorherigen Folie ein. Klicken und ziehen Sie die Textgruppe wie zuvor rechts neben den Rahmen.
6. Fügen Sie ein Modell hinzu
Erstellen Sie ein Modell; schau dir unsere an Anleitung zum Erstellen von Mockups mit Plugins in Figma. Fügen Sie einen neuen Rahmen hinzu und fügen Sie dann Ihr Mockup darauf ein. Passen Sie die Größe des Modells an den Rahmen an.
Kopieren Sie das Mockup und fügen Sie es in den vorherigen Frame ein. Ändern Sie die Größe so, dass es in den Bildbereich passt, verschieben Sie es dann auf die Rückseite der Ebenen und stellen Sie die Deckkraft auf 0 % ein. Verknüpfen Sie die Rahmen Prototyp.
7. Etiketten hinzufügen
Duplizieren Sie den Modellrahmen. Fügen Sie einen Titel und eine Beschreibung hinzu, um Teile Ihres Modells zu erklären. Gruppieren Sie den Text und benennen Sie ihn. Dann kannst du Erstellen Sie einen Milchglasindikator für Ihre Stichpunkte und Linien. Gruppieren Sie eine Linie mit einem Kreis. Richten Sie Ihren Indikator mit dem aus, was er beschreibt, und fügen Sie Ihre Beschreibung daneben hinzu. Verknüpfen Sie die Rahmen Prototyp.
Duplizieren Sie den Rahmen und fügen Sie einen weiteren Aufzählungspunktindikator mit seiner Beschreibung hinzu. Prototypen Sie dies erneut. Duplizieren Sie jeden Frame pro Aufzählungspunkt, sodass jeder Aufzählungspunkt alleine übergeht.
8. Beenden Sie Ihre Präsentation
Duplizieren Sie die letzte Folie. Schreiben Sie ein oder zwei letzte Wörter und zentrieren Sie sie. Kopieren Sie den Text und fügen Sie ihn auf der vorherigen Folie ein.
Verkleinern Sie den Text, indem Sie gedrückt halten K beim Skalieren – dadurch bleibt Ihr Text formatiert, während er verkleinert wird. Platzieren Sie Ihren Text irgendwo in der Nähe des oberen Rands des Modells und senden Sie die Ebene nach hinten unter das Bild. Stellen Sie die Deckkraft auf 0 % ein. Gehen Sie zurück zu Ihrer letzten Folie.
Verschieben Sie alle anderen Objekte mit der Ziehmethode aus dem Rahmen. Der Übergang verschiebt alles zu den Seiten und nach oben, während sich der Text von oben nach unten bewegt und erweitert. Link gleitet hinein Prototyp.
9. Teilen Sie Ihre Figma-Präsentation
Sie können überall auf Ihre Präsentation zugreifen, wo Sie sich bei Ihrem Figma-Konto anmelden oder die URL mit anderen teilen können, damit sie von überall aus zuschauen können. Um Ihre endgültige Präsentation mit ihren Übergängen zu präsentieren, klicken Sie auf Spielen klicken und im Vollbildmodus anzeigen.
Sie können die Frames auch als PDFs speichern, obwohl Sie dabei die animierten Übergänge verlieren.
Verbessern Sie Ihre Präsentationen mit Figma
Diese Präsentation ist nicht nur minimalistisch, was Ihr Publikum nicht überwältigen wird, sondern die Übergänge sind professionell und sauber. Es braucht keinen UI/UX-Experten, um Figma in einer Weise einzusetzen, die Ihren Präsentationen zugute kommt, unabhängig von Ihrer beruflichen Rolle. Präsentieren Sie mit Zuversicht, und Sie werden mit Fragen überflutet, wie Ihre Präsentation gemacht wurde.
