Illustrationen in Figma Design erstellen

In diesem Projekt werden wir eine Illustration eines Zaubertranks in Figma Design erstellen. So kannst du dich auf unterhaltsame Weise mit dem Figma Editor und seinen Tools vertraut machen. Keine Sorge, falls du noch keine Erfahrung mit dem Illustrieren hast: Wir werden dich bei der Verwendung von einfachen Formen, Gruppen, Farben und Rahmen anleiten. Du erfährst außerdem, wie sich die Anordnung von Ebenen auf deine Designs auswirken kann.

Wenn du der Anleitung Schritt für Schritt folgst, sollte deine Illustration am Ende etwa so aussehen:

Mit folgenden Schritten erstellen wir eine Flasche mit Zaubertrank:

1. Flasche erstellen
2. Flasche mit Zaubertrank füllen 
3. Mit einem Korken verschließen 
4. Letzte Details hinzufügen
5. (Optional) Rahmen hinzufügen und Design exportieren

Flasche erstellen

Wir werden die Flasche mit den Formwerkzeugen Ellipse und Rectangle (Rechteck) sowie mithilfe einer Gruppe erstellen.

Formen hinzufügen

Du findest die Formwerkzeuge in der Symbolleiste. Klicke auf den Pfeil , um die weiteren Formoptionen anzuzeigen.

Wir fügen der Arbeitsfläche eine Ellipse und zwei Rechtecke hinzu:

• So fügst du eine Ellipse hinzu: Wähle in den Formwerkzeugen Ellipse aus oder drücke die Taste [O] und klicke auf die Arbeitsfläche.
• So fügst du ein Rechteck hinzu: Wähle in den Formwerkzeugen Rectangle (Rechteck) aus oder drücke die Taste [R] und klicke auf die Arbeitsfläche.

Größe von Formen ändern

Nachdem wir unsere Grundbausteine erstellt haben, müssen wir ihre Größe anpassen. Dafür kannst du entweder einen Ziehpunkt auswählen und den Cursor ziehen oder die gewünschten Abmessungen im Design-Tab in den Feldern Width (Breite) und Height (Höhe) eingeben.

Wähle eine der beiden Methoden, um die Größe der Formen an die folgenden Abmessungen anzupassen:

• Ellipse: 200 B x 200 H
• Rechteck 1: 100 B x 100 H
• Rechteck 2: 120 B x 40 H

Beim Rechteck mit der Größe 120 B x 40 H müssen wir außerdem die Ecken abrunden, damit die Kanten des Flaschenrands nicht so scharf aussehen. Wähle das Rechteck und gib im Design-Tab „10“ in das Feld Corner radius (Eckradius) ein.

Formen ausrichten

Nun müssen wir unsere Formen ausrichten, damit sie eher wie eine Flasche aussehen. Klicke und ziehe die Form, um sie auf der Arbeitsfläche zu verschieben. Wenn du Objekte verschiebst, werden rote Hilfslinien angezeigt, mit denen du das Objekt an anderen Objekten auf der Arbeitsfläche ausrichten kannst.

Richte die Formen wie folgt aus:

Formen gruppieren

Unsere Flasche sieht toll aus. Bevor wir weitermachen, lass uns für etwas Ordnung sorgen. Auf dem Tab Layers (Ebenen) in der linken Seitenleiste kannst du sehen, dass sich jede Form auf einer eigenen Ebene befindet.

Zur Vereinfachung können wir diese Ebenen gruppieren. Mithilfe von Gruppen kannst du Ebenen zusammenfassen, sodass sie wie ein einziges Objekt behandelt werden können.

Um mehrere Ebenen zu gruppieren, wähle sie aus und verwende folgende Tastenkombination:

• macOS: Command + G
• Windows: Strg + G

Im Tab Layers (Ebenen) in der linken Seitenleiste siehst du jetzt nur noch eine Ebene mit dem Namen „Group 1“. Durch das Benennen von Ebenen kannst du für Ordnung in Figma sorgen. Doppelklicke auf die Ebene und gib ihr den Namen „Flasche“.

Für Farbe sorgen

Verleihen wir unserer Flasche etwas Farbe. Wähle die Flasche aus und klicke auf den Bereich Fill (Füllung) in der rechten Seitenleiste, um die Farbauswahl zu öffnen. Für dieses Tutorial verwenden wir den Farbcode #DEDCF9. Du kannst den Code in das Feld Fill (Füllung) eingeben oder mit dem Farbwähler eine andere Farbe auswählen.

Sobald du die Füllfarbe geändert hast, solltest du diese Ebene sperren. Durch das Sperren von Ebenen kannst du verhindern, dass Objekte fälschlicherweise verschoben oder verändert werden. Um diese Ebene zu sperren, wähle die Flaschenform aus und klicke auf das Sperrsymbol in der linken Seitenleiste. Um eine Ebene zu entsperren, klicke auf das Entsperrsymbol .

Unsere Flasche ist fertig. Nun ist es an der Zeit, sie mit dem Zaubertrank zu füllen.

Zaubertrank erstellen

Ellipse hinzufügen

Verwende das Formwerkzeug Ellipse, um der Arbeitsfläche eine Ellipse hinzuzufügen und die Größe auf 175 x 175 anzupassen.

Ziehe die Ellipse auf die Flaschenform und richte sie mithilfe der roten Hilfslinien aus. Ändere die Füllfarbe der Ellipse wie bei der Farbe der Flasche im letzten Abschnitt. Für dieses Projekt wählen wir den Farbcode #E99BF4. Du kannst diesen Code in das Feld Fill (Füllung) eingeben oder mit dem Farbwähler eine andere Farbe auswählen.

Ellipse anpassen

Mithilfe der Einstellung Edit object (Objekt bearbeiten) schaffen wir die Illusion, dass der Zaubertrank in der Flasche herumschwappt.

Wähle die Ellipse aus und klicke in der Symbolleiste auf Edit object (Objekt bearbeiten), um den Vektorbearbeitungsmodus zu aktivieren. In diesem Modus kannst du jeden Punkt eines Objekts einzeln bearbeiten, ohne die gesamte Form zu ändern.

Klicke auf den obersten Punkt der Ellipse und ziehe ihn nach unten und zur Seite. Wenn du nicht weiterkommst, sieh dir folgendes GIF an:

Wenn du mit dem Aussehen deines Zaubertranks zufrieden bist, klicke auf Done (Fertig), um den Vektorbearbeitungsmodus zu beenden. Als Nächstes fügen wir ein paar Blasen hinzu.

Blasen mit dem Ellipsenwerkzeug hinzufügen

Das Ellipsenwerkzeug ist bei diesem Projekt sehr gefragt. Damit können wir unserer Flasche mit dem Zaubertrank ein paar Bläschen hinzufügen.

Ziehe das Ellipsenwerkzeug, um mehrere Bläschen zu erstellen. Sie müssen nicht alle gleich groß sein, aber sie müssen klein genug sein, um in die Flasche zu passen. Unsere Ellipsen haben eine Größe von 6 x 6 und 12 x 12. Bevor du fortfährst, gestalte die Füllung deiner Ellipsen etwas bunter. Wir haben dafür den Farbcode #985DF6 verwendet.

Wenn du die Bläschen in der Flasche platziert hast, ziehe den Cursor über alle Blasenellipsen und die größere Zaubertrank-Ellipse und gruppiere sie mithilfe der folgenden Tastenkombination:

• macOS: Command + G
• Windows: Strg + G

Du wirst feststellen, dass alle Ellipsenebenen in der linken Seitenleiste zu einer Ebene mit dem Namen „Group 2“ zusammengefasst wurden. Benenne die Ebene in „Zaubertrank“ um und klicke auf , um sie zu sperren.

Korken erstellen

Wir erstellen mithilfe des Rechteckwerkzeugs einen Korken.

Füge der Arbeitsfläche ein Rechteck hinzu und ändere dessen Größe auf 75 x 75. Verwende die Einstellung Corner radius (Eckradius) im Design-Tab, um die Ecken des Rechtecks auf 25 abzurunden.

Wähle für die Füllung des Rechtecks #CE856C aus und benenne die Ebene in „Korken“ um. Ziehe das Rechteck auf den Flaschenrand.

Ebenen anordnen

Da der Korken nicht auf der Flasche liegen soll, müssen wir die Ebenen in der linken Seitenleiste neu anordnen. Die Reihenfolge der Ebenen bestimmt, wie Objekte auf der Arbeitsfläche angezeigt werden.

Wir verschieben die Ebene „Korken“ unter die Ebene „Flasche“, sodass nur der obere Teil des Korkens zu sehen ist und es so aussieht, als würde er in der Flasche stecken. Wähle die Ebene „Korken“ aus und ziehe sie nach unten unter die Ebene „Flasche“. Nachdem die Ebene verschoben wurde, klicke auf , um sie zu sperren.

Glanzlichter hinzufügen

Unsere Flasche mit dem Zaubertrank ist fast fertig. Es fehlen nur noch ein paar Glanzlichter, um sie realistischer wirken zu lassen.

Füge der Arbeitsfläche zwei Rechtecke hinzu und ändere die Größe des einen auf 20 x 10 und des anderen auf 40 x 10. Mithilfe der Einstellung Corner radius (Eckradius) im Design-Tab kannst du die Ecken des Rechtecks auf 20 abrunden.

Wähle für die Füllung beider Rechtecke #F2F2FF und verschiebe sie auf den Flaschenrand. Wähle beide Rechtecke aus und gruppiere sie mit der folgenden Tastenkombination:

• macOS: Command + G
• Windows: Strg + G

Benenne die Ebene in "Glanzlicht" um und sperre sie.

(Optional) Deine Illustration einem Rahmen hinzufügen und exportieren

Falls du deine Illustration aus Figma exportieren möchtest, kannst du deine Ebenen einem Rahmen hinzufügen. Rahmen sind eine der Hauptkomponenten von Figma. Genauso wie mit Gruppen kannst du mithilfe von Rahmen all deine Designelemente an einem Ort organisieren.

Du kannst mit dem Rahmenwerkzeug in der Symbolleiste einen neuen Rahmen hinzufügen und Inhalte hineinziehen, oder du kannst vorhandene Objekte direkt auswählen und in einen Rahmen umwandeln. Wir wählen hier die zweite Option.

Entsperre deine Ebenen und ziehe den Cursor über deine Illustration, um alle Ebenen auszuwählen. Sobald alle ausgewählt wurden, klicke mit der rechten Maustaste und wähle Frame Selection (Rahmenauswahl). Deine vier einzelnen Ebenen sind unter einer Ebene mit dem Namen „Frame 1“ verschachtelt. Wenn du auf den Pfeil neben dem Namen klickst, siehst du, dass die benannten Ebenen weiterhin vorhanden sind und einzeln ausgewählt und bearbeitet werden können. Benenne die neue Ebene in „Zaubertrank“ um.

Wenn du deine Illustration exportieren möchtest, wähle die Ebene „Zaubertrank“ und verwende die Exporteinstellungen in der rechten Seitenleiste, um das Design zu exportieren.

Nächste Schritte

Herzlichen Glückwunsch! Mit nur wenigen einfachen Formen hast du in Figma eine Illustration eines Zaubertranks erstellt. Wenn du auf der Suche nach einer weiteren Herausforderung bist, versuche dich an der Illustration des Bärs unten. Sie wurde mit genau denselben Werkzeugen erstellt, die wir in diesem Projekt kennengelernt haben. Wenn du besonders stolz auf deine Illustration bist, teile sie mit der Figma Community.

Wir können es kaum erwarten, deine nächste Illustrationen zu sehen!