Eine gute Landingpage entscheidet oft darüber, ob Besucher nur kurz schauen oder wirklich handeln – also kaufen, sich eintragen oder anfragen. Figma ist ideal, um solche Seiten schnell zu planen, zu testen und weiterzugeben. Dieser Leitfaden zeigt, wie ein durchdachtes Landingpage-Design in Figma entsteht, das klar wirkt und leicht umzusetzen ist.
Landingpage-Ziele definieren und Inhalt strukturieren
Bevor in Figma irgendetwas angelegt wird, braucht die Landingpage ein klares Ziel und eine grobe Struktur. Nur so entsteht später ein UI, das nicht überlädt, sondern führt.
Conversion-Ziel und Zielgruppe festlegen
Jede Landingpage braucht genau ein Hauptziel, zum Beispiel:
- E-Mail-Adresse einsammeln (Newsletter, Lead-Magnet)
- Verkauf eines einzelnen Produkts oder Angebots
- Anfrage über ein Formular (Beratung, Demo, Angebot)
Auch die Zielgruppe sollte klar sein: B2B oder B2C, Entscheider oder Einsteiger, Mobilnutzer oder Desktop-fokussiert. Diese Infos bestimmen Sprache, Bildwelt und Prioritäten im Layout.
Inhaltsblöcke als Basis für das Figma-Layout planen
Eine typische Landingpage besteht aus wiederkehrenden Inhaltsblöcken. Im Text lassen sich diese vorab skizzieren, zum Beispiel:
- Hero-Bereich (Headline, Unterzeile, Haupt-Call-to-Action)
- Nutzenargumente / Features
- Social Proof (Kundenlogos, Zitate, Bewertungen)
- Funktionsübersicht oder Produktdetails
- FAQ und letzte Einwände
- Abschluss-Call-to-Action
Wer bereits Texte vorbereitet, kann diese später in Figma als echte Copy einbauen. Das vermeidet Blindtexte und hilft, eine gute UX zu gestalten, weil echte Inhalte das Layout bestimmen.
Figma-Datei für Landingpages sinnvoll aufsetzen
Eine sauber strukturierte Figma-Datei erleichtert die Zusammenarbeit mit Team und Entwicklern. Sie bildet zudem die Grundlage für wiederverwendbare Komponenten und Designsysteme.
Frames, Layout-Grids und Breakpoints anlegen
Für Landingpages bieten sich in Figma eigene Frames je Viewport an, zum Beispiel:
- Desktop-Frame (z. B. 1440 px Breite)
- Tablet-Frame (z. B. 768 px Breite)
- Mobile-Frame (z. B. 390–414 px Breite)
Mithilfe von Layout-Grids mit 10–12 Spalten (Desktop) und 4 Spalten (Mobil) lassen sich Inhalte präzise ausrichten. Wer bereits mit einem Designsystem arbeitet, kann vorhandene Vorgaben übernehmen – passend dazu lohnt sich ein Blick auf Spacing im Designsystem, um Abstände konsistent zu planen.
Farb- und Text-Styles früh definieren
Bevor einzelne Module gestaltet werden, sollten in Figma globale Styles angelegt werden:
- Farb-Styles für Hintergrund, Text, Primär- und Sekundärbuttons
- Text-Styles für H1–H4, Fließtext, kleine Labels
- Evtl. Schatten- oder Radius-Styles für konsistente UI-Elemente
So entstehen nicht zehn verschiedene Grautöne oder ähnliche Schriftgrößen, sondern ein aufgeräumtes, professionelles UI. Wer tiefer in das Thema einsteigen will, findet bei Designsystem-Typografie in Figma hilfreiche Grundlagen zur Schriftplanung.
Hero-Sektion und Above-the-Fold-Bereich gestalten
Der erste sichtbare Bereich entscheidet, ob Besucher weiterscrollen. Deswegen braucht er klare Botschaften, lesbare Typografie und einen eindeutigen Call-to-Action.
Starke Headline und klare Call-to-Action in Figma umsetzen
Die Headline sollte Nutzen oder Problem lösen, nicht nur Produktnamen nennen. In Figma hilft ein großzügiger Zeilenabstand und eine deutliche Größe, damit der Text auch mobil gut lesbar bleibt. Der CTA-Button (z. B. „Jetzt testen“) sollte farblich deutlich hervorgehoben sein und ausreichend Weißraum haben.
Praktische Tipps für den Hero-Bereich:
- Maximal zwei Hauptaktionen: eine Primär- und optional eine Sekundäraktion
- Kurze Unterzeile mit zusätzlicher Erklärung
- Visuelles Element: Mockup, Illustration oder Foto, das das Angebot unterstützt
Above-the-Fold-Bereich für Mobilgeräte prüfen
In Figma lohnt es sich, zuerst die Mobilansicht zu überprüfen, weil ein großer Teil der Nutzer von dort kommt. Headline, kurzer Text und CTA sollten ohne Scrollen erkennbar sein. Beim Prototyping kann mit echten Geräten getestet werden, ob Größen und Abstände auf kleinen Bildschirmen funktionieren. Gute Responsive Webdesign-Prinzipien helfen, Layout und Typografie anzupassen, siehe auch Responsive Typografie im Webdesign.
Module, Komponenten und Varianten für Landingpages bauen
Wer wiederkehrende Module als Figma-Komponenten anlegt, spart bei jeder weiteren Landingpage viel Zeit und behält visuelle Konsistenz.
Typische Landingpage-Module als Komponenten anlegen
Geeignete Module für Komponenten sind unter anderem:
- Feature-Grid (Icon, Titel, kurzer Text)
- Kundenlogos-Sektion (Logoreihe mit einheitlicher Höhe)
- Testimonial-Karte (Zitat, Name, Funktion, Foto)
- Pricing-Boxen (Preis, Leistungen, CTA)
- FAQ-Accordion (Frage, Antwort, Auf-/Zuklapp-Icon)
In Figma können diese als Hauptkomponenten in einer eigenen Sektion „Components“ liegen. Für jede Sektion auf der Landingpage wird eine Instanz genutzt, die Texte und Bilder überschreibt, aber Layout und Stil beibehält.
Auto-Layout nutzen, um Inhalte flexibel zu halten
Mit Auto-Layout passen sich Module in Figma dynamisch an Textlängen und Viewports an. So lassen sich etwa Listen von Features ergänzen, ohne Margin-Werte ständig manuell zu korrigieren. Besonders hilfreich ist das für Card-Layouts oder Pricing-Tabellen, die später auch im Code flexibel sein sollen.
| Modul | Empfohlene Figma-Technik | Vorteil |
|---|---|---|
| Feature-Grid | Auto-Layout + Grids | Spalten leicht anpassbar |
| FAQ-Accordion | Komponenten-Varianten | Auf-/zugeklappt simulierbar |
| Testimonials | Komponenten + Text-Styles | Stil über Seiten konsistent |
| Pricing-Box | Auto-Layout, Nested Components | Leistungen schnell änderbar |
Interaktive Figma-Prototypen für Landingpages erstellen
Ein statisches Layout hilft beim Look, aber nicht beim Feeling. Ein klickbarer Prototyp zeigt, wie Navigation, Sprunglinks und Interaktionen wirken.
Scroll-Verhalten, Sprunglinks und Overlays abbilden
Für klassische Onepager-Landingpages lohnt es sich, Sprunglinks zu simulieren, etwa von einem Menüpunkt zum passenden Abschnitt. In Figma können dazu „On Click“-Verbindungen zu bestimmten Frames oder Positionen eingerichtet werden. Overlays eignen sich für:
- Formulare in Modals (z. B. Kontaktformular)
- Erweiterte FAQs oder Detailinfos
- Schnelle Hinweise, ohne die Seite zu verlassen
So lässt sich bereits im Prototyp erkennen, ob das Erlebnis rund wirkt oder Nutzer durch zu viele Layer verwirrt werden.
Microinteractions und Hover-States zeigen
Auch subtile Effekte wie Hover-States von Buttons oder Karten verbessern die UI-Wahrnehmung. In Figma können Varianten mit „Default“ und „Hover“ Zustand angelegt und mittels Interactions verbunden werden. Besonders für Entwickler ist das hilfreich, weil klar sichtbar wird, welche Zustände später umzusetzen sind. Wer sich generell mit kleinen Interaktionen beschäftigen möchte, findet in UI-Microinteractions weiterführende Ideen.
Design-Handoff und Zusammenarbeit mit Entwicklern
Die beste Landingpage in Figma nützt wenig, wenn sie im Code anders aussieht oder Funktionen verliert. Ein guter Handoff sorgt dafür, dass Layout und Interaktion sauber umgesetzt werden.
Figma-Inspects, Kommentare und Namenskonventionen nutzen
Sauber benannte Ebenen, Frames und Komponenten helfen Entwicklern beim Lesen. Sinnvoll sind:
- Klare Layer-Namen (z. B. „btn/primary“, „card/testimonial“)
- Kommentarbubbles mit Hinweisen zu Verhalten und Breakpoints
- Beachtung der in Figma verfügbaren CSS-, iOS- oder Android-Inspect-Daten
Wenn bereits ein Designsystem im Einsatz ist, sollten Komponenten und Tokens konsequent genutzt werden. Das erleichtert die spätere Pflege und Anpassung.
Landingpage-Design mit Designsystem und Code abstimmen
Für Teams, in denen Designer und Entwickler eng zusammenarbeiten, zahlt sich ein gemeinsames Verständnis von Komponenten, Tokens und Layoutregeln aus. Eine strukturierte Übergabe wird im Beitrag Design-Handoff aus Figma detailliert beschrieben. Landingpages sollten sich möglichst an bestehende Stile halten, statt ständig neue UI-Elemente zu erfinden.
So geht’s: Landingpage-Design in Figma Schritt für Schritt
Die folgenden Schritte fassen den Prozess kompakt zusammen und eignen sich als kleine Checkliste für die Praxis.
- Ziel und Zielgruppe definieren: Welche Conversion, welche Nutzer, welches Hauptversprechen?
- Inhaltsblöcke planen: Hero, Nutzen, Social Proof, Details, FAQ, finaler CTA.
- Figma-Struktur anlegen: Frames für Desktop, Tablet, Mobil plus Layout-Grids.
- Basis-Styles definieren: Farben, Text-Styles, Buttons, Abstände (Tokens oder Styles).
- Hero und Above-the-Fold gestalten: klare Headline, Unterzeile, starker CTA.
- Module als Komponenten bauen: Features, Testimonials, FAQ, Pricing-Boxen.
- Prototyping einrichten: Scroll, Sprunglinks, Overlays, Hover-States.
- Handoff vorbereiten: Ebenen sauber benennen, Kommentare setzen, Inspect nutzen.
FAQ zum Landingpage-Design mit Figma
Wie detailliert sollte das Figma-Design vor dem Launch sein?
Für erste Tests reicht oft ein High-Fidelity-Design mit klaren Modulen und klickbarem Prototyp. Pixelperfekte Details können nach ersten Nutzerfeedbacks angepasst werden. Wichtig ist, dass Struktur, Texte und CTAs klar sind und das Layout realistisch wirkt.
Wie stark sollte sich eine Landingpage an der Hauptwebsite orientieren?
Visuell sollte die Landingpage zur Marke passen: gleiche Schriften, Farben und Basis-Elemente. Gleichzeitig darf sie fokussierter, reduzierter und testfreudiger sein. In Figma lassen sich Varianten anlegen, um etwa unterschiedliche Hero-Layouts oder CTAs zu vergleichen, bevor ein A/B-Test umgesetzt wird.
Ist ein komplettes Designsystem zwingend notwendig?
Nein, aber einige wiederkehrende Styles und Komponenten helfen enorm. Schon wenige klare Regeln – etwa zu Typografie, Buttons und Abständen – sorgen dafür, dass Landingpages konsistent erscheinen und schneller gestaltet werden können. Ein späteres, größeres Designsystem kann darauf aufbauen.
