Responsive Design in Figma – Min/Max-Breiten, Auto Layout und adaptive Layouts

Responsive Design in Figma bezeichnet die Kombination aus Auto Layout, Constraints, Min/Max-Breitenwerten und Variables, um Design-Layouts zu erstellen, die sich an verschiedene Bildschirmbreiten (Mobile, Tablet, Desktop) anpassen.

Rubrik: Software & Tools · Unterrubrik: Figma · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Adaptives Design, Responsives Layout, Responsive UI Design; Breakpoints, Fluid Design

Was ist Responsive Design in Figma?

Responsive Design bedeutet, dass ein UI-Layout auf unterschiedlichen Bildschirmgrößen korrekt dargestellt wird – von 320px (kleines Smartphone) bis 1920px (großer Desktop-Monitor). In CSS wird das durch Media Queries, Flexbox und Grid erreicht. In Figma repliziert man diese Konzepte mit einer Kombination aus mehreren Features: Auto Layout, Constraints, Min/Max-Werten und – seit 2023 – Variables mit Modes für verschiedene Breakpoints.

Responsive Design in Figma ist kein einzelnes Feature, sondern eine Methodik, die mehrere Werkzeuge kombiniert. Das Ergebnis sind Design-Mockups, die Entwicklern das genaue Verhalten auf verschiedenen Bildschirmgrößen kommunizieren.

Erklärung

Methodischer Ansatz: Mobile First vs. Desktop First

Bevor man in Figma mit dem responsiven Design beginnt, muss die Strategie festgelegt werden:

Mobile First: Mit dem kleinsten Breakpoint (320–375px) beginnen und schrittweise für größere Screens erweitern. Entspricht dem CSS-Ansatz min-width Media Queries. Empfohlen für Produkte mit starkem Mobile-Fokus.

Desktop First: Mit dem größten Breakpoint (1440px) beginnen und für kleinere Screens reduzieren. Entspricht max-width Media Queries. Für Content-intensive Websites mit Desktop-Primärzielgruppe.

Breakpoint-Frames erstellen

Figma hat keine automatischen Breakpoint-Preview-Modi (wie Browser-DevTools). Stattdessen werden mehrere Frames nebeneinander auf der Canvas platziert – einer pro Breakpoint:

Übliche Breakpoints:

• Mobile: 375px (iPhone-Standardgröße) oder 320px (kleinstes mobiles Gerät)
• Mobile L: 414–430px
• Tablet: 768px (iPad)
• Tablet L: 1024px (iPad Pro)
• Desktop: 1280–1440px
• Desktop Wide: 1920px

Diese Frames werden in Figma als nebeneinanderliegende Screens auf einer „Responsive"-Seite organisiert.

Auto Layout für responsive Komponenten

Auto Layout ist das Kernwerkzeug für responsive Komponenten:

Hug Contents: Komponenten, die sich dem Inhalt anpassen (Buttons, Tags, Chips).

Fill Container: Komponenten, die den verfügbaren Platz ausfüllen (Eingabefelder, Karten in einem Grid, Navigations-Items).

Wrap: Ermöglicht das Umbrechen von Elementen in die nächste Zeile, wenn der Container zu schmal wird – wie flex-wrap: wrap in CSS. Ideal für Tag-Listen, Icon-Grids, Card-Grids.

Spacing Mode „Auto": Verteilt den verfügbaren Platz gleichmäßig zwischen Elementen (entspricht justify-content: space-between).

Durch Kombination dieser Optionen entstehen Komponenten, die sich auf allen Breakpoints korrekt verhalten.

Min/Max-Breiten und Höhen (seit Auto Layout 4)

Seit Auto Layout Version 4 (2022) können Min-Breite, Max-Breite, Min-Höhe und Max-Höhe für Auto-Layout-Frames gesetzt werden:

Min Width / Max Width:

• Im Auto-Layout-Frame-Panel rechts sind unter den Dimensions-Feldern Constraint-Symbole sichtbar.
• Auf das Kettensymbol klicken → Min/Max-Felder erscheinen.
• Beispiel: Ein Content-Container mit Min-Width 320px und Max-Width 1200px bleibt immer in diesem Bereich, egal wie breit der Parent-Frame ist.

Diese Min/Max-Werte sind das direkte Äquivalent zu CSS min-width und max-width.

Beispiel: Centered Content Container: `` Outer Frame (Fill Container, Horizontal): 100% breit Inner Frame (Fill Container mit Max-Width 1200px, Centered): Content ` Dieser Pattern repliziert den klassischen CSS-Pattern: .container { max-width: 1200px; margin: 0 auto; }`.

Constraints für Frame-Responsivität

Constraints steuern, wie sich Kindelemente beim Skalieren des übergeordneten Frames verhalten:

• Fixed: Element behält Größe und Position. Geeignet für fixe Elemente (Logos, Icons).
• Scale: Element skaliert proportional. Geeignet für Hintergrundbilder.
• Left and Right / Top and Bottom: Element streckt sich mit dem Frame. Geeignet für fluid-breite Elemente.

Variables mit Modes für Breakpoints

Seit Variables 2023 ist ein neuer Ansatz für responsives Design möglich: Breakpoint-Modes.

Konzept: Eine Variable-Collection mit Modes für verschiedene Breakpoints: `` Collection: Spacing Modes: Mobile, Tablet, Desktop Variables: page-margin: Mobile=16, Tablet=32, Desktop=64 grid-columns: Mobile=4, Tablet=8, Desktop=12 component-padding: Mobile=12, Tablet=16, Desktop=24 ``

Auf einem Mobile-Frame wird der Mode „Mobile" aktiviert, auf einem Desktop-Frame „Desktop". Alle mit diesen Variables verknüpften Elemente zeigen automatisch die korrekten Spacing-Werte.

Das ist besonders nützlich für das Dokumentieren von Spacing-Systemen, die sich über Breakpoints ändern.

Grid Styles für verschiedene Breakpoints

Layout-Grids helfen, responsive Raster zu visualisieren:

• Mobile: 4-Spalten-Grid, 16px Gutter, 16px Margin
• Tablet: 8-Spalten-Grid, 24px Gutter, 32px Margin
• Desktop: 12-Spalten-Grid, 32px Gutter, 64px Margin (zentriert, max 1200px)

Diese Grids werden als Grid Styles gespeichert und auf die entsprechenden Breakpoint-Frames angewendet. Sie helfen beim Ausrichten von Elementen an das Rastersystem.

Praktischer responsiver Workflow

Schritt 1 – Foundation: Farben, Typografie und Spacing als Variables (mit Breakpoint-Modes) und Styles definieren.

Schritt 2 – Basiskomponenten: Buttons, Input-Felder, Cards mit Auto Layout (Hug Contents, Fill Container) aufbauen, sodass sie fluid sind.

Schritt 3 – Layout-Pattern: Für häufige Layout-Pattern (Grids, Header, Footer) Auto-Layout-Frames mit korrekten Min/Max-Breiten und Constraint-Einstellungen aufbauen.

Schritt 4 – Screens pro Breakpoint: Drei bis vier Frames pro Screen (Mobile, Tablet, Desktop) aufbauen, indem dasselbe Komponenten-Set mit verschiedenen Layout-Konfigurationen angeordnet wird.

Schritt 5 – Handoff: Im Dev Mode mit Variables-Namen und Min/Max-Werten dokumentieren, welche CSS-Properties auf welchen Breakpoints gelten. Annotationen für komplexe Verhaltensänderungen (z. B. Hamburger-Menü ab Tablet, fixe Sidebar ab Desktop) hinzufügen.

Beispiele

1. Responsive Karten-Grid: Ein 3-Spalten-Grid auf Desktop → 2-Spalten auf Tablet → 1-Spalte auf Mobile. In Figma: Auto-Layout-Container mit Wrap, verschiedene Frames pro Breakpoint zeigen die verschiedenen Grid-Konfigurationen.
2. Fluid Navigation: Desktop mit horizontaler Navigation; Mobile mit Hamburger-Menü und Off-Canvas-Drawer. Zwei separate Component-Varianten (Desktop-Nav, Mobile-Nav) werden per Breakpoint-Frame eingesetzt.
3. Typografisches Responsive: Heading H1 ist 56px auf Desktop, 40px auf Tablet, 32px auf Mobile → per Variable font/h1/size mit Modes für jeden Breakpoint gesteuert.
4. Zentrierter Content-Container: Max-Width 1200px Auto-Layout-Frame, der auf einem 1440px-Frame zentriert ist – repliziert das klassische Boxen-Layout.
5. Full-Bleed Image: Bild mit Constraints „Left and Right" und „Scale" streckt sich auf Mobile über die volle Breite, während Titel und Text auf Desktop nur 60% der Breite einnehmen.

In der Praxis

Shortcuts:

• Frame erstellen: F
• Auto Layout: Shift+A
• Min/Max Einstellungen: Im Panel rechts → Constraint-Icon neben Dimensions
• Grid hinzufügen: Im rechten Panel → „+" unter „Layout Grid"

Best Practices:

• Immer in der Realität-Größe designen (1x) – keine Skalierungen verwenden.
• Components einmal aufbauen und auf allen Breakpoint-Frames mit denselben Components arbeiten – Unterschiede per Variants, nicht durch verschiedene Components.
• Entwickler-Annotation für Breakpoint-spezifisches Verhalten nutzen: Was ändert sich genau bei welchem Breakpoint?
• Min-Width und Max-Width konsequent nutzen – das kommuniziert fluid-responsive Verhalten besser als feste Frames.

Häufige Fehler:

• Für jeden Breakpoint komplett verschiedene Component-Sets erstellen – das ist wartungsintensiv. Lieber eine Component mit Variants.
• Responsivität nicht im Prototypen demonstrieren – eine Prototyping-Demo mit verschiedenen Breakpoints überzeugt Stakeholder besser als statische Frames.
• Zu viele Breakpoints designen – 3–4 reichen für die meisten Projekte. Entwickler interpolieren dazwischen.

Vergleich & Abgrenzung

CSS Responsive Design: Figma repliziert CSS-Konzepte visuell. Auto Layout = Flexbox, Min/Max-Width = CSS-Min/Max-Width, Grid Styles = CSS-Grid, Variables mit Modes = CSS-Custom-Properties mit @media-Queries. Sketch hat keine Min/Max-Breiten und kein Variables-System, was responsives Design deutlich schwieriger macht. Adobe XD hat Responsive Resize (automatisch, aber weniger kontrollierbar). Framer hat direktes CSS-Grid und Breakpoint-System. Im Vergleich ist Figma das vollständigste visuell-responsive Design-Tool, auch wenn es CSS nicht vollständig repliziert.

Häufige Fragen (FAQ)

Kann ich in Figma echte Breakpoints definieren, wie in CSS? Nicht nativ. Figma hat keine automatische Breakpoint-Preview, die zwischen Bildschirmgrößen wechselt. Stattdessen legt man separate Frames pro Breakpoint an. Variables mit Modes ermöglichen jedoch das Dokumentieren von Breakpoint-spezifischen Werten. Für eine direkte Breakpoint-Preview eignen sich Framer oder echte Browser-DevTools.

Wie kommuniziere ich responsive Verhaltensregeln an Entwickler? Über Dev Mode, Annotations direkt am Design und – am besten – eine schriftliche Spezifikation. Die Min/Max-Werte in Figma sind im Dev Mode sichtbar. Für komplexe Verhaltensänderungen (Collapse, Reorder, Breakpoint-Changes) empfiehlt sich ein separates Spezifikationsdokument oder FigJam-Board.

Sollte ich für jede Bildschirmgröße einen eigenen Frame haben? Für das Hauptlayout: Ja, in der Regel 3–4 Frames (Mobile, Tablet, Desktop, Desktop Wide). Für individuelle Komponenten genügt oft eine Figma-Datei, die mit Auto Layout fluid ist und sich dann pro Frame anpasst.

Verwandte Einträge

• Auto Layout
• Constraints
• Variables
• Frames vs. Groups

Weiterführend

• Figma Help Center – help.figma.com/de
• Figma-Dokumentation: „Responsive layouts with constraints and auto layout" – help.figma.com
• Kevin Powell: „Responsive Design in Figma for Developers" (YouTube, 2023)
• Refactoring UI: „Designing Responsive Layouts" (refactoringui.com, Buch 2023)