So gestalten Sie eine Landingpage in Figma

Eine Landingpage in Figma zu erstellen, kann für Einsteiger schwierig wirken, aber wenn Sie lernen, wie es geht, wird es ziemlich einfach und sogar angenehm! Die neue Version von Figma konzentriert sich darauf, die Nutzung, die Zusammenarbeit und das Erstellen schöner Layouts zu erleichtern. Das bedeutet, dass Sie eine komplette Landingpage erstellen können, ohne komplizierte Software zu benötigen.

In diesem Tutorial wird ausgehend von einer leeren Datei ein vollständiges Landingpage-Design entwickelt. Das Design wird in Konzeptphase, Aufteilung in Abschnitte, Abstände, Grid-Implementierung, Hinzufügen von Bildern und Vorbereitung des Designs für die Übergabe unterteilt. Jeder einzelne Schritt ist gut umsetzbar und wird anhand dessen gezeigt, was in Figma möglich ist.

Sie benötigen keine Designerfahrung, um dem zu folgen. Die Idee ist, Schritt für Schritt langsam vorzugehen und zu sehen, wie sich Ihr Design im Verlauf verändert.

Bevor Sie starten – verstehen Sie, was eine Landingpage ist

Eine Landingpage ist eine einfache Webseite, die nur ein primäres Ziel verfolgt. Dazu können Ziele gehören wie:

• Registrierungen zu erhalten
• ein Produkt zu bewerben
• Leads zu sammeln
• oder Nutzerinnen und Nutzer dazu zu bewegen, auf einen Button zu klicken

Während eine vollständige Website aus mehreren Seiten besteht, ist eine Landingpage normalerweise kurz und geradlinig. Deshalb ist auch das Layout-Design eher einfach.

Eine typische Landingpage besteht immer aus:

• einem Header mit Navigation
• einem Hauptbotschaftsbereich (Hero)
• einigen Vorteilen oder Features
• einem starken Call-to-Action
• einem kleinen Footer

Wenn Sie dieses Muster erkennen, wird das Design deutlich einfacher.

Mit Intention designen, bevor Sie mit dem Layout beginnen

Bevor Sie in die eigentliche Designarbeit einsteigen, hilft es, eine Landingpage als geführte Reise zu betrachten und nicht nur als eine Ansammlung platzierter Abschnitte auf einem Bildschirm. Jede Person, die Ihre Seite besucht, versucht etwas zu verstehen: was das Produkt ist, warum es wichtig sein könnte und ob es für sie nützlich ist. Wenn Sie in Figma designen, rahmen Sie diese Reise durch Layout, Abstände und Struktur. Deshalb ist es sehr wichtig, Klarheit, Lesefluss und Einfachheit im Voraus zu berücksichtigen.

Stellen Sie sich ein paar grundlegende Fragen: Was ist die Hauptbotschaft, die Nutzerinnen und Nutzer zuerst verstehen sollen? Welche Aktion sollen sie bis zum Ende der Seite ausführen? Welche Teile sind essenziell und welche optional? Sobald diese Fragen klar sind, designen Sie mit Intention, statt unterwegs zu raten. Auf diese Weise vermeiden Sie auch Unordnung oder unnötige Visuals. Eine Landingpage funktioniert am besten, wenn jedes Element einen klaren Zweck hat – sei es eine Headline, ein Button oder ein Bild neben dem Text.

Schritt 1 – Figma öffnen und eine neue Datei erstellen

Öffnen Sie Figma und melden Sie sich in Ihrem Konto an. Klicken Sie im Dashboard auf New design file. Dadurch wird eine leere Arbeitsfläche geöffnet.

Sie können sich die Arbeitsfläche wie ein großes weißes Blatt vorstellen, auf dem Sie Ihr Seitenlayout aufbauen. In dieser Phase ist noch nichts gestaltet – das ist völlig in Ordnung. Erstellen Sie zunächst einfach den Raum, in dem Ihr Design später „lebt“.

Wenn Sie neu in Figma sind, machen Sie sich noch nicht zu viele Gedanken über Tools oder Funktionen. Gewöhnen Sie sich erst an den Workspace.

Schritt 2 – Einen Desktop-Frame für das Seitenlayout erstellen

Meistens werden Landingpages primär für Desktop erstellt. So richten Sie den Workspace ein:

1. Verwenden Sie das Frame-Tool (F).
2. Wählen Sie im rechten Panel Desktop (1440 px).
3. Ein Frame erscheint und zeigt die Breite Ihrer Webseite an.

Benennen Sie ihn in etwas wie Landing Page – Desktop um, damit es leicht verständlich ist. Das ist hilfreich, wenn später mehrere Frames hinzukommen.

Schritt 3 – Ein 12-Spalten-Layout-Grid hinzufügen

Ein ordentliches Grid sorgt dafür, dass Abstände zwischen Objekten konsistent bleiben. Es hilft bei der sauberen Positionierung von Elementen und verhindert unstrukturierte Layouts.

1. Markieren Sie zuerst den Frame.
2. Wählen Sie rechts die Option Layout Grid.
3. Als Grid-Typ verwenden Sie Column.
4. Richten Sie das Grid mit 12 gleich breiten Spalten sowie identischen Margins und Gutter ein.

Die meisten Landingpages verwenden ein 12-Spalten-Grid, da es sich am besten für responsive Designs eignet.

Schritt 4 – Die Abschnitte der Landingpage planen

Gute Landingpages folgen einem logischen Ablauf. Bevor Sie etwas platzieren, entscheiden Sie über die Hauptabschnitte. Eine einfache Struktur ist:

1. Header (Logo + Navigation + Action-Button)
2. Hero-Bereich (Headline + Text + Hauptbild)
3. Features oder Vorteile
4. Testimonials oder Social Proof
5. Call-to-Action-Bereich
6. Footer

Vorab zu planen verhindert spätere Verwirrung und gibt der Seite eine klare Story.

Schritt 5 – Den Header-Bereich gestalten

Der Header ist der erste Abschnitt oben auf Ihrer Webseite. Ihr Hauptziel sollte sein, ihn schlicht und übersichtlich zu halten.

Gehen Sie nun Schritt für Schritt wie folgt vor:

1. Wählen Sie das Rectangle-Tool
2. Erstellen Sie ganz oben im Frame ein schmales Rechteck
3. Dieses Rechteck ist der Hintergrund des Headers

Als Nächstes fügen Sie das Logo hinzu:

1. Wählen Sie das Text-Tool
2. Klicken Sie auf den linken Bereich des Headers
3. Geben Sie den Namen Ihres Logos ein (zum Beispiel „BrandName“)
4. Erhöhen Sie die Schriftgröße, sodass es wie ein Logo wirkt

Danach fügen Sie Menülinks hinzu:

1. Verwenden Sie erneut das Text-Tool
2. Erstellen Sie einfache Links wie „Home“, „Features“, „Pricing“, „Contact“
3. Positionieren Sie sie in einer Linie mit Abständen dazwischen
4. Richten Sie sie leicht mittig oder rechts aus

Anschließend fügen Sie den Button hinzu:

1. Zeichnen Sie rechts ein kleines Rechteck
2. Runden Sie die Ecken nur leicht ab
3. Platzieren Sie darüber einen Text wie „Get Started“
4. Zentrieren Sie den Text im Button
5. Verwenden Sie Ihre Hauptfarbe als Füllfarbe des Buttons

Der Header sollte ordentlich wirken und nicht überladen sein.

Schritt 6 – Den Hero-Bereich erstellen

Der Hero-Bereich ist der auffälligste Bereich direkt nach dem Header. Hier können Nutzerinnen und Nutzer schnell den Überblick verlieren, auf welcher Seite sie sind.

Führen Sie die folgenden Schritte genau aus:

1. Lassen Sie unter dem Header etwas Platz
2. Wählen Sie das Text-Tool
3. Klicken Sie in den linken Bereich der Seite
4. Geben Sie Ihre Hauptüberschrift (großer Titel) ein, zum Beispiel: „Design Better with Our Tool“

Formatieren Sie die Überschrift wie folgt:

1. Erhöhen Sie die Schriftgröße
2. Machen Sie sie fett
3. Nutzen Sie wenige Worte und vermitteln Sie eine klare Aussage

Als Nächstes fügen Sie unterstützenden Text hinzu:

1. Erstellen Sie unter der Überschrift ein weiteres Textfeld
2. Erklären Sie es in einfachen Worten, zum Beispiel: „Using our platform, design modern things fast and easy.“

Jetzt platzieren Sie einen primären Button:

1. Zeichnen Sie unter dem Text ein Rechteck
2. Schreiben Sie „Start Free Trial“ als Button-Text
3. Verwenden Sie die Hauptfarbe Ihrer Marke für den Button
4. Der Button sollte rundum gleichmäßige Margins haben

Nun platzieren Sie das Hauptbild:

1. Auf der rechten Seite des Hero-Bereichs
2. Zeichnen Sie ein Rechteck oder einen Platzhalter-Frame
3. Fügen Sie ein Bild ein oder lassen Sie es als Platzhalter

Stellen Sie sicher, dass Text und Bild sich nicht überlappen.

Schritt 7 – Den Features-Bereich mit einfachen Karten aufbauen

Scrollen Sie nach unten und beginnen Sie den nächsten Abschnitt – Features.

Gehen Sie dabei in einer einfachen Reihenfolge vor:

1. Erstellen Sie eine große Überschrift mit „Features“
2. Erstellen Sie darunter mehrere Rechtecke als Feature-Karten
3. Fügen Sie in jede Karte ein:
   • Ein kleines Icon oder einen Platzhalter
   • Einen kurzen Titel
   • Eine Zusammenfassung in zwei Zeilen

Verteilen Sie die Karten gleichmäßig.
Packen Sie nicht zu viel Text hinein.

Schritt 8 – Icons zu jedem Feature hinzufügen

Icons helfen Nutzerinnen und Nutzern, Features zu visualisieren.

Folgen Sie diesen Schritten:

1. Importieren Sie Icons oder verwenden Sie einfache Platzhalter
2. Platzieren Sie das Icon oben in jeder Karte
3. Stellen Sie sicher, dass
   • alle Icons dieselbe Größe haben.
   • denselben Stil
   • dieselbe Ausrichtung

Mischen Sie keine unterschiedlichen Icon-Stile.

Schritt 9 – Den Testimonials-Bereich erstellen

Dieser Abschnitt schafft Vertrauen.

Gehen Sie in dieser Reihenfolge vor:

1. Fügen Sie die Überschrift hinzu: Der Titel sollte „What Our Users Say“ lauten.
2. Erstellen Sie 2–3 Testimonials
3. Fügen Sie in jedes Feld ein:
   • Ein rundes Foto oder einen Platzhalter
   • Ein kurzes Zitat
   • Nutzername und Nutzerrolle

Verwenden Sie einen dezenten Hintergrund oder leichte Schatten, damit die Karten subtil hervorgehoben werden.

Schritt 10 – Den Call-to-Action-Bereich erstellen

Hier fordern Sie Nutzerinnen und Nutzer zu einer Aktion auf. Anschließend führen sie die Aktion aus.

Sehen Sie es sich sorgfältig an:

1. Zeichnen Sie ein breites Rechteck als Hintergrund des Abschnitts
2. Fügen Sie einen kurzen Text hinzu, z. B. “Ready to get started?”
3. Platzieren Sie einen großen Button unter dem Text.
4. Verwenden Sie Ihre Primärfarbe für den Button
5. Halten Sie hier nur eine klare Aktion fest.

Schritt 11 – Den Footer gestalten

Der Footer ist der letzte Abschnitt.

Schritte:

1. Erstellen Sie einen rechteckigen Footer-Bereich
2. Fügen Sie hinzu:
   • Logo oder Name
   • Nützliche Links in Spalten
   • E-Mail oder Support-Text

Verwenden Sie im Footer eine kleinere Schriftgröße.

Schritt 12 – Auto Layout für saubere Abstände verwenden

Wählen Sie Gruppen aus, z. B. Karten, Buttons und Listen, und wandeln Sie sie in Auto Layout um.

Das hilft Ihnen dabei:

• konsistente Abstände zu halten.
• Padding automatisch anzupassen
• Inhalte leicht neu anzuordnen

Auto Layout macht das Design automatisch skalierbar, wenn Sie später weitere Elemente hinzufügen.

Schritt 13 – Constraints für responsives Layout-Verhalten anwenden

Wenn sich die Frame-Größe ändert, legen Constraints fest, wie sich Elemente verhalten. Constraints halten das Layout konsistent. Ich stelle fest, dass Elemente den durch Constraints gesetzten Regeln folgen.

Beispiele:

• Logo links fixiert
• Navigation rechts fixiert
• Buttons zentriert oder an einer festen Position platziert.

Dieser Schritt bereitet Ihr Design auf die Übergabe an die Entwicklung vor.

Schritt 14 – Die Landingpage im Präsentationsmodus ansehen

Klicken Sie auf Present, um den Preview-Modus zu öffnen.

Damit können Sie:

• das Design wie eine echte Webseite ansehen
• Scrollen testen
• Einen Preview-Link mit anderen teilen

Nutzen Sie diesen Modus, um Abstands- oder Lesbarkeitsprobleme zu erkennen.

Schritt 15 – Finale Qualitätsprüfung

Machen Sie einen finalen Durchgang und fragen Sie sich:

• Werden die Nuancen vermittelt?
• Ist der primäre Call-to-Action leicht zu finden?
• Sind die Abschnitte visuell verbunden, aber nicht überladen?
• Ist alles am Grid ausgerichtet?
• Sind Farben und Typografie konsistent?

Wenn die Antwort ja ist, ist der Landingpage-Designprozess abgeschlossen.

So könnte die fertige Landingpage aussehen:

Die Seite als vollständige User Journey bewerten

Nachdem Sie die Seite gestaltet und jeden Aspekt der Landingpage ausgearbeitet haben, ist es eine gute Praxis, einen Schritt zurückzutreten und das Ergebnis von oben nach unten zu bewerten. Statt die Seite aus einer granularen Perspektive oder komponentenweise zu betrachten, ist es hilfreich, die Seite als fließendes Erlebnis von oben nach unten zu durchlaufen.

Lesen Sie die Texte langsam, scrollen Sie nach unten und prüfen Sie, ob die Seite natürlich wirkt und sich leicht konsumieren lässt. Prüfen Sie, ob die Hero-Botschaft zu den Features passt und ob die Testimonials die Versprechen bestätigen, die weiter oben auf der Seite gemacht wurden.

In dieser Evaluationsphase können Sie Ablenkungen erkennen – Dinge, die ins Auge fallen, aber keinen Mehrwert bringen. Sie werden Punkte finden, an denen Sie Konzepte entfernen oder vereinfachen können, wodurch die Seite besser wird.

Fazit

Ein Landingpage-Designprozess in Figma kann mit einem organisierten Schritt-für-Schritt-Vorgehen reibungslos ablaufen.

Zuerst erstellen Sie Ihren Frame und Ihr Grid-System, dann fügen Sie systematisch jedes Element zu Ihrer Landingpage hinzu: Header, Hero, Features, Testimonials, Call-to-Action und schließlich den Footer. Während Sie diese Schritte ausführen, treffen Sie Entscheidungen zu Typografie, Farbe, Platzierung und Ausrichtung, um sicherzustellen, dass Ihre Landingpage sauber und professionell wirkt. Im Kern fügen Sie nicht nur Elemente hinzu, sondern lenken die Aufmerksamkeit dorthin, wo die Besucherin oder der Besucher hinschauen soll.

Wenn Sie mit dem Layout fertig sind, prüfen, verfeinern und exportieren Sie es oder geben es an Entwicklerinnen und Entwickler weiter. Sobald Sie diese Schritte beherrschen, können Sie Designs nicht nur für Landingpages erstellen, sondern auch einen wiederholbaren Plan für zukünftige Projekte aufbauen.

Über den Autor

Anna Malik – digitale Nomadin, Enthusiastin für alles Online und in der Cloud, Produktivitätsmaniac. Sie reist um die Welt und überprüft für unseren Blog Webanwendungen und andere Ressourcen für Web-Leute.