Create AMAZING & ANIMATED Mesh Gradients | Figma Tutorial
Summary
TLDRIn 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
🎨 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.
🖌️ 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.
🔄 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.
Mindmap
Keywords
💡Gradient
💡Figma
💡Mesh Gradient
💡Smart Animate
💡Layer Blur
💡Overlay
💡Pen Tool
💡Artboard
💡Prototype
💡Easing
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]
浏览更多相关视频
The BEST Way to Summarize Anything With GPT-4o
Crashkurs für Anfänger | Canva Tutorial Deutsch
Create First Person Animations in Unreal Engine 5! (TUTORIAL)
WordPress Kontaktformular erstellen mit Elementor (Tutorial)
Turning Notion Into Your Automated CRM system
Risikofrei von 100x Hebel profitieren? So gehts! (Bitcoin Trading Anleitung)
5.0 / 5 (0 votes)