Logo-Design mit Figma: Die ultimative Schritt-für-Schritt-Anleitung

Figma ist längst nicht mehr nur ein Werkzeug für UI/UX-Design. Dank seiner präzisen Vektor-Werkzeuge, der intuitiven Bedienung und der cloudbasierten Zusammenarbeit eignet es sich hervorragend, um professionelle, skalierbare Logos zu entwerfen.

In diesem Tutorial lernst du Schritt für Schritt, wie du von der leeren Arbeitsfläche zu einem fertigen, exportierbaren Logo gelangst.

Schritt 1: Vorbereitung und Arbeitsbereich einrichten

Ein strukturierter Start spart später viel Zeit.

1. Neues Dokument erstellen: Öffne Figma und klicke auf „New design file“.
2. Einen Frame anlegen: Drücke die Taste F und erstelle auf der Arbeitsfläche einen quadratischen Frame (z. B. 1000 × 1000 Pixel). Ein quadratisches Format eignet sich perfekt für Logos, da es Raum für Bildmarken und App-Icons bietet.
3. Arbeitsbereich benennen: Benenne den Frame in der Ebenen-Leiste links z. B. in „Logo – Entwurf“ um.

Schritt 2: Recherche, Skizzen und Moodboard

Bevor du Vektoren zeichnest, solltest du Ideen sammeln. Figma eignet sich ideal als digitales Whiteboard.

1. Inspiration sammeln: Ziehe Bilder, Farbmuster oder Screenshots per Drag-and-drop direkt auf die freie Arbeitsfläche neben deinen Frame.
2. Skizzen digitalisieren: Wenn du Ideen auf Papier vorgezeichnet hast, fotografiere sie mit dem Smartphone ab und füge das Bild in Figma ein.
3. Skizze sperren: Skaliere deine Skizze auf den Frame, reduziere die Deckkraft (Opacity) auf ca. 30 % und sperre die Ebene mit Strg + Shift + L (Windows) bzw. Cmd + Shift + L (Mac), damit sie beim Nachzeichnen nicht verrutscht.

Schritt 3: Die Bildmarke mit Vektoren konstruieren

Ein gutes Logo basiert meist auf einfachen geometrischen Formen. Nutze Figmas Vektor-Tools, um präzise Formen zu bauen.

1. Grundformen nutzen

• Drücke R für ein Rechteck oder O für eine Ellipse (Kreis).
• Halte beim Ziehen die Shift-Taste gedrückt, um perfekte Kreise oder Quadrate zu erzeugen.

2. Boolesche Operationen (Boolean Groups)

Kombiniere einfache Formen, um komplexe Icons zu erstellen. Markiere zwei oder mehr überlappende Formen und wähle oben in der Mitte der Menüleiste eine Option:

• Union: Verschmilzt Formen zu einer Einheit.
• Subtract: Zieht die obere Form von der unteren ab (perfekt für Ausstanzungen).
• Intersect: Behält nur die Schnittmenge bei.
• Exclude: Löscht die Schnittmenge.

3. Das Vektor-Werkzeug (Pen Tool)

Für freiere Formen drücke die Taste P.

• Klicke, um Eckpunkte zu setzen; klicke und ziehe, um Kurven (Bézier-Kurven) zu erzeugen.
• Figma-Vorteil (Vector Networks): Im Gegensatz zu traditionellen Programmen wie Illustrator kannst du in Figma Linien von jedem bestehenden Vektorknotenpunkt in jede Richtung abzweigen lassen.
• Drücke Enter, um in den Vektor-Bearbeitungsmodus zu gelangen, oder doppelklicke auf die Form.

Tipp: Gestalte dein Logo im ersten Durchgang immer rein in Schwarz-Weiß. Ein Logo funktioniert nur dann wirklich, wenn es ohne Farbe lesbar und aussagekräftig bleibt.

Schritt 4: Typografie (Wortmarke) hinzufügen

Die Wahl der richtigen Schriftart verleiht dem Logo seinen Charakter.

1. Drücke T und klicke in den Frame, um den Firmennamen zu schreiben.
2. Wähle im rechten Menü (Text) die passende Schriftart:
   • Serifenlos (Sans Serif): Modern, klar, technisch.
   • Serifen (Serif): Elegant, traditionell, hochwertig.
3. Kerning & Laufweite (Letter Spacing): Passe den Buchstabenabstand an. Gerade bei Großbuchstaben (Versalien) wirkt eine leicht erhöhte Laufweite (z. B. 5% bis 10%) oft sehr professionell.
4. Text in Pfade umwandeln: Sobald du final zufrieden bist, dupliziere den Text (zur Sicherung) und drücke beim Original Strg + Shift + O (Win) bzw. Cmd + Shift + O (Mac) (Flatten/Create Outlines). Dadurch wird der Text zu einer Vektorgrafik und ändert sich auch dann nicht, wenn die Schriftart auf einem anderen Computer fehlt.

Schritt 5: Farbe und visuelle Hierarchie

1. Farbpalette festlegen: Wähle maximal 2–3 Kernfarben.
2. Farben anwenden: Wähle ein Element aus und klicke im rechten Menü unter „Fill“ auf das Farbfeld, um den Farbton einzustellen.
3. Farb-Stile definieren: Wenn du eine Kernfarbe hast, klicke neben „Fill“ auf das Vier-Punkte-Icon und dann auf das „+“, um den Farbton als Color Style (z. B. „Primary Brand Color“) zu speichern. So kannst du ihn überall konsistent nutzen.

Schritt 6: Feinschliff und Varianten anlegen

Erstelle von deinem finalen Logo verschiedene Versionen für unterschiedliche Anwendungsfälle.

Erstelle jeweils einen eigenen Frame für:

• Primary Logo: Bildmarke und Schriftzug nebeneinander (Querformat).
• Stacked Logo: Bildmarke über dem Schriftzug (Zentriert/Kompakt).
• Icon / Favicon: Nur die Bildmarke (für Browser-Tabs, Social Media Profilbilder).
• Dark- & Light-Mode-Varianten: Kehre für dunkle Hintergründe die Farben entsprechend um (z. B. weiße Schrift statt schwarzer Schrift).

Schritt 7: Exportieren der Logo-Dateien

Professionelle Logos müssen in verschiedenen Formaten vorliegen, um im Druck und im Web einwandfrei zu funktionieren.

1. Wähle den gewünschten Frame oder die gruppierte Logo-Ebene aus.
2. Gehe ganz unten im rechten Bedienfeld auf den Reiter „Export“.
3. Klicke auf das „+“ und lege folgende Export-Formate an:
   • SVG: Wichtig für Webseiten-Entwickler (stufenlos skalierbar, minimale Dateigröße). Achte darauf, in den erweiterten SVG-Einstellungen (Drei-Punkte-Menü) „Outline Text“ aktiviert zu lassen.
   • PNG (2x & 4x): Für hochauflösende Rasterbilder mit transparentem Hintergrund (z. B. für Präsentationen oder Social Media).
   • PDF: Ideal, um das Logo für den Druck an Dienstleister weiterzugeben.
4. Klicke auf den Button „Export [Name des Frames]“.

Wichtige Figma-Shortcuts für Logo-Designer im Überblick