---
title: "Figma-Grundlagen: Frames, Auto Layout und Komponenten"
url: "https://insideuxdesign.com/de/blog/figma-grundlagen-frames-auto-layout-und-komponenten"
language: "de"
description: "Figma verständlich erklärt: Frames, Auto Layout und Komponenten. Baue Schritt für Schritt deine erste Komponente und spare dir viel Handarbeit."
published: "2026-05-13T09:00:00+02:00"
updated: "2026-10-15T00:40:02+02:00"
---

# Figma-Grundlagen: Frames, Auto Layout und Komponenten

Frames, Auto Layout und Komponenten sind die drei Grundbausteine in Figma. Hier lernst du Schritt für Schritt, wie sie zusammenspielen, und baust deine erste wiederverwendbare Kurskarte.

Stell dir vor, du baust in Figma deine ersten Screens für eine kleine Buchungs-App, zum Beispiel für ein Yogastudio. Nach einem Abend hast du zwölf Screens, auf jedem ein paar Buttons und eine Liste mit Kurskarten. Dann kommt die erste Rückmeldung: Der Button soll nicht mehr „Buchen“ heißen, sondern „Platz reservieren“. Der Text ist länger, der Button muss breiter werden, und auf jedem Screen rutschen die Elemente daneben nicht von allein mit. Du klickst dich durch zwölf Screens, verschiebst Rechtecke von Hand und merkst nebenbei, dass deine Buttons gar nicht alle gleich aussehen. Einer hat einen Eckenradius von 8 Pixeln, ein anderer von 6.

Genau dieses Problem lösen drei Grundbausteine in Figma: Frames, Auto Layout und Komponenten. Frames geben deinen Elementen einen Rahmen. Auto Layout sorgt dafür, dass sich Elemente selbst anordnen, wenn sich Inhalte ändern. Und Komponenten machen aus einem Button ein Bauteil, das du einmal gestaltest und überall wiederverwendest. Wer diese drei Werkzeuge versteht, arbeitet in Figma nicht mehr wie in einem Zeichenprogramm, sondern wie mit einem Baukasten.

Dieser Artikel richtet sich an alle, die Figma gerade erst öffnen oder bisher vor allem Rechtecke und Texte auf die Arbeitsfläche gezogen haben. Du brauchst kein Vorwissen. Als durchgehendes Beispiel dient die Buchungs-App aus dem Szenario oben, konkret eine Kurskarte mit Titel, Uhrzeit und Button.

## Bevor du loslegst: Figma in fünf Minuten

Figma ist ein Design-Werkzeug, mit dem du Oberflächen für Websites und Apps gestaltest. Es läuft im Browser und als Desktop-App, und mehrere Personen können gleichzeitig in derselben Datei arbeiten. Einen kurzen Überblick über das Werkzeug findest du auch in den Ressourcen unter [Figma](https://insideuxdesign.com/de/ressourcen/figma).

Eine Figma-Datei besteht aus einer oder mehreren Seiten. Jede Seite ist eine unendlich große Arbeitsfläche, im Englischen „Canvas“ genannt. Links siehst du das Ebenen-Panel (Layers), in dem alle Objekte der Seite als Liste stehen. Rechts sitzt die Seitenleiste mit den Eigenschaften des gerade ausgewählten Objekts, also Größe, Farbe, Schrift oder eben Auto Layout. Fast alles, was in diesem Artikel passiert, spielt sich in dieser rechten Seitenleiste ab.

Zum Lernen reicht der kostenlose Starter-Plan. Laut Figma-Hilfe kannst du dort unbegrenzt viele Entwürfe (Drafts) anlegen, also Dateien, die du keinem Team-Ordner zuordnest. Im Team-Bereich sind insgesamt drei Design-Dateien möglich, der Versionsverlauf reicht 30 Tage zurück, und Team-Bibliotheken gibt es nicht. Was das für Komponenten bedeutet, liest du weiter unten. Die Unterschiede der bezahlten Pläne im Detail beleuchtet der Artikel [Design Tokens in Figma](https://insideuxdesign.com/de/blog/design-tokens-in-figma-farben-und-abstaende-mit-variables-einmal-festlegen). Aktuelle Preise stehen auf der Preisseite von Figma.

## Frames: der Rahmen für alles

Ein Frame ist ein Container, also ein Behälter für andere Ebenen wie Formen, Bilder und Texte. Das klingt unspektakulär, ist aber die wichtigste Grundlage in Figma. Fast alle Funktionen, um die es in diesem Artikel geht, funktionieren nur mit Frames: Auto Layout, Raster und Constraints, also Regeln dafür, wie sich ein Element verhält, wenn sein Container größer oder kleiner wird.

### Einen Frame anlegen

Das Frame-Werkzeug erreichst du über die Werkzeugleiste oder mit der Taste `F` (alternativ `A`). Ist das Werkzeug aktiv, zeigt die rechte Seitenleiste Vorlagen für typische Formate, zum Beispiel Phone, Tablet und Desktop. Ein Klick auf eine Vorlage, und du hast einen Frame in der passenden Größe für einen Smartphone-Screen.

Frames, die direkt auf der Arbeitsfläche liegen, nennt Figma Top-Level-Frames. Sie sind in der Regel deine Screens und erscheinen im Ebenen-Panel fett gedruckt. Frames lassen sich aber auch verschachteln: Ein Frame innerhalb eines anderen Frames ist gleichzeitig Kind und Elternteil. Genau das brauchst du gleich für die Kurskarte. Der Screen ist ein Frame, die Karte darin ist ein Frame, und der Button in der Karte ist wieder ein Frame.

Hast du schon Elemente auf der Arbeitsfläche, kannst du sie markieren und mit `Strg + Alt + G` (Mac: `Cmd + Option + G`) in einen Frame packen.

### Frame oder Gruppe?

Am Anfang verwechseln viele Frames mit Gruppen. Beide fassen mehrere Ebenen zusammen, verhalten sich aber unterschiedlich. Eine Gruppe (`Strg + G`, Mac: `Cmd + G`) hat keine eigene Größe. Ihre Grenzen ergeben sich aus den enthaltenen Elementen. Verschiebst du ein Element, wächst oder schrumpft die Gruppe mit. Ein Frame dagegen hat eine eigene, unabhängige Größe.

Daraus folgt eine einfache Faustregel, die sich auch aus der Figma-Dokumentation ableiten lässt: Gruppen eignen sich für Dinge, die immer zusammen skaliert werden sollen, etwa ein Logo aus mehreren Formen. Für alles, was eine Struktur hat und auf Inhalte reagieren soll, also Screens, Karten, Buttons und Listen, nimmst du einen Frame. Nur Frames können Auto Layout, Layout-Raster und Constraints für ihre Inhalte haben.

### Inhalte abschneiden mit „Clip content“

In den Eigenschaften eines Frames findest du die Option „Clip content“. Ist sie aktiv, blendet Figma alles aus, was über den Rand des Frames hinausragt. Das ist praktisch für Screens, auf denen ein langes Bild nicht über den Bildschirmrand hinaus sichtbar sein soll. Wundert sich jemand, warum ein Element plötzlich halb verschwunden ist, liegt es oft an genau dieser Einstellung.

### Ordnung von Anfang an

Zwei Gewohnheiten zahlen sich sofort aus. Erstens: Benenne Frames nach ihrer Aufgabe, also „Kursliste“, „Kurskarte“ oder „Button“ statt „Frame 247“. Mit einem Doppelklick auf den Namen im Ebenen-Panel änderst du ihn. Zweitens: Wenn deine Seite voller Screens ist, helfen Sections (Abschnitte). Sie fassen mehrere Screens auf der Arbeitsfläche zusammen, etwa alle Screens für den Buchungsablauf. So findest du dich auch nach Wochen noch in deiner Datei zurecht.

## Auto Layout: Elemente ordnen sich selbst

Zurück zum Szenario vom Anfang. Der Button wird breiter, weil der Text länger ist, und alles daneben müsste mitrutschen. Ohne Auto Layout bedeutet das Handarbeit. Mit Auto Layout passiert es von allein.

Auto Layout ist eine Eigenschaft von Frames. Elemente in einem Auto-Layout-Frame werden nach festen Regeln angeordnet: in einer Richtung, mit einem bestimmten Abstand zueinander und einem Innenabstand zum Rand. Ändert sich ein Inhalt, rechnet Figma die Anordnung neu aus. Wer schon einmal mit CSS gearbeitet hat, erkennt darin das Prinzip von Flexbox wieder. Wer nicht, muss das nicht wissen, um Auto Layout zu nutzen.

### Auto Layout hinzufügen

Markiere einen Frame oder mehrere Ebenen und drücke `Umschalt + A`. Das Tastenkürzel ist auf Mac und Windows gleich. Alternativ klickst du in der rechten Seitenleiste auf „Add auto layout“. Figma schätzt dabei ab, ob die Elemente eher untereinander oder nebeneinander gemeint sind. Die Richtung kannst du danach jederzeit ändern.

Laut Figma-Hilfe gibt es vier Anordnungen:

- **Vertikal:** Elemente stehen untereinander, von oben nach unten.
- **Horizontal:** Elemente stehen nebeneinander, von links nach rechts.
- **Umbruch (Wrap):** Elemente stehen nebeneinander und rutschen in eine neue Zeile, wenn der Platz nicht reicht. Praktisch für Schlagwörter oder Filter-Chips.
- **Raster (Grid):** Elemente werden in Zeilen und Spalten angeordnet und können sich über mehrere Zellen erstrecken.

Für den Einstieg brauchst du vor allem vertikal und horizontal. Damit lässt sich ein Großteil aller Oberflächen bauen.

### Abstand und Innenabstand

Zwei Werte bestimmen, wie luftig ein Auto-Layout-Frame wirkt. Der Abstand (Gap) ist die Distanz zwischen den Elementen. Der Innenabstand (Padding) ist der Raum zwischen dem Rand des Frames und seinem Inhalt. Den Innenabstand kannst du für alle Seiten gleich setzen, getrennt für horizontal und vertikal oder für jede Seite einzeln.

Für den Button der Kurskarte heißt das zum Beispiel: horizontales Auto Layout mit dem Text darin, Innenabstand 12 Pixel oben und unten, 16 Pixel links und rechts. Kommt später ein Icon vor den Text, legst du einen Abstand von 8 Pixeln fest, und Icon und Text stehen sauber nebeneinander. Welche Abstandswerte sinnvoll sind und warum viele Teams mit einem festen Raster aus Vielfachen von 4 oder 8 arbeiten, ist ein eigenes Thema. Für den Anfang reicht es, wenige Werte konsequent zu wiederholen.

### Hug, Fill, Fixed: wie groß ein Element wird

Der vielleicht wichtigste Teil von Auto Layout ist die Frage, wie sich die Größe eines Elements verhält. Figma bietet dafür drei Einstellungen, getrennt für Breite und Höhe:

- **Hug contents (Inhalt umschließen):** Der Frame ist genau so groß wie sein Inhalt plus Innenabstand. Wird der Text länger, wird der Frame größer. Diese Einstellung gibt es nur für Auto-Layout-Frames.
- **Fill container (Container füllen):** Das Element nimmt den gesamten verfügbaren Platz in seinem übergeordneten Auto-Layout-Frame ein. Diese Einstellung gibt es nur für Kinder eines Auto-Layout-Frames.
- **Fixed (fest):** Die Größe bleibt gleich, egal was sich am Inhalt ändert. Sobald du eine Breite oder Höhe von Hand eintippst, stellt Figma auf Fixed um.

Zusätzlich kannst du Mindest- und Höchstwerte festlegen, etwa damit ein Button nie schmaler als 120 Pixel wird.

So sieht der Unterschied im Beispiel aus:

> **Vorher:** Der Button ist ein Rechteck mit fester Breite von 100 Pixeln, darüber liegt ein Text. Aus „Buchen“ wird „Platz reservieren“, der Text ragt über das Rechteck hinaus. Du ziehst das Rechteck breiter, zentrierst den Text neu und wiederholst das auf zwölf Screens.
> 
> **Nachher:** Der Button ist ein Auto-Layout-Frame mit „Hug contents“ in der Breite. Du änderst den Text, und der Button wächst von allein mit, inklusive gleichbleibendem Innenabstand.

### Verschachteln: die Kurskarte

Richtig stark wird Auto Layout, wenn du Frames ineinander steckst. Jeder verschachtelte Frame behält dabei seine eigene Richtung, seinen eigenen Abstand und Innenabstand. Die Kurskarte lässt sich so in drei Ebenen aufbauen:

1. Ganz innen steht ein vertikaler Frame mit dem Kurstitel „Vinyasa für Einsteigende“ und darunter der Zeile „Montag, 18:30 Uhr“, Abstand 4 Pixel.
2. Daneben steht der Button. Beide zusammen liegen in einem horizontalen Frame. Der Textbereich bekommt in der Breite „Fill container“, der Button „Hug contents“. So nimmt der Text allen freien Platz ein, und der Button bleibt so schmal wie nötig.
3. Ganz außen sitzt die Karte selbst: ein Frame mit Innenabstand 16 Pixel, Hintergrundfarbe und Eckenradius.

Die Kursliste ist dann nur noch ein vertikaler Auto-Layout-Frame mit mehreren Karten untereinander und 12 Pixeln Abstand. Fügst du eine Karte hinzu oder löschst eine, rücken die anderen automatisch nach. Wird der Screen breiter, etwa für ein Tablet, und die Karten stehen auf „Fill container“, ziehen sie sich mit in die Breite.

### Ausnahmen von der Regel

Manchmal soll ein Element aus der Reihe tanzen, etwa ein kleines Abzeichen „Ausgebucht“, das oben rechts über der Karte schwebt. Dafür gibt es die Einstellung „Ignore auto layout“, früher „Absolute position“ genannt. Das Element bleibt im Frame, wird aber nicht mehr mit den anderen angeordnet. Nur solche Elemente lassen sich in einem Auto-Layout-Frame mit Constraints positionieren. Für alle anderen Kinder übernimmt Auto Layout die Kontrolle.

## Komponenten: einmal bauen, überall nutzen

Mit Auto Layout passt sich der Button an seinen Text an. Bleibt das zweite Problem aus dem Szenario: Auf zwölf Screens liegen zwölf Kopien, die nach und nach auseinanderlaufen. Hier kommen Komponenten ins Spiel.

Eine Komponente ist ein wiederverwendbares Element, zum Beispiel ein Button, ein Icon oder eben die Kurskarte. Du gestaltest sie einmal und setzt sie dann beliebig oft ein. Komponenten sind auch die Bausteine jedes [Design Systems](https://insideuxdesign.com/de/glossar/design-system), also einer gemeinsamen Sammlung von Regeln und Bauteilen für ein Produkt.

### Hauptkomponente und Instanz

Zu jeder Komponente gehört ein Original, die Hauptkomponente (Main component). Jede Kopie davon ist eine Instanz. Instanzen sind mit der Hauptkomponente verbunden: Änderst du die Hauptkomponente, übernehmen alle Instanzen die Änderung. Stellst du also beim Button den Eckenradius einmal von 6 auf 8 Pixel um, ist er auf allen zwölf Screens angepasst.

Um eine Komponente anzulegen, markierst du die Ebenen, also zum Beispiel deinen Button-Frame, und drückst `Strg + Alt + K` (Mac: `Cmd + Option + K`). Alternativ wählst du im Rechtsklick-Menü „Create component“. Im Ebenen-Panel erkennst du Komponenten an einem violetten Symbol. Eine Instanz entsteht, wenn du die Hauptkomponente kopierst oder sie aus dem Assets-Bereich im linken Panel auf die Arbeitsfläche ziehst.

### Instanzen anpassen mit Overrides

Natürlich soll nicht jeder Button „Platz reservieren“ heißen. Deshalb kannst du in einer Instanz einzelne Eigenschaften überschreiben, ohne die Verbindung zur Hauptkomponente zu kappen. Diese Änderungen heißen Overrides. Typische Beispiele sind ein anderer Text, eine andere Farbe oder ein ausgeblendetes Icon. Laut Figma-Hilfe lassen sich in Instanzen auch Innenabstand und Abstand eines Auto-Layout-Frames ändern. Ebenen hinzufügen oder umsortieren kannst du in einer Instanz dagegen nicht.

Wichtig zu wissen: Überschriebene Eigenschaften bleiben überschrieben. Hast du in einer Instanz die Buttonfarbe von Hand auf Grün gesetzt und änderst später die Farbe der Hauptkomponente, bleibt diese eine Instanz grün. Alle anderen Eigenschaften, die du nicht angefasst hast, übernimmt sie weiterhin. Das ist gewollt, kann aber überraschen. Wenn eine Instanz sich nicht so verhält wie erwartet, lohnt ein Blick in die rechte Seitenleiste. Dort lassen sich Overrides auch zurücksetzen.

### Varianten: ein Button, mehrere Zustände

Ein Button kommt selten allein. Es gibt einen primären Button für die wichtigste Aktion, einen sekundären für Nebenaktionen und einen deaktivierten Zustand, wenn ein Kurs ausgebucht ist. Statt dafür drei lose Komponenten anzulegen, fasst du sie als Varianten zusammen.

Varianten bündeln ähnliche Komponenten in einem gemeinsamen Container, dem Komponentenset. Jede Variante wird über Eigenschaften (Properties) und deren Werte beschrieben. Für den Button könnten das die Eigenschaft „Typ“ mit den Werten „Primär“ und „Sekundär“ sein und die Eigenschaft „Zustand“ mit den Werten „Standard“ und „Deaktiviert“. Jede Kombination darf nur einmal vorkommen, aber du musst nicht jede mögliche Kombination anlegen.

Zum Anlegen markierst du mehrere Komponenten und klickst in der Seitenleiste auf „Combine as variants“. Danach benennst du die automatisch erzeugten Eigenschaften sinnvoll um. Figma nutzt die Variante oben links im Set als Standard. Ziehst du das Set in einen Screen, erscheint diese Variante, und über Auswahlfelder in der rechten Seitenleiste schaltest du um. Aus „Primär, Standard“ wird mit zwei Klicks „Primär, Deaktiviert“, ohne dass du eine neue Kopie suchen musst.

### Komponenten-Eigenschaften: Schalter statt Varianten

Nicht jede Abweichung braucht eine eigene Variante. Für kleinere Unterschiede bietet Figma Komponenten-Eigenschaften, die laut Figma-Hilfe auf allen Plänen verfügbar sind:

- **Text:** Macht einen Text direkt in der Seitenleiste bearbeitbar, etwa die Beschriftung des Buttons.
- **Boolean:** Ein Ein-Aus-Schalter, der eine Ebene ein- oder ausblendet, zum Beispiel das Icon im Button.
- **Instance swap:** Erlaubt, eine verschachtelte Instanz gegen eine andere Komponente auszutauschen, zum Beispiel ein Kalender-Icon gegen ein Herz-Icon.
- **Slot:** Ein flexibler Bereich in einer Komponente, in dem du in der Instanz eigene Inhalte hinzufügen und anordnen kannst, ohne sie abzulösen. Figma hat Slots im März 2026 als offene Beta eingeführt.

Für den Button bedeutet das: Statt einer Variante „mit Icon“ und einer „ohne Icon“ reicht ein Boolean-Schalter. Das hält das Komponentenset klein und übersichtlich.

### Finger weg vom Ablösen

Irgendwann begegnet dir die Option „Detach instance“ (`Strg + Alt + B`, Mac: `Cmd + Option + B`). Sie verwandelt eine Instanz in einen normalen Frame. Das Element sieht danach genauso aus wie vorher, ist aber nicht mehr mit der Hauptkomponente verbunden. Spätere Änderungen an der Komponente kommen dort nie mehr an.

Ablösen ist verlockend, wenn eine Instanz nicht genau das kann, was du gerade brauchst. Jede abgelöste Instanz ist aber eine Stelle, die später von Hand gepflegt werden muss, und damit genau das Problem vom Anfang. Besser ist es, die Hauptkomponente um eine Variante oder Eigenschaft zu erweitern, oder bewusst eine neue Komponente anzulegen.

### Wo Hauptkomponenten wohnen

Hauptkomponenten verstreut auf verschiedenen Screens zu lassen, führt schnell zu Chaos. Viele Teams legen deshalb eine eigene Seite „Komponenten“ in der Datei an und sammeln dort alle Originale. Auf den Screens liegen nur Instanzen. Löschst du versehentlich eine Hauptkomponente, bleiben ihre Instanzen laut Figma-Hilfe übrigens erhalten, und die Komponente lässt sich wiederherstellen.

Sollen Komponenten in mehreren Dateien verfügbar sein, veröffentlichst du sie als Bibliothek. Das setzt einen bezahlten Plan voraus. Im Starter-Plan bleiben Komponenten auf die jeweilige Datei beschränkt, was für die ersten Projekte völlig ausreicht.

## Schritt für Schritt: die Kurskarte als Komponente

Zum Abschluss noch einmal der gesamte Weg am Beispiel, damit du ihn direkt nachbauen kannst:

1. Lege mit `F` einen Frame mit der Vorlage für ein Smartphone an und nenne ihn „Kursliste“.
2. Schreibe einen Text „Platz reservieren“, markiere ihn und drücke `Umschalt + A`. Gib dem neuen Frame Innenabstand, Hintergrundfarbe und Eckenradius. Stelle die Breite auf „Hug contents“. Nenne den Frame „Button“.
3. Mache aus dem Button mit `Strg + Alt + K` eine Komponente. Lege eine zweite Variante für den deaktivierten Zustand an und fasse beide als Varianten zusammen.
4. Schreibe Kurstitel und Uhrzeit, markiere beide und fasse sie mit `Umschalt + A` in einem vertikalen Frame zusammen.
5. Markiere diesen Textbereich und eine Instanz des Buttons und füge wieder Auto Layout hinzu, diesmal horizontal. Stelle den Textbereich auf „Fill container“.
6. Gib dem äußeren Frame Innenabstand, Hintergrund und Eckenradius, nenne ihn „Kurskarte“ und mache auch daraus eine Komponente.
7. Setze mehrere Instanzen der Kurskarte in einen vertikalen Auto-Layout-Frame, stelle die Karten in der Breite auf „Fill container“ und passe Titel und Uhrzeit über Overrides an.

Ändere jetzt testweise den Eckenradius in der Hauptkomponente der Kurskarte oder den Text im Button. Wenn sich alle Karten mitändern und nichts verrutscht, hast du die drei Grundbausteine verstanden.

## Typische Anfängerfehler

Ein paar Stolpersteine tauchen bei fast allen auf, die mit Figma starten. Die gute Nachricht: Alle lassen sich mit wenig Aufwand beheben.

**Gruppen statt Frames.** Wer alles mit `Strg + G` gruppiert, wundert sich später, warum sich kein Auto Layout hinzufügen lässt und Elemente beim Skalieren verzerrt werden. Für Bedienelemente und Layouts sind Frames fast immer die richtige Wahl.

**Feste Größen überall.** Wer Breiten von Hand eintippt, stellt unbemerkt auf „Fixed“ um. Dann wächst der Button eben doch nicht mit. Prüfe bei Elementen, die auf Inhalte reagieren sollen, ob „Hug contents“ oder „Fill container“ eingestellt ist.

**Rechtecke als Hintergrund.** Ein Rechteck hinter einem Text, um einen Button zu bauen, ist die Gewohnheit aus klassischen Grafikprogrammen. In Figma bekommt der Frame selbst die Füllfarbe. Das spart eine Ebene und sorgt dafür, dass der Hintergrund immer zur Größe passt.

**Zu viele Varianten auf einmal.** Es ist verlockend, gleich jeden denkbaren Zustand anzulegen: Hover, gedrückt, fokussiert, mit Icon links, mit Icon rechts, in drei Größen. Daraus werden schnell Dutzende Varianten, die niemand pflegt. Starte mit den Zuständen, die deine Screens wirklich brauchen, und nutze für kleine Unterschiede Komponenten-Eigenschaften.

**Ablösen als Abkürzung.** Wie oben beschrieben: Jede abgelöste Instanz ist eine Kopie, die du später selbst pflegen musst.

## Wie es weitergeht

Frames, Auto Layout und Komponenten sind das Fundament. Der nächste Schritt ist, auch die kleinsten Gestaltungsentscheidungen wie Farben und Abstände einmal zentral festzulegen, statt sie in jeder Komponente neu einzutippen. Wie das mit Figma Variables funktioniert, zeigt der Artikel [Design Tokens in Figma](https://insideuxdesign.com/de/blog/design-tokens-in-figma-farben-und-abstaende-mit-variables-einmal-festlegen). Er baut direkt auf den Grundlagen hier auf.

Wenn du verstehen willst, wie aus einzelnen Komponenten ein System wird, lohnt ein Blick auf [Atomic Design](https://insideuxdesign.com/de/glossar/atomic-design) und den Artikel [Design Systems für kleine Teams](https://insideuxdesign.com/de/blog/design-systems-fuer-kleine-teams). Und wer noch überlegt, ob Figma überhaupt das richtige Werkzeug ist, findet im Vergleich [Sketch vs Figma in 2026](https://insideuxdesign.com/de/blog/sketch-vs-figma-in-2026-was-du-waehlen-solltest) eine Entscheidungshilfe.

## Fazit

Figma wird erst dann richtig schnell, wenn du aufhörst, Screens zu zeichnen, und anfängst, sie zu bauen. Frames geben jedem Element einen Rahmen mit eigener Größe. Auto Layout sorgt dafür, dass sich Inhalte selbst anordnen und mitwachsen, wenn sich Texte ändern. Komponenten machen aus wiederkehrenden Elementen Bauteile, die du an einer Stelle pflegst und überall nutzt.

Im Szenario vom Anfang bedeutet das: Die Änderung von „Buchen“ zu „Platz reservieren“ ist eine Sache von Sekunden. Du änderst den Text in der Hauptkomponente, und alle zwölf Screens ziehen mit, ohne dass etwas verrutscht. Fang klein an, mit einem Button und einer Karte. Wenn diese beiden sauber funktionieren, folgt der Rest fast von allein.

## Checkliste

- Screens, Karten und Buttons als Frames anlegen, Gruppen nur für Dinge wie Logos nutzen.
- Frames nach ihrer Aufgabe benennen und Screens mit Sections ordnen.
- Für alles, was Inhalte stapelt oder nebeneinander stellt, Auto Layout mit `Umschalt + A` hinzufügen.
- Abstand und Innenabstand mit wenigen, wiederkehrenden Werten setzen.
- Größen bewusst wählen: „Hug contents“ für Buttons und Labels, „Fill container“ für Elemente, die den Platz füllen sollen, „Fixed“ nur, wenn es wirklich fest sein soll.
- Wiederkehrende Elemente mit `Strg + Alt + K` zu Komponenten machen.
- Zustände als Varianten bündeln, kleine Unterschiede über Komponenten-Eigenschaften lösen.
- Instanzen über Overrides anpassen, nicht ablösen.
- Alle Hauptkomponenten auf einer eigenen Seite sammeln.

## Quellen

- [Figma Help Center: Starter plan overview](https://help.figma.com/hc/en-us/articles/13838684089751-Starter-plan-overview)
- [Figma: Pricing](https://www.figma.com/pricing/)
- [Figma Help Center: Frames in Figma Design](https://help.figma.com/hc/en-us/articles/360041539473)
- [Figma Best Practices: Groups versus frames](https://www.figma.com/best-practices/groups-versus-frames/)
- [Figma Help Center: Guide to auto layout](https://help.figma.com/hc/articles/360040451373)
- [Figma Help Center: Guide to components in Figma](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma)
- [Figma Help Center: Create components to reuse in designs](https://help.figma.com/hc/en-us/articles/360038663154-Create-components-to-reuse-in-designs)
- [Figma Blog: Feature highlight, component overrides](https://www.figma.com/blog/figma-feature-highlight-component-overrides/)
- [Figma Help Center: Create and use variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants)
- [Figma Help Center: Explore component properties](https://help.figma.com/hc/en-us/articles/5579474826519-Explore-component-properties)
- [Figma Help Center: Create and use slots](https://help.figma.com/hc/en-us/articles/38231200344599-Create-and-use-slots-to-build-flexible-components-in-Figma-Design)
- [Figma Forum: Slots is rolling out in open beta](https://forum.figma.com/product-updates-3/slots-is-rolling-out-in-open-beta-51584)
- [Figma Help Center: Detach an instance from the component](https://help.figma.com/hc/en-us/articles/360038665754-Detach-an-instance-from-the-component)