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.

Outlines

00:00

🎨 Erstellung eines Farbverlaufs in Figma

Der Designer zeigt seine Freude über einen von ihm kreierten Farbverlauf, den er als eines der schönsten bezeichnet, die er in seiner 14-jährigen Karriere als Designer erstellt hat. Er beschreibt den Farbverlauf als 'butterweich glatt' und teilt, dass er ein Tutorial erstellen wird, um die Community Schritt für Schritt durch den Prozess zu führen. Der Designer nutzt Figma für die Erstellung und betont, dass er seine Fähigkeiten und Tools vermitteln möchte, um das Publikum zu einem legendären Designer zu machen. Er erwähnt auch, dass er gerade eine Figma-Masterclass veröffentlicht hat und die nächste, die sich auf Produkt- und UX-Design konzentrieren wird, bald erscheinen wird. Der Prozess beginnt mit der Recherche von Mesh-Farbverläufen auf Google, um eine Referenz zu finden, die er für seine persönliche Marke nutzbar machen kann.

05:02

🖌️ Anwendung von Schattierungen und Effekten

Der Designer führt den Prozess der Erstellung eines Farbverlaufs in Figma fort, indem er die Verwendung des Stiftwerkzeugs beschreibt, um benutzerdefinierte Formen zu erstellen. Er erklärt, wie er die verschiedenen Farben und Schattierungen hinzufügt und wie er die Schattierungen miteinander verbindet, um einen 'Overlay'-Effekt zu erzielen. Der Designer demonstriert, wie er die Schattierungen anpasst, um sie lebhafter undsättiger erscheinen zu lassen, und gibt Tipps, wie man die Farben und Formen anpasst, um den gewünschten visuellen Effekt zu erzielen. Er verwendet Layer-Blur, um einen weichen, verschwommenen Effekt zu erzeugen, und passt die Größe der Formen an, um die Lücken im Design auszufüllen. Der Prozess beinhaltet das Experimentieren mit verschiedenen Farbmodi und das Anwenden von Animationen, um die Bewegung der Farben auf dem Bildschirm zu steuern.

10:03

🔄 Animieren von Farbverläufen und Abschließende Anmerkungen

Der Designer zeigt, wie er die Animationen für den Farbverlauf erstellt, indem er die Position der Farben auf verschiedenen Artboards ändert, um den animierten Effekt zu erzeugen. Er verwendet Smart Animate, um die Übergänge zwischen den verschiedenen Farbzuständen zu gestalten und legt besonderen Wert darauf, dass die Animationen weich und glatt erscheinen. Der Designer betont die Bedeutung einer glatten Farbübergangsanimation und zeigt, wie man die Easing-Einstellungen anpasst, um ein natürliches Erscheinungsbild zu gewährleisten. Er schließt mit der Vorstellung, dass er in naher Zukunft weitere Videos veröffentlichen wird, und dankt dem Publikum für die Unterstützung.

Keywords

💡Gradient

Ein Gradient ist eine Übergangseffekt zwischen zwei oder mehr Farben, der in der Gestaltung verwendet wird, um visuelle Effekte zu erzeugen. Im Video wird der Gradient als zentrales Designelement beschrieben, das den Designer inspiriert und als 'sehr schön' und 'butterweich glatt' bezeichnet wird. Der Gradient ist ein wichtiger Bestandteil des Designs, das der Designer in Figma erstellt hat.

💡Figma

Figma ist ein vektorbasiertes Design-Tool, das für die Erstellung von Benutzeroberflächen und Visualisierungen verwendet wird. Im Video wird Figma als die Hauptplattform beschrieben, auf der der Designer seine Gradienten und Animationen erstellt. Es wird auch erwähnt, dass der Designer in Figma eine Schritt-für-Schritt-Anleitung für das Publikum erstellen wird.

💡Mesh Gradient

Ein Mesh-Gradient ist eine spezielle Art von Farbverlauf, der durch das Platzieren von Farben in einem Mesh-Netzwerk erstellt wird, wodurch ein dreidimensionales und komplexes Farbmuster entsteht. Im Video verwendet der Designer Mesh-Gradienten, um eine visuelle Tiefe und Dynamik in seinem Design zu erzeugen, was als Teil seiner persönlichen Marke und als Reaktion auf Anfragen von Instagram-Followern erwähnt wird.

💡Smart Animate

Smart Animate ist eine Funktion in Figma, die es ermöglicht, Animationen zwischen verschiedenen Zuständen einer Komposition zu erstellen. Im Video wird Smart Animate verwendet, um den Übergang zwischen verschiedenen Farbzuständen des Gradienten zu animieren und so eine fließende und dynamische visuelle Erfahrung zu schaffen.

💡Layer Blur

Layer Blur ist eine Effektoption in Figma, die verwendet wird, um einen Weichzeichneffekt auf die Schichten anzuwenden, um eine Art von Tiefenwahrnehmung zu erzeugen. Im Video wird Layer Blur genutzt, um die Schichten des Gradienten zu verwischen, was zu einer harmonischen Farbüberblendung führt und das Design ansprechender macht.

💡Overlay

Overlay ist ein Blending-Modus, der in Figma verwendet wird, um zwei Schichten zu kombinieren, wobei die Farbe der oberen Schicht die Farbe der unteren Schicht beeinflusst. Im Video wird Overlay genutzt, um die Farbsättigung und die Farbwirkung des Gradienten zu verstärken und so eine intensivere visuelle Wirkung zu erzielen.

💡Pen Tool

Das Lineal-Werkzeug ist ein Tool in Figma, das verwendet wird, um benutzerdefinierte Formen und Pfade zu erstellen. Im Video verwendet der Designer das Lineal-Werkzeug, um die benutzerdefinierten Formen für den Mesh-Gradienten von Grund auf neu zu zeichnen und so die Grundlage für die Farbverläufe zu schaffen.

💡Artboard

Ein Artboard ist ein Arbeitsbereich in Figma, der als Container für verschiedene Designelemente dient. Im Video wird der Artboard verwendet, um die verschiedenen Zustände des Gradienten zu organisieren und zu animieren, was für die Erstellung der endgültigen Animation entscheidend ist.

💡Prototype

Ein Prototyp in Figma ist eine Sammlung von Artboards, die in einer bestimmten Reihenfolge angeordnet sind, um die Interaktionen und Übergänge zwischen ihnen zu simulieren. Im Video wird der Prototyp verwendet, um die Animationen des Gradienten zu testen und zu verfeinern, um sicherzustellen, dass sie wie gewünscht fließend und dynamisch wirken.

💡Easing

Easing ist ein Animationsprinzip, das verwendet wird, um die Geschwindigkeitsänderungen innerhalb einer Animation zu kontrollieren, um eine natürliche und ansprechende Bewegung zu erzeugen. Im Video wird Easing angewendet, um die Farbübergänge im Gradienten zu verfeinern und sicherzustellen, dass sie weich und nahtlos erscheinen.

Highlights

Designer with over 14 years of experience shares their creation of a beautiful gradient.

The gradient is described as buttery smooth and visually stunning.

Tutorial on creating the gradient within Figma is introduced.

Encouragement for viewers to engage by liking the video to support more content creation.

Context provided on the release of a Figma master class and upcoming product and UX design course.

Description of the process of creating a visual brand for a course.

Mention of playing with animated mesh gradients and creating a tutorial based on Instagram requests.

The process starts with a Google search for mesh gradients as a reference.

A downloaded gradient image is used as a starting point in Figma.

Explanation of the necessity to recreate the gradient from scratch within Figma for animation purposes.

Use of the pen tool in Figma to create custom shapes for the gradient.

Technique of masking out shapes to define where the color ends in the gradient.

Adding color to the shapes and creating a gradient feel.

Creating a blurry effect using layer blur in Figma.

Adjusting the size of shapes to fill in gaps and avoid background showing through.

Using overlay color blending modes to create more vibrant and saturated colors.

Duplicating shapes and adjusting colors to enhance saturation and vibrancy.

Creating an animation by duplicating the artboard and adjusting color positions.

Setting up the animation with smart animate and adjusting timing for a smooth loop.

Ensuring smooth easing in and out for a polished animation effect.

Final thoughts on the importance of a smooth and continuous animation.

Transcripts

yes i have to admit this is probably one

of the most beautiful gradients i have

ever created as a designer for over 14

years just look at it it is so beautiful

it is so buttery smooth

if i was in this gradient i would

honestly just cradle myself i'd close my

eyes and i would just let it

just

take me

around anyways yes this is all created

within figma what i'm going to walk you

guys through step by step on how to

create all this let's get right into it

guys oh and by the way if you do enjoy

these types of videos make sure to smash

up those like buttons yes smash it up so

you can let me know to make more videos

like this and it will also help the

channel grow as well now obviously i

want to give you guys a little bit of

context so as you know that i released

my figma master class that was done

really really well

the next course that i'm about to launch

well i will be launching is around

product and ux design and it's sort of a

building block right so i teach you use

how to tools and then once you learn how

to use the tools i'm teaching you all

the core primary skills which is like

business strategy product strategy

thinking like a ux designer thinking

like a product designer and sort of

piecing everything together for you now

obviously this course is going to be a

lot more technical a little bit more

complex and i want to have a visual

brand that i don't know is nicer to look

at a little bit more appealing it's just

i don't know it just looks good right

that's what i want to achieve so i was

playing around with these animated mesh

gradients that i designed from scratch

and a lot of you guys on instagram were

asking me to create a tutorial around it

so

here i am creating a tutorial for you

guys giving you guys free education to

help become a legendary designer so

let's get right into it now this is the

exact process that i took now i'm not

going to glorify the process i'm going

to walk you guys through exactly how i

did it because that's how you're going

to learn so the first thing i did was i

went on to google and i found this

beautiful website right so i went to

google and i went to

and i searched up mesh gradients i

wanted to have a reference point of

something that i can sort of use as a

reference point so i clicked on the

first link and i found this beautiful

website and i was trying to find one of

the mesh gradients that had the colors

that i utilized in my own personal brand

which is the purple and a bit of the

magenta looking color so i went ahead

and downloaded this one i copied it and

i pasted it over onto figma

now obviously you can't use a jpeg or a

png to animate inside figma you need to

create it yourself and you need to

create everything as a separate shape

and then you utilize smart animate to

create the animations so what i did was

i flipped this image onto this

horizontal axis as you can see over here

and then i chucked it into an artboard

pretty much job done i'm kidding guys

that this is where i started to sort of

play around with how do i want to

actually create this mesh gradient from

scratch so i locked the layer

and then i utilized the pen tool the pen

tool if you haven't used it before

allows you to create these wonky

beautiful custom shapes that every

designer loves right because they're so

abstract now

this is how i create it so i'm going to

delete these lines and

we're going to go ahead and create this

from scratch so i'm going to hit p on my

keyboard and what i'm going to do is i'm

actually going to mask out all the

different shapes that create this

gradient so where the color ends right

that's what i define as a shape so i'm

just gonna go click left on my keyboard

so i'm just gonna click left right and

then i'm gonna sort of draw a line over

here and then i'm gonna hold down that

left button right and then i'm gonna

drag my mouse to create that contour as

you can see over here

now with that in mind you can see now

once i've dragged this anchor point out

so far

it will always sort of help me keep this

corner really well rounded and real

balanced but that's not what i want i

want to be able to snap this point

straight up over here so what i can do

is i can hover over onto this anchor

point as you can see click it i can

delete it on my keyboard and then i'm

going to hold down shift to snap a

straight line all the way to the top of

this corner right and then i'm going to

click right onto this anchor point over

here where we first started and then i'm

going to drag to create that contour as

you can see right there now i'm going to

go ahead and create all the separate

shapes so i'm going to have one around

here right for the peachy looking color

and then around for the yellowish

looking color i'll create another shape

and then for the cyan light blue looking

color i will create another shape over

here so i'm going to go ahead and fast

forward this clip and you can see how i

create it

perfect so now that i've got all the

different shapes i'm going to go ahead

and just give it a bit of color so i'm

going to hold down command on my

keyboard and i'm going to directly

select the shapes that i want i'm going

to remove the stroke and change the feel

from solid to linear

and i'm going to go ahead and create the

first color gradient over here so i'm

going to have the blue move into a bit

of that

magenta looking

purple so i'm going to go ahead and give

it that color

and i'm just going to quickly loosely

add these colors in i'm not too precious

about it right now i'm going to go ahead

and select this one

looking good job done that's how i

created it i'm kidding guys so what

we're going to do from here is i'm going

to go ahead and start to create this

blurry effect so what we want to do is

i'm going to click on this frame hit

enter my keyboard to select all the

layers inside i'm going to go and hit

plus on the effects and then i'm going

to change drop shadow to layer blur

and then i'm going to bump this up to

around like 200. you can see that it's

probably a little bit too much

but if i reduce it you can see that it's

a little bit too so what i'm going to do

is i'm going to bump it up to maybe like

140 right and then what i'm going to do

is i'm going to make these shapes a

little bit bigger to fill in the gaps

because you can see there's a little bit

of a white

um a white background coming through

these shapes so i'm going to make these

a lot bigger

i'm going to make the purple one like

the blue one a little bit bigger as well

i'm going to make the yellow one a

little bit bigger as well

you can see that it's starting to come

along so now i'm gonna also move this

shape to sort of meet the contour a

little bit better there we go

you can see it's starting to come along

now the second thing that you need now

the next thing that you actually need to

go ahead and do is you want to start to

define some of the colors and you need

to go ahead and duplicate right so i'm

going to hit command d on the shapes and

i'll move it to the top because i want

to set this one

as pass through over onto overlay and

when you set colors on overlay as a

layer setting you can see that it starts

to create some of these really nice

blended modes right so if you play

around with overlay uh lighten soft

light darken it creates some really

special unique colors so if i go to

darken it create something a little bit

darker you go lighten it creates a

little bit of a lighter hue you've got

overlay i like that because it creates a

lot of saturation in the specific colors

so from here you can start to play

around and there is no right or wrong in

this uh in this sort of uh process

what i did next was i started to realize

that some of the colors looked a little

bit muted right so i wanted to make sure

if i wanted to make it more saturated i

want to duplicate it and then set it to

overlay as well

so you can see some of the colors the

yellows are more specifically and the

magenta the purples and the dark blues

are becoming a lot more saturated and

they look a little bit more vibrant so

from here you need to just start to play

around with it and see what sort of

effects that you can create so i'm gonna

go ahead and continue playing with this

a little bit more

[Music]

all right so here we go we've got

something a little bit more a little bit

nicer obviously we can play around with

this further but i don't want to be

spending too much time tinking around

with a mesh gradient so once you've got

something that you like what you want to

do then is duplicate the actual artboard

right so you've got two of them and

because the second one has all has all

the same layers we can start to move

these colors around right and this is

going to create the animated effects so

you can just create some random shapes

you can even lighten some of the colors

if you really wanted to

and you can make it a little bit larger

as well and you can move this purple one

a little bit so you can actually make it

larger you can also turn it a little bit

you can move it down a little bit and

then you've also got the blue right so

the blue you can sort of see you might

want to move it to the side

you also want to move this one down a

little bit

turn a little bit and the and the goal

is to sort of create the animation that

you have in mind how do you want these

colors to move around so as you can see

right now the purple and the dark blue

is sort of moving along the bottom of

the actual uh the actual board so when

we actually go ahead and link these up

with the prototype as you can see like

this all i have to do is set this to aft

after delay to

one millisecond so practically instantly

and i want to set this to smart animate

and i want to change 300 milliseconds to

maybe 2500 and then what i want to do is

i want to go ahead and select the second

artboard and set an animation back to

the original because this will create

the loop effect so after delay one

millisecond smart animate to 2500

milliseconds oh and by the way i did

notice a few things that i really wanted

to fix up before i end this video when

we make those transitions you want to

make sure that it is easing in and out

right so you want to change that to both

the actual easing

why because when you go ahead and

preview the animation you want to make

sure that there is no sort of jagged

looking effect you want to make sure

there will be glimpses of it because

figma sometimes renders our colors uh

doesn't really render it uh butter

smooth but you'll notice that it doesn't

stop the animation doesn't stop the

animation continues to proceed and sort

of flows and it looks very nice so

that's the effect that i wanted to

still include in this video because i

know for a fact that i could not have

left you with a jagged stopping

animation that if it makes sense all

right guys i'll see you in the next

video very soon

[Applause]

[Music]