Im folgenden Tutorial werde ich Ihnen zeigen, wie Sie Lottie -Animationen in Figma erstellen. Wir werden zwei farbenfrohe Designs verwenden, um zu veranlassen, wie Sie in Figma animieren k?nnen, und dann werde ich Ihnen zeigen, wie Sie von Figma zu Lottie -Animationen wechseln. Alles, was Sie brauchen, ist ein kostenloses Figma -Konto. Wenn Sie bereit sind zu lernen, wie Sie Lottie in Figma verwenden, lassen Sie uns eintauchen.

• So erstellen Sie die Startrahmen und Formen der Lottie -Animation
• So fügen Sie einer Animation in Figma eine Sternform hinzu
• So organisieren Sie Verm?genswerte richtig, wenn Sie in Figma animieren
• So erstellen Sie eine Animation in Figma
• So erstellen Sie Lottie -Animationen in Figma
• So verwenden Sie Text in Lottie -Animationen mit Figma
• So erstellen Sie Lottie -Animationen in Figma mit einem Komponentensatz
• So erstellen Sie eine Textanimation in Figma
• So fügen Sie Figma Lottie hinzu

1. So erstellen Sie die Startrahmen und Formen der Lottie -Animation

Schritt 1

Beginnen Sie mit dem Rahmenwerkzeug (f) und erstellen Sie einen 850 x 850 px -Frame.

Fahren Sie mit dem Ellipse -Tool (O) fort und fügen Sie es mit einem 500 -PX -Kreis hinzu. Stellen Sie die Füllfarbe dieser Form auf #FFB400 ein.

Benennen Sie im Schichtfeld Ihre zwei Kreise wie unten gezeigt um.

Schritt 2

W?hlen Sie Ihren Rahmen aus und drücken Sie das Kontroll-D viermal, wodurch vier Kopien Ihres ausgew?hlten Frame hinzugefügt werden. Um die Dinge weniger überlastet zu machen, k?nnen Sie alle Frames ausw?hlen und den Abstand auf etwa 150 px einstellen.

Schritt 3

Passen Sie die Gr??e der gelben Kreise aus den ersten drei Frames an, wie unten gezeigt, und denken Sie daran, sie in die Mitte der Frames zu bewegen, zu denen sie Teil sind. W?hlen Sie die gelben Kreise aus dem ersten und fünften Rahmen aus und ersetzen Sie das Gelb durch die dunklere Farbe.

Dies hilft bei der Animation, da sie die Hauptstufen Ihrer Animation festlegt. Sp?ter füllt die intelligente Animate -Funktion die fehlenden Frames aus.

2. So fügen Sie einer Animation in Figma eine Sternform hinzu

Schritt 1

Verwenden Sie das Sternwerkzeug, um in der Mitte Ihres ersten Rahmens eine 350 PX -Sternform hinzuzufügen. Machen Sie es wei?, behalten Sie die Standard -5 -Punkte und setzen Sie das Verh?ltnis auf 50% und den Radius auf 20 .

Schritt 2

Stellen Sie sicher, dass Ihre Sternform noch ausgew?hlt ist, und drücken Sie Control-C, um sie zu kopieren. W?hlen Sie Ihre anderen vier Frames aus und drücken Sie einfach Control-V, um dieselbe Sternform hinzuzufügen.

W?hlen Sie die Sternformen aus Ihrem zweiten und dritten Rahmen aus und ?ndern Sie die Füllfarbe von Wei? nach gelb. W?hlen Sie nur die Sternform aus dem zweiten Rahmen aus, verkleinern Sie sie auf 250 PX und senken Sie den Radius auf 16 .

3.. Wie man Verm?genswerte ordnungsgem?? organisiert, wenn Sie in Figma animieren

Schritt 1

Konzentrieren Sie sich auf Ihren dritten Rahmen und verwenden Sie das Ellipse -Werkzeug (O), um Ihre Sternform, ungef?hr wie unten gezeigt, mehrere gelbe Kreise hinzuzufügen.

Schritt 2

W?hlen Sie die Kreise aus Ihrem dritten Bild aus und kopieren Sie sie ( Control-C ). W?hlen Sie Frame 4 und drücken Sie Kontroll-V, um die Kreise einzufügen, und machen Sie sie dann wei?.

Schritt 3

Wechseln Sie zu Rahmen 2, w?hlen Sie es aus und drücken Sie erneut Kontroll-V, um diesen Satz gelbe Kreise einzufügen. W?hlen Sie die Kreise nacheinander aus und bewegen Sie sie hinter die Sternform.

Auch hier hilft das Bewegen dieser Kreise bei der Animation. Die Kreise bewegen sich von hinten zu ihren endgültigen Zielen, die in Frame 3 angegeben sind.

Schritt 4

W?hlen Sie alle diese winzigen Kreise aus Ihrem zweiten Rahmen aus und kopieren Sie sie ( Control-C ). W?hlen Sie Frame 1 und Frame 5 und drücken Sie Control-V .

Wie ich bereits sagte, müssen die winzigen Kreise hinter den Sternformen sitzen. W?hlen Sie dazu einfach alle Sternformen über Ihre fünf Frames aus und drücken Sie die Taste , um sie an die Vorderseite ihrer jeweiligen Schichten zu bringen.

Schritt 5

Lassen Sie uns eine kurze Zusammenfassung durchführen, bevor Sie lernen, wie man in Figma eine Lottie -Animation erstellt. Das Wichtigste zuerst: Namen sind wichtig. Stellen Sie sicher, dass die Elemente, die Sie animieren, die gleichen Namen in allen Ebenen haben. Au?erdem k?nnen ?nderungen in der Reihenfolge der Objekte Ihre Animation st?ren. Versuchen Sie daher, die gleiche Reihenfolge in den Schichten zu verwalten.

4. So erstellen Sie eine Animation in Figma

Schritt 1

Nach Abschluss des Designs wechseln wir zum Prototyp und lernen Sie, wie man in Figma animiert. Beginnen Sie mit dem Wechsel vom Entwurfsmodus zum Prototypenmodus .

W?hlen Sie den ersten Frame aus und schlie?en Sie ihn mit dem zweiten an. Stellen Sie die Interaktionseinstellungen wie unten gezeigt ein. Wie ich bereits sagte, macht Smart Animate den gr??ten Teil der Magie, da es die fehlenden Frames aus Ihrer Animation ausfüllt.

Schritt 2

W?hlen Sie den zweiten Rahmen aus und schlie?en Sie ihn mit dem dritten an. Stellen Sie die Interaktionseinstellungen wie im folgenden Bild gezeigt.

Schritt 3

W?hlen Sie den dritten Rahmen aus und schlie?en Sie ihn mit dem vierten an. Stellen Sie die Interaktionseinstellungen wie unten gezeigt ein.

Schritt 4

W?hlen Sie den vierten Frame aus und schlie?en Sie ihn mit dem fünften an. Stellen Sie die Interaktionseinstellungen wie unten angegeben ein.

Schritt 5

Schlie?lich verbinden Sie den fünften Frame mit dem ersten und stellen Sie die Interaktionseinstellungen fest, wie Sie unten sehen k?nnen.

5. So erstellen Sie Lottie -Animationen in Figma

Schritt 1

Um eine Figmaanimation in Lottie umzuwandeln, ben?tigen Sie das Lottiefile -Plugin.

Drücken Sie Control-/, um das Menü Schnellaktionen zu ?ffnen. W?hlen Sie den Abschnitt Plugins & Widgets aus und suchen Sie nach dem Plugin für LotTiefiles .

Schritt 2

Klicken Sie auf die Schaltfl?che Ausführen , um das LotTiefiles -Plugin zu Figma hinzuzufügen. Sie müssen ein Konto mit LotTiefiles einrichten, bevor Sie eine Lottie aus Figma exportieren k?nnen.

Schritt 3

Sobald Sie Ihr Konto eingerichtet und das LotTiefiles -Plugin ge?ffnet haben, müssen Sie feststellen, dass Sie einen Fluss ausw?hlen müssen, um von Figma zu einer Lottie -Animation zu wechseln.

Wenn Sie noch keinen haben, stellen Sie sicher, dass Sie sich noch im Prototypmodus befinden, und fügen Sie einen Fluss für Ihren ersten Frame hinzu.

Schritt 4

W?hlen Sie den bevorzugten Fluss aus dem Dropdown -Menü. In diesem Fall gibt es nur einen, sodass Sie keine gro?en Probleme haben, es zu finden, aber für gr??ere Designs ist es eine gute Praxis, Ihre Flows zu benennen.

Schritt 5

Sobald Sie einen Fluss ausw?hlen, erhalten Sie eine sch?ne Vorschau Ihrer Lottie -Animation. Wenn Sie auf die Schaltfl?che Speichern auf der Schaltfl?che speichern, speichern Sie die Animation in Ihrem Projektordner unter lotTiefiles.com. Bevor Sie es tun, sind Sie sich bewusst, dass es 10 Animationen gibt, bevor Sie bezahlen müssen, um Ihre Lottie -Animationen zu speichern. Machen Sie nicht den gleichen Fehler wie ich und stellen Sie sicher, dass die Animation, die Sie sparen m?chten, die endgültige Version ist. Und nein, das L?schen einer gespeicherten Animation setzt das Limit nicht zurück.

6. Wie man Text in Lottie -Animationen mit Figma verwendet

Schritt 1

W?hlen Sie das Textwerkzeug (T) aus und fügen Sie den Text "Laden" hinzu. Verwenden Sie jede Schriftart und stellen Sie die Gr??e auf etwa 80 ein. ?ffnen Sie dann das Fly-Out-Menü der Typ-Einstellungen , um die Kappenh?he auf Baseline -Taste zu überprüfen.

Schritt 2

W?hlen Sie das Ellipse -Tool (O) und fügen Sie es mit drei 10 pxen Kreisen hinzu, wie unten gezeigt. Verwenden Sie die im folgenden Bild angegebenen Füllfarben und konzentrieren Sie sich dann auf das Ebenenfeld .

Als gute Praxis k?nnen Sie jeden Kreis basierend auf seiner Farbe umbenennen. Platzieren Sie den orangefarbenen Kreis unter dem gelben und den roten unter dem orangefarbenen.

Schritt 3

W?hlen Sie Ihre Kreise zusammen mit dem Text aus und verwandeln Sie Ihre Auswahl in einen zusammengesetzten Pfad ( Alt-Kontroll-K ). Benennen Sie es "Lade Text" um.

Schritt 4

W?hlen Sie die Kreise aus und richten Sie sie alle an der linken Kante des gelben aus.

7. Wie man Lottie -Animationen in Figma mit einem Komponentensatz erstellt

Schritt 1

Stellen Sie sicher, dass Ihre Hauptkomponente ausgew?hlt ist, und fügen Sie eine Variante hinzu. W?hlen Sie die drei Kreise in Ihrer Standardvariante aus und machen Sie sie unsichtbar, indem Sie die Deckkraft der Füllfarben auf 0% senken.

Schritt 2

Fügen Sie Ihrem Komponentensatz eine dritte Variante hinzu. W?hlen Sie den orangefarbenen Kreis in dieser neuen Variante aus und bewegen Sie ihn mit der richtigen Pfeiltaste nach rechts. Lassen Sie einen Abstand von 8 px zwischen Ihrem orangefarbenen und dem gelben.

Schritt 3

Fügen Sie Ihrem Komponentensatz eine vierte Variante hinzu. W?hlen Sie den roten Kreis in dieser neuen Variante aus und bewegen Sie ihn mit der richtigen Pfeiltaste nach rechts. Lassen Sie einen Abstand von 8 px zwischen diesem roten Kreis und dem orangefarbenen.

Schritt 4

Fügen Sie Ihrem Komponentensatz eine fünfte Variante hinzu. W?hlen Sie den roten Kreis in dieser neuen Variante aus und bewegen Sie ihn hinter die orange.

Fügen Sie Ihrem Komponentensatz eine letzte Variante hinzu. W?hlen Sie den orangefarbenen Kreis in dieser neuen Variante aus und bewegen Sie ihn hinter das gelbe.

8. So erstellen Sie eine Textanimation in Figma

Schritt 1

Wechseln Sie vom Konstruktionsmodus zum Prototypenmodus . Schlie?en Sie zuerst jede aufeinanderfolgende Variante an und verbinden Sie dann die letzte Variante mit der ersten. W?hlen Sie alle Verbindungen aus und setzen Sie die Interaktionseinstellungen wie unten gezeigt. Auch hier wird Smart Animate die Magie machen.

Schritt 2

Erstellen Sie einen neuen Rahmen, machen Sie ihn lila und ziehen Sie die Textkomponente "Laden" aus dem Assets -Feld. Vergessen Sie nicht, diesem neuen Rahmen einen Fluss hinzuzufügen.

Schritt 3

Schlie?lich k?nnen Sie Steuerung drücken-/ um die schnellen Aktionen zu ?ffnen, nach dem Lottief- Plugin zu suchen und es zu ?ffnen, um Ihre Lottie-Animation voranzutreiben.

So sollte Ihre Lottie -Animation aussehen. Schauen Sie sich dieses Tutorial an, wenn Sie lernen m?chten, wie Sie die Animation "Ladepunkte" erstellen: So erstellen Sie eine Lottie -Ladeanimation.

9. Wie man Lottie zu Figma hinzufügt

Schritt 1

Sie k?nnen Figma Lottie hinzufügen, aber es gibt einige Einschr?nkungen, da Figma nicht direkt JSON Lottie -Dateien direkt unterstützt. Sie k?nnen Lottie -Animationen nur als GIF- oder MP4 -Dateien hinzufügen. Beachten Sie jedoch, dass Sie ein Abonnement ben?tigen, um eine MP4 -Datei in Figma zu importieren.

Sie k?nnen Ihre gespeicherten Lottie -Animationen als GIFs mit dem LotTiefiles -Plugin einfügen. Wenn Sie jedoch kein LotTiefiles -Abonnement haben, wird die Gr??e des importierten GIF ein Grenzwert geben.

Die gleiche Einschr?nkung gilt, wenn Sie Ihre gespeicherte Lottie -Animation als MP4 -Datei exportieren.

Wenn Ihre Lottie -Animation in After Effects erstellt wurde und Sie diese Datei haben, k?nnen Sie diese Animation als gr??eres GIF speichern und dann in Figma importieren.

Glückwunsch! Du bist fertig

So sollte Ihre Lottie -Animation aussehen. Ich hoffe, Sie haben dieses Tutorial genossen und k?nnen diese Techniken in Ihren zukünftigen Projekten anwenden.

Fühlen Sie sich frei, die endgültige Lottie -Animation anzupassen und sie zu Ihrem eigenen zu machen. Nachdem Sie gelernt haben, wie man Lottie in Figma verwendet, k?nnen Sie sich zu Envato befassen, wo Sie interessante L?sungen finden, um Ihre Animation zu verbessern.

M?chten Sie mehr lernen?

Wir haben eine Menge Tutorials zu Envato -Tuts, von Anf?nger bis zur Zwischenstufe. Schauen Sie sich an!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Lottien in Figma. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!