Bevor ein Interface hübsch aussieht, muss es logisch funktionieren. Genau hier helfen UX-Wireframes: einfache Layouts, die Struktur, Inhalte und Abläufe visualisieren – ohne Ablenkung durch Farben und Effekte. Besonders mit Figma lassen sie sich schnell erstellen, testen und im Team weiterentwickeln.
Der Beitrag zeigt, wie in Figma aus einer ersten Idee ein kompletter, klickbarer Flow entsteht: von der Vorbereitung über Seitenstruktur, Komponenten und Interaktionen bis zu Kommentaren und Hand-off an die Entwicklung.
UX-Wireframes verstehen: Zweck, Detaillierungsgrad, Formate
Was UX-Wireframes leisten – und was nicht
Wireframes sind vereinfachte Entwürfe einer Seite oder App-Ansicht. Sie zeigen grob: Wo stehen Navigation, Inhalte, Buttons, Formulare, Bilder, Nachrichten. Sie klären Informationsfluss und Bedienlogik.
Wichtige Punkte:
- Sie beantworten: „Finden Nutzer hier, was sie brauchen, und wie kommen sie weiter?“
- Sie ignorieren bewusst: Markenfarben, Typografie-Feinheiten, Bildstile.
- Sie dienen als Gesprächsgrundlage für Stakeholder, Entwickler und Texter.
So lassen sich frühe Fehler auffangen, bevor Zeit in High-Fidelity-Designs oder Code fließt. Wer bereits mit Design-Token und UI-Systemen arbeitet, kann Wireframes außerdem später nahtlos in fertige Oberflächen überführen.
Low-Fidelity vs. Mid-Fidelity in Figma
Mit Figma lassen sich verschiedene Detailgrade abbilden:
- Low-Fidelity: Kästen, Linien, Platzhalter-Text. Ideal für frühe Ideen und schnelle Varianten. Fokus: Struktur und Reihenfolge.
- Mid-Fidelity: Klar erkennbare UI-Elemente (Buttons, Input-Felder, Tabs), erste Typohierarchien, aber noch ohne finales Branding. Fokus: Bedienlogik und Zustände.
Für Projekte mit knappem Budget reichen oft Mid-Fidelity-Wireframes, die direkt in ein UI-Design überführt werden. Für komplexe Produkte lohnt sich ein zweistufiger Prozess: erst Low-Fidelity zum Klären, dann Mid-Fidelity zur Abstimmung.
Figma-Projekt für Wireframes sauber anlegen
Dateistruktur und Seitenaufbau im Figma-Projekt
Ordnung im Figma-File spart später viel Suchzeit. Ein bewährter Aufbau:
- Seite „00 – Sitemap & Flow“: Übersicht über Screens und Nutzerwege.
- Seite „01 – Wireframes Low“: frühe Entwürfe, schnelle Varianten.
- Seite „02 – Wireframes Mid“: freigegebene Versionen für Reviews und Tests.
- Seite „Lib – Komponenten“: wiederverwendbare Elemente wie Navigation, Karten, Formulare.
Frames sollten klar benannt sein, zum Beispiel „01_Home“, „02_Produktliste“, „03_Produktdetail“. Das hilft beim Verklinken und beim Hand-off an die Entwicklung.
Grids, Spalten und Breakpoints definieren
Auch wenn Wireframes schlicht wirken: Ein sauberes Layout-Raster verhindert spätere Probleme mit responsiven Views. In Figma lassen sich Layout-Grids je Frame anlegen. Typische Einstellungen:
- Desktop: 12 Spalten mit gleichmäßigen Abständen, großzügige Margins.
- Tablet: 6–8 Spalten, angepasste Seiteneinrückungen.
- Mobile: 4 Spalten, volle Breite mit klaren Innenabständen.
Wer sich bereits mit Abständen und flexiblen Layouts im Code beschäftigt hat, kann diese Logik in Figma direkt nachbilden. Das erleichtert später die Umsetzung im Frontend.
Seitenstruktur planen: Sitemap, User-Flows, Prioritäten
Sitemap und Kernpfade definieren
Bevor das erste Element gezeichnet wird, sollte klar sein, welche Seiten und Zustände überhaupt nötig sind. Eine einfache Sitemap reicht oft:
- Startseite
- Kategorie-/Übersichtsseiten
- Detailseiten (z. B. Produkt, Artikel, Profil)
- Dialoge und Overlays (z. B. Login, Filter, Bestätigung)
- Fehler- und Leerseiten
Parallel dazu lohnt sich eine Skizze der wichtigsten User-Flows, etwa „Produkt finden und kaufen“ oder „Account erstellen und Profil ausfüllen“. Diese Pfade bestimmen, welche Frames später in Figma als klickbarer Prototyp verbunden werden.
Informationsarchitektur und Content-Hierarchie
Wireframes visualisieren vor allem Prioritäten: Was steht oben, was unten, was wird nur bei Bedarf eingeblendet? Für jede Seite sollte klar sein:
- Was ist die Hauptaufgabe des Nutzers auf dieser Seite?
- Welche Information braucht er dafür sofort, welche nur optional?
- Welcher Call-to-Action (Hauptaktion) steht im Fokus?
Statt sich früh in Farben zu verlieren, helfen hier einfache Grauwerte oder Strichstärken: Wichtige Bereiche größer oder dunkler, sekundäre Elemente zurückhaltender. Später können diese Hierarchien in ein Designsystem oder eine UI-Bibliothek überführt werden.
Wireframes in Figma zeichnen: praktisch Schritt für Schritt
Standard-Elemente aufbauen: Navigation, Content, Footer
Für konsistente Wireframes lohnt es sich, zuerst wiederkehrende Bausteine zu definieren:
- Header mit Logo, Hauptnavigation, Suche, primärer Aktion
- Hauptinhaltsbereich mit Layout-Varianten (1-spaltig, 2-spaltig, Karten, Listen)
- Footer mit Links, Kontakt, Rechtstexten
Diese Elemente werden in Figma als Komponenten angelegt und auf den Screens instanziert. So lassen sich später globale Anpassungen (z. B. Navigationsänderungen) mit einem Klick aktualisieren. Wer bereits mit Komponenten in Figma arbeitet, kann dieselben Mechanismen für Wireframes nutzen.
Eingabefelder, Buttons und Zustände klar darstellen
Auch in einfachen Wireframes sollten Interaktionen erkennbar sein. Gute Praxis:
- Buttons mit klarer Form, eindeutiger Beschriftung und definierter Breite.
- Formularfelder inklusive Labels und Fehlermeldungsbereichen.
- Checkboxen, Radiobuttons und Dropdowns in ausgewähltem und nicht ausgewähltem Zustand.
In Figma lassen sich dafür Varianten nutzen: Ein Button kann mehrere Zustände haben (normal, hover, disabled). So bleibt der Wireframe nah an der späteren Erfahrung, ohne optisch überladen zu wirken.
Text und Platzhalter sinnvoll einsetzen
Auch wenn die endgültigen Texte noch fehlen: Blindtext („Lorem ipsum“) hilft nur begrenzt. Aussagekräftiger sind kurze Platzhalter-Texte, die die Funktion beschreiben – zum Beispiel „Kurzer Produktvorteil“, „Nutzerziel in einem Satz“ oder „Fehlermeldung bei ungültiger E-Mail“.
Wer bereits an Content-Briefings für SEO arbeitet, kann wichtige Begriffe im Wireframe bereits als Platzhalter einplanen. So ist klar, wo später Schlagzeilen, Einleitungen und CTAs stehen.
Komponenten, Auto Layout und Wiederverwendung in Figma
Wireframe-Komponenten als Mini-Designsystem
Auch ohne fertiges Branding lohnt sich ein kleiner Baukasten. Typische Komponenten in Wireframes:
- Karten (Bild, Titel, Kurztext, Button/Link)
- Listenzeilen (Icon, Titel, Subline, Aktion rechts)
- Formularreihen (Label + Feld + Hilfstext/Fehler)
- Navigationselemente (Tabs, Breadcrumbs, Filterchips)
Diese Komponenten können später leicht visuell verfeinert werden, wenn ein UI-Designsystem hinzukommt. Die Struktur bleibt gleich, nur die „Hülle“ ändert sich.
Auto Layout für flexible Wireframes nutzen
Mit Auto Layout passt sich ein Bereich automatisch an seinen Inhalt an: Elemente rücken nach, wenn Text länger wird, Rahmen wachsen mit. Für Wireframes ist das ideal, um realistische Inhalte zu simulieren:
- Listen, in denen sich die Anzahl der Einträge ändert.
- Buttons mit unterschiedlich langen Beschriftungen.
- Kartenrasters, die auf Desktop mehrere Spalten und auf Mobile eine Spalte nutzen.
So entstehen nicht nur hübsche, sondern auch realistische Entwürfe, die sich gut in responsive Layouts übersetzen lassen – unabhängig davon, ob später mit CSS Grid oder flexbox-gap gearbeitet wird.
Prototyping: Wireframes in Figma klickbar machen
Interaktionen und Flows definieren
Ein statischer Wireframe erklärt Logik auf den ersten Blick. Noch verständlicher wird es, wenn der Flow klickbar ist. In Figma lassen sich dafür Verbindungspfeile zwischen Elementen und Frames ziehen:
- Navigationselemente führen auf die entsprechenden Seiten.
- Buttons leiten zu Formularschritten oder Bestätigungen.
- Overlays (z. B. Filter) öffnen und schließen sich mit definierter Animation.
Für Nutzer-Tests reicht meist eine einfache „On Click“-Navigation mit sofortigem Seitenwechsel. Später können Animationen oder Übergänge ergänzt werden, wenn es mehr um die Wirkung von Interaktionen und Micro-Animations geht.
Viewport, Scrolling und Breakpoints testen
Im Prototyping-Modus lässt sich für jeden Frame eine Gerätegröße definieren. Damit können echte Situationen simuliert werden:
- Mobile-Screens mit Scrollbereich und fixiertem Header.
- Desktop-Ansichten mit sichtbarer Falz („above the fold“).
- Tablet-Varianten kurzer oder längerer Inhalte.
So wird früh sichtbar, ob wichtige Inhalte zu weit nach unten rutschen oder ob Navigationselemente auf kleinen Screens überfüllt wirken.
Feedback, Iteration und Zusammenarbeit im Team
Kommentare und Versionen in Figma nutzen
Damit Wireframes wirklich helfen, müssen sie diskutiert werden. Figma bietet dafür Kommentare direkt im Layout. Gute Praxis im Team:
- Fragen als Kommentar an konkreten Elementen platzieren.
- Änderungswünsche bündeln statt überall kleine Hinweise verteilen.
- Freigegebene Stände mit Datum und kurzer Notiz markieren.
Für größere Änderungen lohnt sich die Arbeit mit Versionen: So lässt sich bei Bedarf auf einen früheren Stand zurückspringen oder Varianten vergleichen.
Wireframes mit UX-Research und Tests verknüpfen
Auch einfache Wireframe-Prototypen können mit Nutzern getestet werden, etwa per Remote-Interview. Typische Aufgaben:
- „Finde ein bestimmtes Produkt und lege es in den Warenkorb.“
- „Ändere deine Rechnungsadresse im Account.“
- „Finde heraus, wie du Kontakt zum Support aufnehmen kannst.“
Die Ergebnisse fließen dann wieder in Anpassungen an Struktur oder Flow ein. So entsteht ein gestütztes, nutzerzentriertes Layout – lange bevor Pixel perfekt gesetzt werden.
So geht’s in der Praxis: kompakte Checkliste für Figma-Wireframes
- Projektseite anlegen: Sitemap, User-Flows und Breakpoints grob definieren.
- Grundraster setzen: Layout-Grids für Desktop, Tablet und Mobile einrichten.
- Standard-Bausteine bauen: Header, Footer, Content-Blöcke als Komponenten anlegen.
- Seiten strukturieren: Wichtigste Inhalte und Aktionen pro Screen festlegen.
- UI-Elemente skizzieren: Buttons, Formulare, Listen mit klaren Zuständen zeichnen.
- Prototyp verbinden: Klickpfade im Figma-Prototyping anlegen und testen.
- Feedback einsammeln: Kommentare, Nutzer-Tests, Anpassungsrunden einplanen.
FAQ zu UX-Wireframes in Figma
- Wann sind Wireframes „fertig“? Wenn Struktur, Inhalte und Flows für alle Beteiligten klar sind und nur noch visuelle Entscheidungen offen bleiben.
- Wie detailliert sollten Wireframes sein? Für neue Produkte lieber grob beginnen und schrittweise verfeinern. Für bekannte Muster (z. B. Standard-Shops) kann gleich Mid-Fidelity sinnvoll sein.
- Braucht jedes Projekt ein eigenes Wireframe-System? Nein. Wer regelmäßig ähnliche Oberflächen gestaltet, kann einen eigenen Baukasten aufbauen und für Projekte anpassen.
