Das kommt dir wahrscheinlich bekannt vor. Du arbeitest mit einer Komponenteninstanz in Figma und möchtest nur eine Kleinigkeit ändern – ein Icon austauschen, ein Logo ersetzen oder ein zusätzliches Element hinzufügen. Und was ist die typische Lösung? Instance detachen. Damit wird die Verbindung zur ursprünglichen Komponente getrennt und es entsteht ein eigenständiges Element.
Es funktioniert… aber optimal ist es nicht. Die Verbindung zum Designsystem geht verloren, die Konsistenz leidet und mit der Zeit wird die Komponentenbibliothek unübersichtlich. Genau dieses Problem versucht Figma jetzt mit einer neuen Funktion zu lösen: Slots.
Die Funktion ist aktuell in der Open Beta verfügbar und soll Komponenten flexibler machen – ohne dass man sie vom Designsystem trennen muss.
Was sind Figma Slots?
Slots sind definierte Bereiche innerhalb einer Komponente, in die man eigenen Inhalt einfügen kann – zum Beispiel Text, Bilder oder sogar andere Komponenten – direkt innerhalb der Instanz.
Der größte Vorteil? Die Komponente bleibt mit dem Designsystem verbunden, sodass Konsistenz erhalten bleibt und gleichzeitig mehr Flexibilität entsteht.
Wenn du aus der Entwicklung kommst, wird dir dieses Konzept bekannt vorkommen. Es funktioniert ähnlich wie Komponenten im Code – ein Container definiert die Struktur, während der Inhalt variabel bleibt, ohne dass die gesamte Komponente dupliziert werden muss.
Welches Problem lösen Slots?
Aus Sicht von Designsystemen können Slots die Anzahl an Varianten deutlich reduzieren. Anstatt dutzende Kombinationen zu erstellen, kann man eine Basis-Komponente verwenden und den Inhalt flexibel einfügen. Das macht die Komponentenbibliothek übersichtlicher und das gesamte Designsystem leichter wartbar.
Meiner Meinung nach ist das eine der praktischsten Neuerungen, die Figma in letzter Zeit eingeführt hat. Wenn sich Slots im Alltag durchsetzen, können sie die Arbeit mit Komponenten deutlich vereinfachen und gleichzeitig für mehr Ordnung im Designsystem sorgen.
Slots vs Variants: Was ist der Unterschied?
Wenn du schon länger mit Figma arbeitest, hast du wahrscheinlich Variants genutzt, um Flexibilität abzubilden. Variants sind ideal, um verschiedene Zustände zu definieren – zum Beispiel Größe, Stil, Typ oder Interaktionszustände wie Hover oder Disabled. Sie ermöglichen es, mehrere Konfigurationen in einer Komponente zu bündeln und einfach zwischen ihnen zu wechseln.
Schwieriger wird es jedoch, wenn du den Inhalt innerhalb einer Komponente ändern möchtest und nicht nur ihren Zustand. Zum Beispiel ein Icon in einem Button austauschen, ein Badge zur Navigation hinzufügen oder unterschiedliche Inhalte in eine Card einsetzen. In solchen Fällen können Varianten schnell ausufern – und dein Designsystem wird schwerer zu verwalten.
Genau hier kommen Slots ins Spiel.
Hier ist eine vereinfachte Übersicht:
| Variants | Slots |
| Definieren verschiedene Versionen einer Komponente | Definieren Bereiche für dynamischen Inhalt |
| Werden für Zustände und Konfigurationen genutzt | Werden für Inhalte genutzt |
| Können viele Kombinationen erzeugen | Reduzieren die Anzahl an Kombinationen |
Interessant ist, wie stark dieses Prinzip den Mustern aus der Frontend-Entwicklung ähnelt. In Frameworks wie Vue oder bei der Arbeit mit Web Components definiert man häufig die Struktur einer Komponente und übergibt den Inhalt dynamisch über Slots. Das Layout bleibt gleich, aber der Inhalt passt sich an.
Deshalb fühlen sich Slots in Figma wie ein natürlicher nächster Schritt an – besonders für Teams, in denen Design und Entwicklung eng aufeinander abgestimmt sein müssen. Anstatt dutzende Varianten zu verwalten, kann man mit einer einzigen, gut strukturierten Komponente arbeiten, die kontrollierte Flexibilität ermöglicht.
Und wichtig: Slots ersetzen Variants nicht, sie ergänzen sie. Variants kümmern sich um die Logik (Zustand, Größe, Typ), während Slots den Inhalt steuern.
Wie funktionieren Slots in der Praxis?
Am einfachsten versteht man Slots, wenn man sie in Aktion sieht. Im folgenden Video siehst du, wie Slots direkt in Figma funktionieren.
Werden Slots zum neuen Standard in Figma?
Slots zeigen, wohin sich die Arbeit mit Komponenten in Figma entwickeln könnte. Anstatt auf Workarounds zurückzugreifen oder immer mehr Varianten zu erstellen, bieten sie einen flexibleren und intuitiveren Ansatz.
Gleichzeitig bringen sie Design näher an die tatsächliche Umsetzung im Code – was die Zusammenarbeit zwischen Designern und Entwicklern deutlich erleichtern kann.
Wenn du regelmäßig mit Designsystemen arbeitest, lohnt es sich definitiv, diese Funktion auszuprobieren. Vielleicht wirkt es auf den ersten Blick wie eine kleine Änderung – aber sie hat das Potenzial, grundlegend zu verändern, wie Komponenten in Figma entworfen und verwaltet werden.
