Designsystem-Abstände im UI – Spacing-System klar planen

Unruhige Layouts, verschobene Buttons, mal zu viel, mal zu wenig Luft: Oft liegt das nicht am Auge, sondern an fehlenden Regeln. Wer Abstände im Interface dem Bauchgefühl überlässt, kämpft später mit inkonsistenten Komponenten, langen Review-Schleifen und unnötigen Frontend-Anpassungen.

Dieser Leitfaden zeigt Schritt für Schritt, wie ein robustes Spacing-System für ein UI-Design entsteht – von der Skala über Figma-Komponenten bis hin zur Übergabe an die Entwicklung.

Warum ein Spacing-System im UI-Design so wichtig ist

Abstände sind ein leiser, aber mächtiger Teil jedes Interfaces. Sie steuern Hierarchie, Lesbarkeit und Fokus. Ein durchdachtes Designsystem für Abstände sorgt dafür, dass Layouts nicht nur „schön“, sondern vor allem verständlich und wartbar sind.

Effekte konsistenter Abstände auf UX und Markenbild

Wenn in einer App überall andere Abstände vorkommen, wirkt die Oberfläche unruhig und unprofessionell. Konsistente Abstände bringen mehrere Vorteile:

• Lesbarkeit: Gute Abstände zwischen Überschrift, Text und Buttons machen Inhalte in Sekunden erfassbar.
• Struktur: Gleichmäßige vertikale und horizontale Spacing-Regeln helfen, Informationsblöcke intuitiv zu erkennen.
• Markeneindruck: Konsequente Abstände gehören – wie Farben und Typografie – zum visuellen System einer Marke.
• Tempo im Team: Statt über Pixelwerte zu diskutieren, greifen alle auf klar definierte Tokens zurück.

Wer bereits mit strukturierter Typografie im Web arbeitet, kennt den Effekt: Je klarer die Regeln, desto freier fühlt sich das Design an.

Typische Probleme ohne klare Spacing-Regeln

Fehlt ein Spacing-System, zeigen sich immer wieder dieselben Muster:

• Beliebige Abstände wie 7, 11, 19, 23 px in einem Layout – schwer zu merken, schwer zu reproduzieren.
• Designer:innen und Developer messen jede Komponente neu aus, statt wiederverwendbare Muster zu nutzen.
• Responsives Verhalten wird unberechenbar, weil Breakpoints und Abstände nicht zusammen gedacht wurden.

Ein klarer Satz an Spacing Tokens löst genau diese Probleme – bei neuen Projekten und bei gewachsenen UIs.

Spacing-Skala erstellen: von der Basis-Einheit zur Logik

Der erste Schritt ist die Definition einer Spacing-Skala. Sie legt fest, welche Abstände überhaupt erlaubt sind. Statt unzähliger Zahlen gibt es eine kleine, logisch aufgebaute Auswahl.

Basis-Einheit und Raster definieren

Die Basis-Einheit (z. B. 4 px oder 8 px) ist das kleinste Bauteil, aus dem alle Abstände bestehen. Eine 8er-Skala wirkt in vielen Interfaces robust und hilft, ein klares vertikales Raster zu halten.

Eine einfache Skala könnte so aussehen:

Wichtig ist, dass die Stufen nachvollziehbar sind. Ob linear (4-8-12-16-24…) oder exponentiell (4-8-16-32-64…) hängt vom Produkt und der Design-Sprache ab.

Linear vs. exponentiell: welche Skala passt?

Beide Ansätze haben Vorteile:

• Lineare Skala: Feiner steuerbar, ideal für Content-lastige Oberflächen und Formulare.
• Exponentielle Skala: Stärkere visuelle Hierarchie, gut für hero-lastige Landingpages und markante Layouts.

Ein Hybrid funktioniert in der Praxis oft am besten: Unten fein abgestuft, nach oben gröber. So lassen sich Micro-Elemente und große Layout-Blöcke sauber abdecken.

Spacing-Tokens benennen und dokumentieren

Damit Abstände teamweit funktionieren, brauchen sie sprechende Namen und saubere Dokumentation. Nur dann landen die Regeln verlässlich im Code und im Alltag.

Namenskonventionen für Spacing-Tokens

Tokens sollten technisch nutzbar und intuitiv lesbar sein. Häufige Muster:

• Semantisch: space-2xs, space-xs, space-s, space-m, space-l, space-xl
• Numerisch: space-4, space-8, space-12, space-16, space-24, space-32

Semantische Namen helfen, beim Design in Größen (klein/mittel/groß) zu denken, während numerische Namen direkt den Wert verraten. Wichtig ist, dass die Konvention mit dem Rest des UI-Designsystems zusammenpasst – etwa den Farb- oder Typografie-Tokens.

Dokumentation im Designsystem anlegen

Die Spacing-Regeln gehören an einen gut auffindbaren Ort – idealerweise als Teil der Designsystem-Doku. Elemente, die dort sinnvoll sind:

• Visualisierung der kompletten Skala mit Balken und Pixelwerten.
• Beispiele: „So sieht ein Card-Layout mit space-m und space-l aus.“
• Verbote: „Diese Werte sind nicht erlaubt“ – etwa krumme Zahlen außerhalb der Skala.

Wer bereits Komponenten-Richtlinien pflegt, kann Spacing dort verankern – ähnlich wie bei Icon-Richtlinien im Designsystem.

Spacing-System in Figma umsetzen

Im nächsten Schritt wandert die Spacing-Logik ins Design-Tool. Figma bietet dafür Auto Layout, Library-Komponenten und Styles, die sich gut kombinieren lassen.

Auto Layout für vertikale und horizontale Abstände nutzen

Auto Layout ist das Herzstück einer sauberen Spacing-Umsetzung. Es ersetzt manuelles Schieben durch definierte Regeln:

• Vertikale Listen (z. B. Formularkomponenten) bekommen einen einheitlichen „Spacing between“-Wert, etwa space-m.
• Buttons und Tags erhalten definierte Innenabstände (Padding) für oben/unten und links/rechts.
• Karten und Sections nutzen Auto Layout, um Elemente gleichmäßig zu verteilen.

Statt einzelne Elemente mit „x px“ zu verschieben, wird der Container konfiguriert. Das macht Änderungen in Sekunden möglich – ein zentrales Prinzip in modernen UI-Kits.

Komponenten mit festen Padding-Regeln bauen

Eine Spacing-Skala wird erst praktisch, wenn sie konsequent in Komponenten steckt. Sinnvoll ist eine klare Zuordnung, etwa:

• Buttons: horizontal space-m, vertikal space-s.
• Cards: innen space-l, außen zum nächsten Element space-l oder space-xl.
• Formulare: Abstand zwischen Feldern space-m, zwischen Gruppen space-l.

Beim Aufbau eines UI-Kits – etwa wie bei wiederverwendbaren Komponenten in Figma – sollte jede Komponente dokumentierte Spacing-Entscheidungen enthalten, nicht nur Farben und Typo.

Kurze So-geht’s-Box: Spacing in Figma einführen

• Basis-Skala definieren (z. B. 4–8–12–16–24–32 px) und dokumentieren.
• Auto Layout standardmäßig aktivieren: keine losen Elemente mehr.
• Core-Komponenten (Buttons, Inputs, Cards) mit festen Padding-Werten auf der Skala anlegen.
• Layout-Grids auf die gleiche Basis-Einheit abstimmen.
• Im Team vereinbaren: neue Layouts nur mit Tokens, keine freien Pixelwerte.

Spacing und Responsive Design: Abstände auf verschiedenen Breakpoints

Ein Spacing-System muss nicht auf jedem Screen exakt gleich wirken. Gerade auf kleinen Geräten braucht es Feingefühl, damit Inhalte nicht gequetscht oder gestreckt wirken.

Mobile, Tablet, Desktop – wie stark dürfen Abstände variieren?

Ein Ansatz ist, für Breakpoints Spacing-Stufen zu definieren, etwa:

• Mobil: eher kleinere Abstände, z. B. space-s als Standard zwischen Textblöcken.
• Tablet: mittlere Abstände, z. B. space-m.
• Desktop: großzügigere Abstände, z. B. space-l zwischen Sektionen.

Die Skala selbst bleibt gleich, aber der „Standardwert“ je Breakpoint verschiebt sich. Wichtig ist, dass Überschriften, Text und Interaktionsflächen weiterhin als zusammengehörig erkennbar sind.

Spacing-Regeln mit Typografie und Layout kombinieren

Abstände dürfen nie isoliert betrachtet werden. Sie hängen eng zusammen mit:

• Schriftgröße und Zeilenhöhe (Line-Height).
• Layout-Grids (z. B. 12-Spalten-Raster).
• Komponentengrößen (z. B. Höhe von Form-Feldern oder Cards).

Wer bereits eine responsive Typo-Logik nutzt – etwa wie bei responsiver Typografie im Web – sollte Spacing-Stufen daran ausrichten. Eine Faustregel: Zwischen zwei Überschriften-Blöcken wirkt ein Abstand etwa im 1–2-fachen der Zeilenhöhe meist harmonisch.

Spacing-System in Code übertragen: Tokens und Utility-Klassen

Ein Spacing-System entfaltet seine volle Wirkung erst, wenn es in der Frontend-Implementierung ankommt. Dafür eignen sich Design-Tokens, CSS-Variablen oder Utility-Klassen.

Design-Tokens für Abstände anlegen

Design-Tokens sind zentrale Variablen, aus denen das UI aufgebaut ist. Ein Spacing-Token-Set kann zum Beispiel so aussehen:

• --space-2xs: 4px;
• --space-xs: 8px;
• --space-s: 12px;
• --space-m: 16px;
• --space-l: 24px;
• --space-xl: 32px;

Diese Tokens lassen sich in CSS, in Komponenten-Bibliotheken oder in Utility-First-Frameworks nutzen. Vorteil: Änderungen an der Skala laufen zentral und sind reproduzierbar.

Utility-Klassen für häufige Layout-Fälle

In vielen Teams sind Utility-Klassen für Margin und Padding etabliert. Sie können auf dem Spacing-System aufbauen, zum Beispiel:

• .mt-s { margin-top: var(--space-s); }
• .mb-m { margin-bottom: var(--space-m); }
• .p-l { padding: var(--space-l); }

Wichtig ist, die Klasse nicht zur „Pixel-Malerei“ zu missbrauchen. Gute Praxis ist, Spacing-Regeln vor allem in Komponenten zu verankern und Utilities gezielt für Layout-Fälle zu verwenden, die nicht anders lösbar sind.

Typische Fehler beim Spacing-System und wie sie sich vermeiden lassen

Auch mit einem definierten System schleichen sich Fehler ein. Einige Stolperfallen wiederholen sich in vielen Projekten.

Zu viele Ausnahmen und Sonderfälle

Wenn jede Komponente eine eigene Abstandslogik bekommt, wird das System unübersichtlich. Anzeichen dafür:

• Komponenten-Spezifikationen enthalten zusätzliche Pixelwerte, die nicht in der Skala vorkommen.
• Designer:innen „brechen“ das System für einzelne Seiten, um schnell Lösungen zu finden.

Abhilfe schafft eine klare Regel: Neue Abstände dürfen nur eingeführt werden, wenn sie mehrfach im System vorkommen und dokumentiert werden. Einzel-Ausnahmen sollten bewusst selten bleiben.

Spacing nicht in Reviews und QA prüfen

Oft liegt der Fokus bei Reviews auf Farben und Typografie, während Abstände hintenüberfallen. Dabei wirken Spacing-Fehler sofort „billig“. Sinnvoll ist, feste Prüfpunkte einzubauen:

• Design-Review: Stimmt das vertikale und horizontale Raster mit der definierten Skala überein?
• Dev-Review: Werden CSS-Variablen oder Tokens genutzt, statt harte Werte im Code?
• QA: Werden alle relevanten States (Hover, Focus, Error) mit korrekt beibehaltenem Spacing dargestellt?

Wer bereits klare Review-Routinen – etwa aus strukturierter Audit-Arbeit – kennt, kann ähnliche Checklisten für Spacing einführen.

Mini-Ratgeber: Spacing-System dauerhaft im Alltag verankern

• Einmal im Quartal das Spacing-System prüfen: Welche neuen Abstände haben sich eingeschlichen?
• Neue Teammitglieder in einem kurzen Onboarding-Call durch die Spacing-Regeln führen.
• Beispiele aus dem Produkt sammeln, die das System gut oder schlecht umsetzen, und im Team besprechen.
• In Figma-Dateien „Linting“-Regeln etablieren: Keine losen Elemente, alle Layouts mit Auto Layout.

FAQ: Häufige Fragen zu Spacing-Systemen

• Wie viele Stufen sollte eine Spacing-Skala haben?
  In vielen Projekten reichen 6–8 Stufen von sehr klein bis sehr groß. Zu wenige schränken zu stark ein, zu viele erzeugen Chaos.
• Müssen alle Abstände aus der Skala kommen?
  Im Idealfall ja. Einzelne Spezialfälle können sinnvoll sein, sollten dann aber bewusst als Ausnahme dokumentiert werden.
• Wie lässt sich ein bestehendes Projekt auf ein neues System umstellen?
  Am besten schrittweise: Zuerst Tokens einführen, dann Kern-Komponenten umstellen, anschließend Seitenlayouts nach und nach migrieren.