Create AMAZING & ANIMATED Mesh Gradients | Figma Tutorial

Summary

In diesem Video führt der Designer seine jüngste Kreation vor: eine wunderschöne Farbverlaufs-Design, die er in Figma erstellt hat. Er teilt detailliert, wie er die Mesh-Gradienten von Grund auf neu erstellt, indem er die Pen-Funktion verwendet, um abstrakte Formen zu zeichnen und diese dann mit Farbverläufen zu färben. Zusätzlich demonstriert er, wie man durch Verwendung von Schatteneffekten und Farbmodifikationen die Tiefe und Dynamik des Designs erhöht. Schließlich erklärt er, wie man Animationen mit Smart Animate erstellt, um ein fließendes, wiederkehrendes visuelles Erlebnis zu schaffen.

Takeaways

• 🎨 Der Designer lobt ein von ihm kreiertes Farbverlaufsdesign als eines der schönsten, das er in seiner 14-jährigen Karriere gemacht hat.
• 🛠️ Die Erstellung des Farbverlaufs erfolgte in Figma, und der Designer wird im Video schrittweise zeigen, wie man ihn erstellt.
• 👍 Der Designer fordert die Zuschauer auf, die Like-Taste zu nutzen, um ihm Feedback zu geben und die Kanalwachstum zu unterstützen.
• 📈 Nach dem Erfolg seines Figma-Masterkurses plant der Designer den Start eines neuen Kurses über Produkt- und UX-Design.
• 🎓 Der neue Kurs soll technischer und komplexer sein und soll die Teilnehmer schulen, wie man Werkzeuge, Geschäftsstrategien und wie ein UX- oder Produktdesigner denkt.
• 🌐 Der Designer verwendet animierte Mesh-Farbverläufe, die er von Grund auf neu gestaltet hat, und plant, ein Tutorial dazu zu erstellen.
• 🔍 Als Referenz für das Design suchte der Designer nach Mesh-Farbverläufen im Internet und fand eine Website, die seine persönlichen Markenfarben紫罗兰色和品红色 enthielt.
• ✂️ Er verwendet das Stiftwerkzeug in Figma, um die verschiedenen Formen zu erstellen, die den Farbverlauf erzeugen, und maskiert die Farben entsprechend.
• 🖌️ Der Designer fügt der Grundform weitere Farben hinzu, um die Farbverläufe zu erstellen, und verwendet Schattierungen, um die Tiefe und den Kontrast zu erhöhen.
• 🔄 Um die Animation zu erstellen, kopiert der Designer die Artboards und verändert die Positionen und Größen der Farben, um den Farbverlauf im Bewegung zu bringen.
• 🔧 Der Designer verwendet Smart-Animierung in Figma, um die Übergänge zwischen den Artboards zu animieren und einen reibungslosen, wiederkehrenden Effekt zu erzielen.

Q & A

Wie lange hat der Designer Erfahrung im Bereich Design?

Der Designer hat über 14 Jahre Erfahrung im Design.

In welchem Tool wurde die Gradientenanimation erstellt, die der Designer beschreibt?

Die Gradientenanimation wurde in Figma erstellt.

Welche Reaktion erwartet der Designer von den Zuschauern, wenn sie die Videotutorials mögen?

Der Designer erwartet, dass die Zuschauer die Like-Taste betätigen, um ihm zu signalisieren, dass er mehr solcher Videos machen sollte.

Was ist das nächste Kursthema, das der Designer voraussichtlich veröffentlichen wird?

Das nächste Kursthema, das der Designer veröffentlichen wird, ist Produkt- und UX-Design.

Wie verwendet der Designer das Pen-Tool in Figma, um die benutzerdefinierten Formen für die Gradienten zu erstellen?

Der Designer verwendet das Pen-Tool, um durch Anklicken und Ziehen von Mauszeiger die Konturen der benutzerdefinierten Formen zu zeichnen und die Gradienten zu maskieren.

Welche Technik verwendet der Designer, um die Farbsättigung in den Gradienten zu erhöhen?

Der Designer verwendet die Overlay-Farbmodus-Einstellung, um die Farbsättigung in den Gradienten zu erhöhen und die Farben zusättiger zu gestalten.

Wie verwendet der Designer das Layer Blur-Effekt in Figma?

Der Designer wählt die Layer Blur-Effekt aus, um einen weichen, verschwommenen Effekt auf die gesamte Gradientenanimation anzuwenden, indem er den Schatten auf etwa 140 erhöht.

Welche Animationseinstellungen verwendet der Designer, um die Farbverläufe in der Animation zu animieren?

Der Designer verwendet die Smart Animate-Funktion in Figma, um die Farbverläufe in der Animation zu animieren, indem er die Dauer der Animation und den Delay einstellt.

Welche zusätzlichen Anpassungen macht der Designer, um die Animation zu vervollkommnen?

Der Designer macht zusätzliche Anpassungen wie das Vergrößern der Formen, das Verschieben und Drehen der Farben und das Anwenden eines Easing-Effekts, um die Animation weich und nahtlos zu gestalten.

Welche zusätzlichen Tipps gibt der Designer für die Erstellung von Gradienten in Figma?

Der Designer gibt Tipps wie das Suchen nach Referenzen, das Kopieren und Anpassen von Gradienten, das Experimentieren mit verschiedenen Farbmodi und das Anwenden von Effekten wie Layer Blur und Smart Animate.