Eine importierte Seite mit Figma-Variablen responsiv machen

Kurze Antwort

Um eine importierte Seite in Figma responsiv zu machen, legst du eine Collection mit Zahlenvariablen an, die pro Gerätegröße einen Mode hat, bindest diese Variablen an Gap, Padding, Breite und Höhe deiner Auto-Layout-Frames und setzt dann den Mode an jedem Frame. Die Variablen halten die Zahlen. Der Mode entscheidet, welchen Satz ein Frame verwendet. Ein Import liefert dir feste Zahlen, also ist das Arbeit, die du danach erledigst.

Dieses Tutorial führt der Reihe nach durch diese Einrichtung. Es beruht auf den Hilfeseiten von Figma selbst, geprüft am 21. Oktober 2026, und die Schritte verwenden die Bezeichnungen, die Figma zu diesem Datum in seiner Oberfläche zeigt.

Was du vorher brauchst

Du brauchst eine Seite, die bereits als Ebenen in Figma liegt, am besten mit Auto Layout an den Frames, die sich anpassen sollen. Die öffentlichen Seiten von UnHTML beschreiben Auto Layout als aus dem tatsächlichen CSS der Seite abgeleitet und sagen, dass Frames, die die erfasste Geometrie nicht abbilden können, auf absolute Positionierung zurückfallen. Absolute Positionierung hat kein Gap und kein Padding, das sich binden ließe. Beginne also mit den Frames, die als Auto Layout angekommen sind. Der Artikel darüber, wie CSS Flexbox auf Figma Auto Layout abgebildet wird, zeigt dir, welche du erwarten kannst.

Außerdem brauchst du einen Tarif, der Modes unterstützt. Figma gibt an, dass das Anlegen und Verwenden von Modes in den Tarifen Education, Professional, Organization und Enterprise verfügbar ist und dass die Anzahl der Modes pro Collection vom Tarif abhängt. Prüfe das, bevor du drei Breakpoints planst.

Noch etwas. Die öffentlichen Seiten von UnHTML sagen nicht, ob bei einem Import Figma-Variablen angelegt oder gebunden werden. Dieses Tutorial geht deshalb davon aus, dass keine existieren, und baut sie von Hand. Hat dein Import schon welche, passe Schritt 1 an, statt sie zu duplizieren.

Schritt 1: Eine Collection mit einem Mode pro Gerätegröße anlegen

Figma definiert einen Mode als "a list of values for a variable in a collection, storing one value per variable" und nennt Gerätegrößen unter den Kontexten, die ein Mode abbilden kann (Overview of variables, collections, and modes). Genau diese Form braucht eine Breakpoint-Einrichtung.

1. Öffne die Ansicht Variables in der linken Navigationsleiste und lege eine Collection an. Gib ihr einen schlichten Namen, etwa Layout.
2. Benenne den ersten Mode in Desktop um. In diesem Mode erhält jede neue Variable ihren ersten Wert.
3. Klicke rechts neben den Spaltenköpfen auf New variable mode und nenne ihn Tablet. Figma kopiert die Werte der ersten Spalte in den neuen Mode, beide beginnen also identisch.
4. Füge auf dieselbe Weise einen dritten Mode namens Mobile hinzu. Du kannst auch mit der rechten Maustaste auf einen Mode-Kopf klicken und Duplicate mode wählen.

Quelle dieser Schritte ist Figmas Seite zu Modes für Variablen. Eine einzelne Collection kann bis zu 5.000 Variablen enthalten, weit mehr, als ein Seitenlayout braucht.

Schritt 2: Die Zahlenvariablen anlegen

Figma sagt, Zahlenvariablen "are great at handling responsive designs", und nennt Breite, Höhe einschließlich Minimum und Maximum, Padding und Gap unter den Eigenschaften, die sie steuern können. Lege pro Wert, der sich je nach Größe ändern soll, eine Variable an. Eine kurze Liste genügt:

Die Zahlen sind Beispiele, keine Empfehlungen. Lies die echten Werte von deiner eigenen Seite ab: Wähle einen Abschnitt aus, notiere sein Padding und den Gap zwischen seinen Kindern und nutze sie als Spalte Desktop. Fülle Tablet und Mobile mit dem, was du bei diesen Größen willst.

Benenne Variablen nach ihrer Aufgabe, nicht nach ihrem Wert. Ein Name wie card-gap überlebt ein Redesign. Ein Name wie gap-32 nicht.

Schritt 3: Die Variablen an deine Frames binden

Jetzt verbindest du die Variablen mit Eigenschaften. Figma dokumentiert für jede Art von Feld eine andere Geste (Apply variables to designs):

1. Für Gap, Breite und Höhe klickst du in das Eigenschaftsfeld und drückst =, um die Auswahl zu öffnen, und wählst dann die Variable.
2. Für Padding öffnest du das Dropdown des Felds und wählst Apply variable.
3. Für andere Eigenschaften hältst du Shift gedrückt und klickst in das Feld, oder du klickst mit der rechten Maustaste und wählst Apply variable.

Zahlenvariablen sind in der Auswahl mit einem Zahlensymbol markiert. Siehst du keine, gibt es in der Datei womöglich noch keine passende Variable.

Für die maximale Breite nutzt du die Min- und Max-Felder, die Auto-Layout-Frames bieten. Figmas Auto-Layout-Seite sagt, dass du in diese Felder einen Wert eingeben oder per "use the dropdown to apply a number variable" eine Zahlenvariable anwenden kannst (Explore auto layout properties). Kombiniere eine Variable für die maximale Breite mit Fill container am Kind, das die Ebene auf den verfügbaren Platz im übergeordneten Frame streckt, und der Inhalt bleibt zentriert und begrenzt.

Arbeite von außen nach innen. Binde zuerst das Padding des Abschnitts, dann den Gap innerhalb jedes Abschnitts und zuletzt die Kartenbreiten. Je weniger gebundene Eigenschaften, desto weniger Stellen für Fehler.

Schritt 4: Den Mode an einem Frame setzen

Sind die Variablen gebunden, ändert ein Moduswechsel die Zahlen. Wähle einen Frame aus, suche in der rechten Seitenleiste den Bereich Appearance, klicke auf Apply variable mode und fahre mit dem Mauszeiger über die Collection Layout, um Tablet oder Mobile zu wählen.

Zwei Regeln aus Figmas Dokumentation entscheiden, ob das funktioniert:

• Die Option erscheint nur, wenn die verschachtelten Ebenen des Frames mindestens eine Variable mit mehr als einem Mode verwenden. Fehlt das Menü, binde zuerst eine Variable.
• Ebenen stehen standardmäßig auf Auto, das heißt, sie übernehmen den Mode ihres übergeordneten Containers. Steht auch der Container auf Auto, sucht die Ebene weiter oben in der Hierarchie, bis sie einen Container mit gesetztem Mode findet. Hat keiner einen, gilt der Standard-Mode der Collection.

Prüfe das Ergebnis, indem du in jedem der drei Frames dieselbe Karte auswählst und ihr Padding und ihren Gap im rechten Bereich ansiehst. Die Felder sollten den Variablennamen zeigen und die Zahl der jeweiligen Spalte. Zeigt ein Feld nur eine nackte Zahl, ist dort keine Variable gebunden, und du holst Schritt 3 für diese Eigenschaft nach.

Das praktische Muster: Baue drei Frames auf oberster Ebene, einen pro Gerätegröße, und setze an jedem Desktop, Tablet beziehungsweise Mobile. Alles darin erbt. Du änderst eine Einstellung pro Frame, nicht eine pro Ebene, und kannst alle drei Größen nebeneinander vergleichen.

Stolperfallen

• Änderungen auf der Arbeitsfläche lösen Variablen. Figma weist darauf hin, dass das Ändern von Padding oder Gap eines Auto-Layout-Frames mit den Steuerelementen auf der Arbeitsfläche alle angewendeten Zahlenvariablen entfernt. Bearbeite den Wert stattdessen in der Ansicht Variables.
• Absolute Positionierung reagiert nicht. Ein Frame, der auf absolute Positionierung zurückgefallen ist, hat kein Gap und kein Padding, das sich steuern ließe. Wandle ihn zuerst in Auto Layout um oder lass ihn fest.
• Hug und Fill sind getrennte Dinge. Hug contents gilt nur für Auto-Layout-Frames, Fill container nur für Kinder von Auto-Layout-Frames. Eine Variable repariert keinen Frame, dessen Größenanpassung falsch ist.
• Variablen sind keine Stile. Farben und Text sind eine andere Frage. Dazu siehst du, wie du Farbstile aus einer importierten Seite extrahierst.

Wohin das führt

Sobald die Zahlen in Variablen leben, ist die Seite kein Schnappschuss mehr. Du kannst einen Breakpoint ändern, indem du eine einzige Zelle bearbeitest, und jeder daran gebundene Frame folgt. Das ist auch die Grundlage für die größere Aufgabe, ein Designsystem aus einer importierten Seite aufzubauen, bei der dieselbe Collection Abstände, Radien und Breiten für jede Seite halten kann, die du hereinholst.

Fazit

Die Methode ist kurz. Eine Collection, ein Mode pro Gerätegröße, Zahlenvariablen für die Werte, die sich ändern, Bindungen an Gap, Padding und Breite und ein gesetzter Mode an jedem Frame auf oberster Ebene. Der Import liefert die Ebenen und ihre gemessenen Zahlen. Figmas Variablen liefern die Logik, mit der sich diese Zahlen je nach Größe ändern. Beginne mit einem einzigen Abschnitt, bring ihn dazu, sauber zwischen den drei Modes zu wechseln, und wiederhole das Muster dann für den Rest der Seite.