Figma ist ein beliebtes Interface-Design-Tool, das beim Erstellen von Prototypen und Animationen hilft. Eine der wichtigsten Funktionen von Figma ist die Möglichkeit, dem Design Bewegung hinzuzufügen. In diesem Artikel werden wir uns ansehen, wie man in einer Figur vorwärts geht.
Wenn Sie einen Prototyp in einer Figur erstellen, können Sie durch Hinzufügen von Bewegung visualisieren, wie die Interaktion des Benutzers mit der Benutzeroberfläche aussehen wird. Mit Motion können Sie nicht nur Ihr Design zum Leben erwecken, sondern auch testen, wie effektiv Benutzer mit Ihrer Benutzeroberfläche auf einem echten Gerät interagieren.
Um der Figur eine Vorwärtsbewegung hinzuzufügen, müssen Sie eine Animation für das ausgewählte Objekt erstellen. Der Prozess ist ziemlich einfach und Sie benötigen nur ein paar Schritte. Klicken Sie zuerst auf das Objekt, das Sie animieren möchten. Wählen Sie dann das Prototyping-Bedienfeld aus und erstellen Sie einen Übergang zum Zielbildschirm. Je nach Vorliebe und Zweck der Animation können Sie verschiedene Arten von Animationen wie Folie, Flip oder Blackout auswählen.
Erstellen einer Animation in einer Figur
In Figma können Sie einzigartige und spektakuläre Animationen erstellen, um Ihre Designs zum Leben zu erwecken und sie interaktiver zu gestalten. Mit der Auto-Animate-Funktion können Sie Animationen in einer Figur erstellen.
Um eine Animation in einer Figur zu erstellen, müssen Sie zunächst ein Designelement auswählen, das animiert werden soll. Sie können ein beliebiges Element wie eine Schaltfläche, ein Bild oder ein Textfeld auswählen.
Wenn Sie ein Element für die Animation ausgewählt haben, besteht der nächste Schritt darin, Übergangszustände hinzuzufügen. Auf diese Weise können Sie bestimmen, wie sich ein Element von einem Zustand zum nächsten ändert. Sie können beispielsweise die Farbe, Position oder Transparenz eines Elements ändern.
Nachdem Sie die Übergangszustände definiert haben, können Sie die Zeit und die Verzögerung der Animation anpassen, um eine glattere und lebhaftere Bewegung zu erzeugen. Sie können für jeden Übergangszustand unterschiedliche Werte angeben.
Eine Besonderheit der Animation in der Figur ist die Möglichkeit, sich wiederholende oder zyklische Animationen zu erstellen. Sie können die Anzahl der Wiederholungen anpassen oder eine unendliche Wiederholung auswählen.
Wenn Sie mit dem Anpassen der Animation fertig sind, können Sie sie im Prototyping-Modus anzeigen. Auf diese Weise können Sie sehen, wie die Animation in Aktion aussehen wird, und die endgültigen Einstellungen vornehmen.
Das Erstellen einer Animation in einer Figur gibt Ihnen die Möglichkeit, Ihren Designs Dynamik und Interaktivität hinzuzufügen. Es hilft, die Aufmerksamkeit der Benutzer zu erregen und die visuelle Wirkung Ihrer Projekte zu verbessern.
Auswählen von Elementen für die Animation
Wenn Sie eine Vorwärtsbewegungsanimation in einer Figur erstellen, müssen Sie die Elemente auswählen, die animiert werden sollen. Dies können Formen, Textblöcke, Symbole oder andere grafische Elemente sein.
Um ein Element für die Animation auszuwählen, müssen Sie:
- Wählen Sie den gewünschten Bildschirm im linken Bereich der Figur aus.
- Klicken Sie auf das gewünschte Element auf dem Bildschirm oder wählen Sie es im Ebenenbedienfeld aus.
Nachdem Sie ein Element für die Animation ausgewählt haben, können Sie es verschieben, skalieren und drehen. Sie können auch seine Eigenschaften wie Farbe, Transparenz oder Schatten ändern.
Die Auswahl der richtigen Elemente für die Animation wird dazu beitragen, einen Bewegungseffekt zu erzeugen, der harmonisch aussieht und die Aufmerksamkeit der Benutzer erregt.
Grundlegende Einstellungen konfigurieren
Bevor Sie einer Figur eine Vorwärtsbewegung hinzufügen, müssen Sie die Grundeinstellungen für die Erstellung der Animation konfigurieren.
Stellen Sie zunächst sicher, dass Sie ein Artboard haben, auf dem Sie eine Animation erstellen werden. Wenn Sie noch kein Artboard besitzen, erstellen Sie es, indem Sie im oberen Menü der Figur auf die Schaltfläche "Artboard hinzufügen" klicken.
Als nächstes wählen Sie das Objekt aus, das Sie animieren möchten. Es kann ein beliebiges Element der Benutzeroberfläche sein, z. B. eine Schaltfläche, ein Symbol oder einfach nur Text. Um ein Objekt auszuwählen, klicken Sie einfach mit der linken Maustaste darauf.
Nachdem Sie ein Objekt ausgewählt haben, klicken Sie auf der rechten Seite der Eigenschaftenleiste auf die Registerkarte Prototyping. Hier finden Sie verschiedene Optionen zum Anpassen der Animation.
Wählen Sie unter "Beim Anklicken" die Option "Bewegung" und legen Sie die Bewegungsrichtung (vorwärts, rückwärts oder in einen anderen Bildschirm) und die Geschwindigkeit der Animation fest.
Sie können auch andere Einstellungen wie die Verzögerung vor Beginn der Animation und die Verzögerungszeit vor dem Übergang zum nächsten Artboard anpassen. Diese Optionen können nützlich sein, wenn Sie einen Verzögerungseffekt zwischen Animationen erstellen oder einen reibungslosen Übergang zwischen Artboards hinzufügen möchten.
Wichtig: Vergessen Sie nicht, die Änderungen zu speichern, nachdem Sie die Animationseinstellungen konfiguriert haben. Klicken Sie dazu auf die Schaltfläche "Anwenden" oder verwenden Sie Strg+S (Für Windows) oder Cmd+S (Für Mac).
Nachdem Sie nun die Grundeinstellungen für die Animation konfiguriert haben, können Sie mit dem Hinzufügen von Vorwärtsbewegungen in der Figur beginnen.
Anmerkung: Um die Animation in Aktion zu sehen, wechseln Sie in den Prototyping-Modus, indem Sie auf die Schaltfläche Prototyping in der oberen rechten Ecke des Figma-Fensters klicken.
Hinzufügen von Keyframes
Führen Sie die folgenden Schritte aus, um Keyframes zu einer Figur hinzuzufügen:
- Wählen Sie das Objekt aus, dem Sie eine Animation hinzufügen möchten.
- Öffnen Sie das Prototyping-Bedienfeld auf der rechten Seite des Bildschirms.
- Wählen Sie im Bereich Prototyping die Option Animation aus.
- Klicken Sie auf die Schaltfläche "Keyframe hinzufügen". Dadurch wird ein neuer Keyframe zwischen dem aktuellen und dem vorherigen Frame erstellt.
- Passen Sie die Animationseinstellungen für das neue Keyframe an, z. B. das Versetzen, Drehen oder Skalieren eines Objekts.
- Wiederholen Sie die Schritte 4 bis 5 für alle erforderlichen Keyframes.
- Passen Sie die Verzögerung zwischen den Bildern an, um die Animationsgeschwindigkeit einzustellen.
Nachdem Sie Keyframes hinzugefügt haben, können Sie die Animation im Prototyping-Modus anzeigen, indem Sie auf die Play-Taste klicken. Sie können Keyframes jederzeit ändern oder löschen, um die visuellen Effekte Ihrer Animation fein abzustimmen.
Anpassen von Animationseffekten
Sie können Animationseffekte verwenden, um der Figur eine Vorwärtsbewegung hinzuzufügen. Wenn Sie diese Effekte anpassen, können Sie interaktive und dynamischere Prototypen erstellen.
Eine der wichtigsten Optionen, die Sie konfigurieren können, ist die Übergangsfunktion. Die Übergangsfunktion bestimmt, wie sich ein Element zwischen zwei Zuständen bewegt. Einige der verfügbaren Übergangsfunktionen umfassen das allmähliche Ausblenden (ease-in), das allmähliche Ausblenden (ease-out) und das allmähliche Ausblenden (ease-in-out).
Sie können auch die Dauer der Animation anpassen. Dauer gibt die Zeit an, die ein Element zwischen den beiden Zuständen bewegt. Eine kürzere Dauer erzeugt eine schnellere und schärfere Animation, während eine längere Dauer eine glattere und langsamere Animation erzeugt.
Zusätzliche Effekte wie das Ändern der Transparenz können ebenfalls angepasst werden, um komplexere Animationen zu erstellen. Mit diesen Funktionen können Sie Effekte für das Erscheinen, Verschwinden und Verschieben von Elementen auf dem Bildschirm erstellen.
Die Flexibilität und Anpassbarkeit von Animationseffekten in der Figur ermöglicht es Ihnen, Prototypen mit einem hohen Maß an Interaktivität und Attraktivität zu erstellen. Nutzen Sie diese Funktionen, um die Benutzererfahrung zu verbessern und Ihre Prototypen überzeugender und einzigartiger zu machen.
Steuern der Animationsgeschwindigkeit
In der Figur wird die Animationsgeschwindigkeit mit dem Parameter "Duration" (Dauer) eingestellt. Es wird in Millisekunden angegeben und bestimmt, wie lange es dauert, bis die Animation abgeschlossen ist.
Um die Geschwindigkeit der Animation zu steuern, öffnen Sie das Prototypfenster und wählen das gewünschte Objekt oder eine Gruppe von Elementen aus, denen Sie die Animation hinzufügen möchten.
Nachdem Sie ein Objekt oder eine Gruppe von Elementen ausgewählt haben, müssen Sie den Übergang auswählen, für den Sie die Animationsgeschwindigkeit festlegen möchten. Scrollen Sie dann im Bereich "Animationseinstellungen" nach unten und suchen Sie nach der Option "Duration".
Geben Sie einen Wert für die Dauer der Animation in Millisekunden ein. Wenn Sie beispielsweise auf "1000" setzen, dauert die Animation 1 Sekunde. Wenn Sie den Wert auf "500" setzen, dauert die Animation eine halbe Sekunde.
Denken Sie daran, dass eine Erhöhung der Animationsdauer die Wiedergabezeit der Animation erhöht und eine Verkleinerung die Animation schneller macht.
Nachdem Sie die gewünschte Animationsgeschwindigkeit eingestellt haben, können Sie eine Vorschau des Ergebnisses anzeigen, indem Sie auf die Schaltfläche "Testen" (Preview) im oberen Bereich klicken.
Die Steuerung der Animationsgeschwindigkeit ermöglicht es Ihnen, harmonischere und glattere Übergänge in Ihrem Design zu erstellen, wodurch es attraktiver und professioneller wird.
| Dauer | Die Zeit |
|---|---|
| 100 | 0,1 sekunden |
| 500 | 0,5 sekunden |
| 1000 | 1 sekunde |
| 2000 | 2 sekunden |
Animation abspielen
Eine Möglichkeit, eine Animation in einer Figur zu erstellen, besteht darin, einzelne Frames zu verwenden. Erstellen Sie mehrere Bilder, in denen sich das Objekt an verschiedenen Positionen befindet. Stellen Sie dann die Verzögerung zwischen den Bildern ein und sie werden nacheinander abgespielt, wodurch ein Bewegungseffekt entsteht.
Eine andere Möglichkeit, Animationen in einer Figur abzuspielen, besteht darin, interaktive Prototypen zu verwenden. Sie können einen Prototyp erstellen, Übergänge zwischen den Bildschirmen hinzufügen und eine Verzögerung zwischen den Übergängen festlegen. Wenn Sie den Prototyp spielen, werden die Bildschirme mit dem Bewegungseffekt ineinander übergehen.
Auch in Figma gibt es die Möglichkeit, Animationen mit Hilfe von Plugins zu erstellen. Mit Plugins können Sie Ihren Objekten verschiedene Effekte, Übergänge und Transformationen hinzufügen. Sie können das Plugin installieren, seine Parameter anpassen und die Animation damit abspielen.
| So erstellen Sie eine Animation | Die Beschreibung |
|---|---|
| Verwenden einzelner Frames | Erstellen mehrerer Bilder mit unterschiedlichen Objektpositionen und Festlegen der Verzögerung zwischen den Bildern |
| Verwenden interaktiver Prototypen | Erstellen eines Prototyps mit Übergängen zwischen Bildschirmen und Festlegen der Verzögerung zwischen Übergängen |
| Verwenden von Plugins | Installieren eines Plugins zum Hinzufügen von Effekten und Übergängen zu Animationen |
In der Animationsfigur können Sie die Wiedergabeparameter abspielen und anpassen. Sie können die Animationsgeschwindigkeit, die periodischen Effekte und die Verzögerungen zwischen den Animationen einstellen. All dies ermöglicht es Ihnen, dynamische und attraktive Animationen in der Figur zu erstellen.
Exportieren von Video- und GIF-Dateien
Um in Videoformate wie MP4 oder MOV zu exportieren, können Sie die integrierten Exportfunktionen in Figma verwenden. Wählen Sie dazu alle erforderlichen Objekte und Layer im Projekt aus und wählen Sie im Menü Datei die Option Exportieren aus. Wählen Sie dann das Videoformat aus und passen Sie die gewünschten Exportoptionen wie Auflösung, Qualität usw. an. Wenn Sie ein Projekt in ein Videoformat exportieren, sammelt Figma alle ausgewählten Ebenen und Objekte in einer Videodatei zusammen, wobei alle Bewegungen und Animationen beibehalten werden.
Um eine GIF-Animation in einer Figur zu erstellen, benötigen Sie eine Erweiterung oder Anwendung eines Drittanbieters. Es gibt verschiedene Werkzeuge, mit denen Sie GIF-Animationen aus Projekten in Figma erstellen können. Eines der beliebtesten Tools ist LottieFiles. Um eine GIF-Animation mit LottieFiles zu erstellen, wählen Sie alle erforderlichen Ebenen und Objekte im Bild aus, exportieren Sie sie im JSON-Format und importieren Sie die resultierende Datei in LottieFiles. Sie können dann eine GIF-Animation erstellen, indem Sie die Wiedergabegeschwindigkeit, die Größe, die Farben und andere Einstellungen anpassen.
Durch den Export in Videoformate und GIF-Animationen können Sie Bewegungen und Animationen in Figma-Projekten speichern, wodurch sie lebendiger und dynamischer werden. Dies ist eine nützliche Funktion für die Präsentation von Projekten an Kunden, die Veröffentlichung in sozialen Medien oder die Verwendung in Präsentationen und Webseiten. Verwenden Sie den Export in Video und GIF, um Ihre Kunstwerke mit anderen zu teilen und Projekten mehr Leben zu geben.
Veröffentlichen einer Animation
Nachdem Sie Ihrem Projekt in der Figur eine Vorwärtsbewegung hinzugefügt haben, können Sie die Animation zum Anzeigen oder Herunterladen veröffentlichen. Dazu müssen Sie einige einfache Schritte ausführen.
1. Wählen Sie das Artboard mit der Animation aus, die Sie veröffentlichen möchten.
2. Klicken Sie auf die Schaltfläche "Veröffentlichen" in der oberen rechten Ecke des Figma-Bildschirms.
3. Wählen Sie im geöffneten Fenster ein Veröffentlichungsformat aus, z. B. HTML oder GIF.
4. Passen Sie die Veröffentlichungseinstellungen an, z. B. die Größe oder die Qualität der Animation.
5. Klicken Sie auf die Schaltfläche "Veröffentlichen".
Ihre Animation kann nun über den von Ihnen angegebenen Link angezeigt oder heruntergeladen werden. Sie können auch Animationen auf Ihrer Website einbetten oder einen Link mit anderen Personen teilen.
