So erstellen Sie einen Farbverlauf in Figma

2023/08/28

Wenn Sie sich nicht für eine Farbe entscheiden können, sind Farbverläufe eine hervorragende Option. In Figma können Sie verschiedene Verlaufshintergründe erstellen, einer Form und einem Text einen Verlauf hinzufügen, Strichverläufe erstellen und vieles mehr. Sie können sogar Netzverläufe mit dem Unschärfeeffekt oder mit einem Mesh-Verlaufs-Plugin der Figma-Community erstellen.

Da Figma so viele verschiedene Möglichkeiten zum Erstellen eines Farbverlaufs bietet, könnte es für neue Benutzer schwierig sein, sie alle von Anfang an zu verstehen. Natürlich gehört auch das Experimentieren zum Lernprozess, aber es ist viel einfacher, alle Anleitungen an einem Ort zu haben. Und dieser Artikel liefert genau das.

So erstellen Sie verschiedene Verlaufsstile in Figma

Figma bietet verschiedene Verlaufsstile, mit denen Sie Hintergründe oder Objekte auf der Leinwand mit mehreren Farben füllen können.

Linear: Lineare Farbverläufe bestehen aus zwei Farben, die in einer geraden Linie miteinander verschmelzen.
Radial: Bei radialen Farbverläufen beginnt die erste Farbe an einem einzigen Punkt und geht in alle Richtungen in die andere über.
Winkel: Bei Winkelverläufen können Sie durch Hinzufügen von Winkeln die Richtung bestimmen, in die sich der Verlauf bewegt. Es ist eine hervorragende Option zum Erstellen von 3D-Bildern.
Raute: Wie der Name schon sagt, beginnen Rautenverläufe an einem Punkt und breiten sich in Form einer Raute aus.

Die Schritte zum Erstellen dieser Verlaufsstile sind dieselben. Der einzige Unterschied besteht im gewählten Stil. So erstellen Sie ein Verlaufsdesign in Figma:

Öffnen Sie eine leere Figma-Datei.
Tippen Sie in der linken Symbolleiste auf das „Rechteck-Werkzeug“.
Zeichnen Sie mit dem Werkzeug ein Rechteck auf die Leinwand, das Sie als Verlaufsreferenz verwenden möchten.
Wählen Sie das erstellte Rechteck aus.
Klicken Sie im rechten Bereich unter „Füllen“ auf die aktuelle Farbe, um die Farbauswahl zu öffnen.
Klicken Sie auf das Dropdown-Menü und ändern Sie die Standardeinstellung „Durchgehend“ in den gewünschten Verlaufsstil. Es werden zwei farbige Stopps oder Kästchen angezeigt.
Wählen Sie jeden Farbstopp aus und wählen Sie die Farbe aus, die Sie dem Farbverlauf hinzufügen möchten.
Tippen Sie auf die vier Punkte neben „Füllen“, um den Farbverlauf als Stil zu speichern.

Anschließend können Sie den Transparenzwert anpassen, die Farbstopps dort positionieren, wo eine Farbe enden und die zweite beginnen soll, einen weiteren Farbstopp hinzufügen, sie auf der Leinwand verschieben oder den Verlaufswinkel ändern. Wenn Sie mit der Anpassung fertig sind, speichern Sie den Farbverlauf erneut (Schritt 8).

Hinweis: Um einen von Ihnen hinzugefügten Farbstopp zu löschen, wählen Sie den Stopp aus und drücken Sie „Löschen“ oder „Rücktaste“ auf Ihrer Tastatur.

Jetzt können Sie den Verlaufsstil auf jedes gewünschte Objekt anwenden.

So erstellen Sie einen Netzverlauf in Figma

Mesh-Verläufe sind bei großen Unternehmen und Marken beliebt. Wenn Sie häufig Instagram nutzen, sehen Sie jeden Tag das Logo der App. Daher kann es in Situationen hilfreich sein, zu wissen, wie man sie erstellt, wenn Sie Ihren Projekten etwas Interessantes verleihen möchten.

Wie bereits erwähnt, können Mesh-Verläufe mit einem von der Figma-Community bereitgestellten Plugin erstellt werden . Es gibt jedoch eine einfachere Möglichkeit, mehrere Farben an beliebiger Stelle auf Ihrer Leinwand hinzuzufügen, ohne dass externe Tools erforderlich sind.

So erstellen Sie einen Netzverlauf in Figma:

Geben Sie eine neue Figma-Datei ein.
Erstellen Sie einen Rahmen.
Aktivieren Sie das Kontrollkästchen „Inhalt ausschneiden“ im rechten Bereich, damit alles, was außerhalb des Rahmens liegt, abgeschnitten wird.
Beginnen Sie mit dem Hinzufügen verschiedener Formen oder erstellen Sie Ihr eigenes Objekt mit dem „Stift“-Werkzeug im Rahmen.
Ändern Sie die „Füllung“ jedes neuen Formulars, damit es sich vom Rest unterscheidet.
Wählen Sie alle Formen aus.
Drücken Sie unter „Effekte“ auf das Dropdown-Menü und wählen Sie „Ebenenunschärfe“ aus.
Öffnen Sie die Einstellungen „Ebenenunschärfe“ und erhöhen Sie den Wert, bis Sie keine klaren Grenzen mehr zwischen den Formen sehen.
Speichern Sie den Stil wie oben und verwenden Sie ihn für andere Objekte.

Eine andere Möglichkeit, einen Netzverlauf zu erstellen, ist die Verwendung des Winkelstils. Es liefert ein etwas anderes, aber ebenso interessantes, faszinierendes Ergebnis wie das erste Tutorial.

Folgendes müssen Sie tun:

Öffnen Sie eine leere Leinwand.
Verwenden Sie die gewünschte Form und fügen Sie sie der Leinwand hinzu.
Ändern Sie unter „Füllung“ den Wert „Solid“ in „Angular“.
Wählen Sie die Farben für den Farbverlauf.
Passen Sie den Winkel und andere Aspekte des Farbverlaufs an.
Fügen Sie eine weitere Form hinzu, vorzugsweise „Eclipse“, also einen Kreis.
Legen Sie es auf die andere Form auf der Leinwand.
Fügen Sie einen linearen Farbverlauf hinzu und ändern Sie die Farbe in eine Farbe, die gut zum Rest passt.
Verwenden Sie unter „Effekte“ den Effekt „Ebenenunschärfe“ und verwischen Sie die Linien der neuen Form, um sie mit der ersten zu verschmelzen.

So erstellen Sie einen Farbverlauf für ein Bild in Figma

Neben der Erstellung eines Farbverlaufs können Sie auch ein vorhandenes Bild mit einem Farbverlauf überlagern, um ihm eine gewisse Dimension zu verleihen. Es entsteht ein „Fade“-Effekt oder die Illusion einer unsichtbaren Lichtquelle, die von außen auf das Bild scheint.

So fügen Sie einem Bild in Figma einen Farbverlauf hinzu:

Öffnen Sie eine neue Datei in Figma.
Ziehen Sie das Bild, dem Sie den Farbverlauf hinzufügen möchten, per Drag-and-Drop auf die Leinwand.
Fügen Sie eine Form hinzu, die der Größe des Bildes oben entspricht.
Wählen Sie im Abschnitt „Füllen“ einen Verlaufsstil aus.
Wählen Sie die Farben des Farbverlaufs aus der Farbauswahl aus.
Passen Sie die Deckkraft, den Winkel usw. an.

Sie können auch das „Stift“-Werkzeug verwenden und eine Form in dem Bereich zeichnen, in dem der Farbverlauf sein soll.

So erstellen Sie einen Farbverlauf für einen Text in Figma

Das Erstellen eines Farbverlaufs für einen Text in Figma ähnelt weitgehend dem Erstellen eines Farbverlaufs für jede andere Form. Hier sind die Schritte:

Öffnen Sie eine neue Leinwand in Figma.
Klicken Sie in der Symbolleiste links auf das Werkzeug „Text“.
Klicken Sie irgendwo auf die Leinwand und beginnen Sie mit dem Schreiben.
Wählen Sie den Text aus und gehen Sie zu „Ausfüllen“.
Wählen Sie den Verlaufsstil.
Klicken Sie auf jedes Farbfeld und suchen Sie die Farbe, die Sie dem Farbverlauf hinzufügen möchten.

FAQs

Wie viele Farben kann ich einem Farbverlauf in Figma hinzufügen?

Sie können sowohl im Standard- als auch im Mesh-Figma-Verlaufsstil so viele Farben hinzufügen, wie Sie möchten. Aber versuchen Sie, es nicht zu übertreiben. Da Farbverläufe über mehrere Übergangsfarben verfügen, sind mehr als fünf möglicherweise zu viel, selbst für einen Netzverlauf.

Kann ich einen Farbverlauf in Figma importieren?

Sie können jeden gewünschten Farbverlauf in Figma importieren. Sie können beispielsweise Code aus CSS (Cascading Style Sheets) einfügen, indem Sie das Bedienfeld „Code“ öffnen und den Code einfügen. Sie können Farbverläufe auch aus Adobe Illustrator importieren.

Wo finde ich kostenlose Figma-Verläufe?

Kostenlose und kostenpflichtige Figma-Verläufe finden Sie in der Figma-Community . Es bietet eine Fülle wunderschöner und einzigartiger Designs, die von Figma-Benutzern erstellt wurden. Sie können nach Plugins, Dateien und Widgets filtern. Geben Sie einfach „Verlauf“ in die Suchleiste oben ein und finden Sie den Farbverlauf, der Ihnen gefällt.

Werden Sie flippig mit bunten Farbverläufen

Farbverläufe sind eine hervorragende Möglichkeit, ein Design eindeutig und individuell zu gestalten. Und Figma ermöglicht Ihnen einen sanften Übergang zwischen zwei oder mehr beliebigen Farben Ihrer Wahl. Übertreiben Sie es jedoch nicht. Mischen Sie Farben, die gut zusammenpassen, und versuchen Sie, innerhalb derselben Farbpalette zu bleiben.

Haben Sie bereits versucht, in Figma einen Farbverlauf zu erstellen? Teilen Sie uns in den Kommentaren unten mit, welchen Verlaufsstil Sie verwendet haben und wofür Sie ihn verwendet haben.