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 Frames 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) Dein Design einem Frame hinzufügen und exportieren

Flasche erstellen

Wir werden die Flasche mit den Tools Ellipse und Rechteck sowie mithilfe einer Gruppe erstellen.

Formen hinzufügen

Du findest die Formen-Tools 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 das Tool Ellipse aus oder drücke die Taste [O] und klicke auf die Arbeitsfläche.
• So fügst du ein Rechteck hinzu: Wähle das Rechteck-Tool aus oder drücke [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 Breite und 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ählen Sie das Rechteck aus und geben Sie „10“ in das Feld Eckradius im Design-Tab 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 Ebenen-Tab 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: Befehlstaste + G
• Windows: Strg + G

Im Tab Ebenen in der linken Seitenleiste siehst du jetzt nur noch eine Ebene mit dem Namen „Gruppe 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 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 Füllung eingeben oder mit dem Farbwähler eine andere Farbe auswählen.

Nachdem du die Füllfarbe geändert hast, ist es an der Zeit, diese Ebene zu sperren. Das Sperren von Ebenen hilft zu verhindern, dass Objekte versehentlich bewegt oder geändert werden. Um diese Ebene zu sperren, wähle die Flaschenform aus und klicke auf das Icon Sperren in der linken Seitenleiste. Um eine Ebene zu entsperren, klicke auf das Icon Entsperren.

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

Zaubertrank erstellen

Ellipse hinzufügen

Verwende das Tool 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 Füllung eingeben oder mit dem Farbwähler eine andere Farbe auswählen.

Ellipse anpassen

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

Wähle die Ellipse aus und klicke in der Symbolleiste auf 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 Fertig, um den Vektorbearbeitungsmodus zu beenden. Als Nächstes fügen wir ein paar Blasen hinzu.

Blasen mit dem Ellipsen-Tool hinzufügen

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

Ziehe das Tool Ellipse, 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: Befehlstaste + G
• Windows: Strg + G

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

Korken erstellen

Mit dem Tool Rechteck erstellen wir einen Korken.

Füge der Arbeitsfläche ein Rechteck hinzu und ändere seine Größe auf 75 x 75. Verwende die Einstellung 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 zwei Rechtecke auf der Arbeitsfläche hinzu und ändere die Größe des einen in 20 x 10 und die des anderen in 40 x 10. Verwende die Einstellung Eckradius im Design-Tab, um die Ecken beider Rechtecke auf 20 abzurunden.

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: Befehlstaste + G
• Windows: Strg + G

Benenne die Ebene in „Glanzlicht“ um und sperre sie.

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

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

Du kannst mit dem Tool Frame in der Symbolleiste einen neuen Frame hinzufügen und Inhalte hineinziehen, oder du kannst vorhandene Objekte direkt auswählen und in einen Frame umwandeln. Lass uns die zweite Option nehmen.

Entsperre deine Ebenen und ziehe den Cursor über deine Illustration, um alle auszuwählen. Sobald alles ausgewählt ist, klicke mit der rechten Maustaste und wähle Auswahl umrahmen. Deine vier einzelnen Ebenen sind unter einer Ebene namens „Frame 1“ verschachtelt. Wenn Sie auf den Pfeil neben dem Namen klickst, siehst du, dass die benannten Ebenen noch existieren und weiterhin 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“ aus und verwende die Exporteinstellungen in der rechten Seitenleiste, um dein Design zu exportieren.

Nächste Schritte

Herzlichen Glückwunsch! Mit nur wenigen Formen hast du in Figma einen Zaubertrank illustriert. Wenn du eine weitere Herausforderung suchst, versuche, die Bärenillustration unten nachzubilden. Sie wurde mit genau denselben Tools erstellt, die wir in diesem Projekt kennengelernt haben. Wenn du etwas erstellst, auf das du besonders stolz bist, teile es der Figma Community mit.

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