Pixel Art in Figma Design erstellen

In diesem Projekt erstellen wir Pixel Art in Figma Design.

Pixel Art ist eine witzige Form der digitalen Kunst, bei der Pixel die Grundlage bilden. Du brauchst für dieses einsteigerfreundliche und nahezu jedermann zugängliche Medium keine Zeichenerfahrung.

Pixel Art ermöglicht dir beispielsweise, lustige Illustrationen, Kreuzstichmuster oder Animationen in Retro-Optik zu erstellen. In diesem Projekt kannst du dich mit der Verwendung von Layout- und Pixelrastern vertraut machen. Dies sind wichtige Werkzeuge für präzise Designs.

Wir illustrieren in diesem Projekt ein Pixelherz, was die folgenden Schritte erfordert:

1. Rahmen hinzufügen
2. Layout- und Pixelraster konfigurieren
3. Farbpalette erstellen
4. Umriss des Herzes erstellen
5. Herz ausfüllen

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

Rahmen hinzufügen

Beginnen wir mit dem Erstellen eines Rahmens.

1. Klicke in der Symbolleiste auf das Rahmenwerkzeug oder drücke die Taste F.
2. Klicke auf die Arbeitsfläche. Figma fügt standardmäßig einen Rahmen mit 100 x 100 (B x H) ein. Alle hinzugefügten Rahmen werden dem Layers-Tab (Ebenen) in der linken Seitenleiste hinzugefügt.
3. Ändere im Design-Tab in der rechten Seitenleiste die Breite in 120 und die Höhe in 110.

Hier erstellen wir das Pixelherz. Um sicherzustellen, dass das Herz gleichmäßig wird, aktivieren wir ein Layoutraster für den Rahmen.

Layout- und Pixelraster konfigurieren

Layoutraster erleichtern es dir, Objekte innerhalb eines Rahmens auszurichten. Außerdem bieten sie eine visuelle Struktur, um logische Designs zu erstellen, die auf unterschiedlichen Plattformen und Geräten in konsistenter Form angezeigt werden.

Um ein Layoutraster zu aktivieren, wähle den soeben erstellten Rahmen aus und klicke auf das Pluszeichen neben Layout grid (Layoutraster) in der rechten Seitenleiste. Daraufhin wird im Rahmen ein rotes Raster angezeigt. Klicke auf Layout grid settings (Layoutraster-Einstellungen), um die Einstellungen des Layoutrasters zu öffnen. Stelle sicher, dass die Rastergröße 10 ist. Du kannst hier nach Wunsch auch die Rasterfarbe und die Deckkraft ändern.

Wenn du die Anzeige vergrößerst, siehst du, dass jedes Quadrat des Rasters 10 x 10 Pixel groß ist. Das ist perfekt, da wir als Bausteine 10 x 10-Quadrate verwenden.

Mithilfe des Layoutrasters kannst du visuell prüfen, ob alles richtig ausgerichtet ist. Noch genauer wird es, wenn wir das Pixelraster verwenden.

Mit der folgenden Tastenkombination kannst du das Pixelraster ein- oder ausblenden:

• Mac: ⌘-Befehlstaste + ‘
• Windows: Strg + ‘

Siehst du den Unterschied?

Stelle hier auch gleich sicher, dass die Einstellung Snap to pixel grid (Am Pixelraster ausrichten) aktiviert ist, um es noch einfacher zu machen, Objekte an der richtigen Stelle zu platzieren. Klicke auf das Hauptmenü, bewege den Mauszeiger über Preferences (Einstellungen) und vergewissere dich, dass neben der Option Snap to pixel grid (Am Pixelraster ausrichten) ein Häkchen angezeigt wird.

Farbpalette erstellen

Für unser Herz verwenden wir Quadrate in der Größe 10 x 10. Um in der Arbeitsfläche ein Quadrat hinzuzufügen, wähle in der Seitenleiste das Rechteckwerkzeug aus oder drücke die Taste R und klicke auf die Arbeitsfläche.

Figma fügt standardmäßig ein Quadrat mit 100 x 100 (B x H) hinzu. Du kannst die Größe des Quadrats ändern, indem du wahlweise auf einen Griff klickst und diesen bei gedrückter Umschalttaste ziehst oder indem du die gewünschten Abmessungen im Design-Tab in die Felder Width (Breite) und Height (Höhe) eingibst. Ändere die Quadratgröße mit einer der Methoden in 10 x H (B x H).

Damit haben wir den ersten Baustein erstellt. Da das Herz vier Farben haben soll, dupliziere diesen Block, um die Farbpalette griffbereit zu haben. Wähle das Quadrat aus und verwende die Tastenkombination zum Duplizieren:

• Mac: ⌘-Befehlstaste + D
• Windows: Strg + D

Das duplizierte Quadrat wird standardmäßig unmittelbar oberhalb des ursprünglichen Quadrats platziert. Ziehe es zur Seite und dupliziere es noch zweimal. Ordne alle vier Quadrate über dem Rahmen an.

Damit das Herz bunt wird, änderst du die standardmäßig graue Farbe. Wähle hierfür ein Quadrat nach dem anderen aus und ändere mithilfe der Einstellung Fill (Füllen) in der rechten Seitenleiste die Füllung wie folgt:

• Quadrat 1 (Umrissfarbe): C771D3
• Quadrat 2 (Füllfarbe): F5C0EF
• Quadrat 3 (Schattenfarbe): E99BF4
• Quadrat 4 (Hervorhebungsfarbe): FAE4F8

Benenne die Quadrate der Farbpalette ordnungshalber entsprechend ihrem Verwendungszweck. Doppelklicke in der linken Seitenleiste auf den Namen der Ebene oder verwende die folgende Tastenkombination, um für jedes Quadrat einen neuen Namen einzugeben:

• Mac: ⌘-Befehlstaste + R
• Windows: Strg + R

Die Farbpalette ist damit fertig. Jetzt können wir mit dem Umriss des Herzes beginnen.

Umriss des Herzes erstellen

Wähle in deiner Farbpalette das Farbquadrat für den Umriss aus und dupliziere es mit der entsprechenden Tastenkombination. Ziehe das neue Quadrat in den Rahmen. Da du Snap to pixel grid (An Pixelraster ausrichten) aktiviert hast, wird das Quadrat am Pixelraster und damit auch am Layoutraster ausgerichtet. Platziere den Block in der sechsten Spalte in der untersten Reihe. Platziere anschließend fünf weitere Blöcke in einer diagonalen Linie nach links oben. Statt jedes Quadrat neu zu erstellen, dupliziere das vorhandene Quadrat mit derselben Tastenkombination wie zuvor.

Klicke auf das Quadrat und ziehe es eine Zeile nach oben und eine Spalte nach links. Achte darauf, dass es am Layoutraster ausgerichtet ist. Während das zweite Quadrat weiterhin ausgewählt ist, verwende erneut die Tastenkombination zum Duplizieren. Nachdem du eine duplizierte Form platziert hast, geht Figma davon aus, dass du weitere Formen im selben Muster anordnen möchtest. Das neue Quadrat wird daher automatisch eine Zeile weiter oben und eine Spalte weiter links platziert. Dupliziere das Quadrat weitere vier Mal, bis du am Rand des Rahmens angelangt bist. Du siehst das Ganze auch noch mal im folgenden GIF:

Nachdem du am Rand des Rahmens angelangt bist, dupliziere die Quadrate weiter und ordne sie im folgenden Muster an:

1. Drei Quadrate nach oben
2. Ein Quadrat nach oben und rechts
3. Ein Quadrat nach oben und rechts
4. Zwei Quadrate nach rechts
5. Ein Quadrat noch unten und rechts

Das Bild sollte am Ende so aussehen:

Du könntest jetzt weiter Quadrate duplizieren, um den Umriss fertigzustellen. Hier kannst du dir Zeit sparen, indem du die ganze Herzhälfte duplizierst.

Damit dies funktioniert, gruppierst du die bereits im Rahmen platzierten Quadrate. In Gruppen kannst du Ebenen kombinieren, sodass sie als ein Objekt behandelt werden.

Klicke mit der Maus und ziehe mit dem Cursor um alle angezeigten Quadrate einen Rahmen. Verwende dann die Tastenkombination:

• Mac: ⌘-Befehlstaste + G
• Windows: Strg + G

Im Layers-Tab (Ebenen) in der linken Seitenleiste wird jetzt nur eine Ebene namens “Group 1” (Gruppe 1) angezeigt. Klicke auf die Gruppe und verwende erneut die Tastenkombination zum Duplizieren, um eine zweite Gruppe hinzuzufügen. Wähle “Group 1” (Gruppe 2) aus, klicke mit der rechten Maustaste auf die Gruppe und wähle Flip horizontal (Horizontal spiegeln) aus. Ziehe die zweite Umrisshälfte an die gewünschte Position und richte sie mithilfe der roten Linien an der ersten Hälfte aus. Wähle dann beide Gruppen und füge diese anschließend mit der Tastenkombination zum Gruppieren zu einer Gruppe zusammen.

Du siehst das Ganze auch noch mal im folgenden GIF:

Doppelklicke auf die neue Ebene “Group 3” (Gruppe 3) und benenne sie in “Outline” (Umriss) um. Damit ist diese Ebene fertig, und du kannst sie sperren. Indem du Ebenen sperrst, verhinderst du, dass Objekte versehentlich verschoben oder geändert werden. Wähle zum Sperren die Umrissebene aus und klicke in der linken Seitenleiste auf das Schloss-Symbol. Um die Ebene später wieder zu entsperren, klickst du einfach erneut auf das Schloss-Symbol.

Nachdem der Umriss fertig ist, kommt jetzt die Füllung.

Herz ausfüllen

Verwende mit der Tastenkombination zum Duplizieren das Quadrat mit der Füllfarbe aus deiner Farbpalette. Ziehe das neue Quadrat in den Rahmen.

Nun brauchst du das Quadrat nur noch so lange zu duplizieren, bis das Innere des Herzens gefüllt ist.

Damit ist das Herz im Prinzip fertig. Jetzt können wir es mit Schatten und Hervorhebungen noch etwas aufpeppen.

Um den Schatten hinzuzufügen, wählst du Blöcke entlang der linken Seite der Füllung aus. Du kannst mehrere Blöcke gleichzeitig auswählen, indem du dabei die Umschalttaste gedrückt hältst. Wähle die unten im Bild gezeigten Blöcke aus und ändere den Code der Füllfarbe in E99BF4. Du kannst den Farbcode in das Feld Fill (Füllen) eingeben oder die Taste I drücken, um den Eyedropper zu aktivieren und die Schattenfarbe in deiner Farbpalette auszuwählen.

Zum Abschluss heben wir auf der rechten Seite noch ein paar Blöcke hervor. Dazu änderst du den Farbcode wie oben für den Schatten beschrieben, nur diesmal in FAE4F8.

Nächste Schritte

Herzlichen Glückwunsch! Du hast soeben Pixel Art in Figma Design erstellt. Wenn du weiter üben möchtest, kannst du beispielsweise die unten dargestellte Pixelkatze nachbilden. Du kannst deine Kunstwerke auch gerne mit uns in der Figma Community teilen oder auf Twitter posten, indem du uns mit @Figma erwähnst.