Components (Komponenten) in Figma sind wiederverwendbare Design-Elemente, die aus einer Main Component (Hauptkomponente) und beliebig vielen Instanzen bestehen – Änderungen an der Main Component propagieren sich automatisch auf alle Instanzen.
Rubrik: Software & Tools · Unterrubrik: Figma · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Symbols (Sketch), Master Component, Component Set; Tastenkürzel Strg+Alt+K / Cmd+Option+K
Was sind Components?
Components sind das Herzstück jedes Design-Systems in Figma. Das Prinzip: Man erstellt eine Main Component (erkennbar am ausgefüllten Rautenicon im Layer-Panel), die als Vorlage dient. Jedes Mal, wenn diese Komponente in ein Design platziert wird, entsteht eine Instanz (Kopie mit Verbindung zur Main). Ändert man die Main Component – z. B. die Schriftfarbe eines Buttons – aktualisieren sich alle Instanzen in der gesamten Datei (und teamweit, wenn die Komponente in einer Shared Library liegt) automatisch.
Dieses Prinzip drastisch reduziert Inkonsistenzen in großen Design-Projekten und beschleunigt Überarbeitungen erheblich.
Erklärung
Main Component erstellen
Eine Main Component wird aus einem Frame oder einer Auswahl von Elementen erstellt:
- Tastenkürzel:
Strg+Alt+K/Cmd+Option+K - Rechtsklick auf ein Element → „Create Component"
- Im Toolbar-Menü oben: das Rautensymbol
Die Main Component ist erkennbar am ausgefüllten Rautenicon (◆) im Layer-Panel. Sie sollte auf einer separaten Seite namens „Components" oder „_Library" organisiert werden, die für normale Bearbeitungszwecke ausgeblendet bleibt.
Instanzen erstellen
Eine Instanz (erkennbar am umrissenen Rautenicon (◇) im Layer-Panel) entsteht durch:
- Kopieren der Main Component:
Strg+C→Strg+V - Drag & Drop aus dem Assets-Panel (linke Seitenleiste, Assets-Tab)
Instanzen sind mit ihrer Main Component verknüpft. Im Design-Panel rechts zeigt Figma bei ausgewählter Instanz den Namen der Hauptkomponente und einen Link zu ihr.
Component-Anatomie und Benennung
Figma empfiehlt eine hierarchische Benennung per Schrägstrich: `` Button/Primary/Default Button/Primary/Hover Button/Secondary/Default `` Diese Schreibweise erzeugt im Assets-Panel eine Ordnerstruktur, die die Übersicht in großen Libraries erhält.
Main Component editieren
Um die Main Component zu bearbeiten, kann man direkt auf sie doppelklicken oder über eine Instanz → Rechtsklick → „Go to Main Component" navigieren. Änderungen an der Main Component propagieren sich sofort an alle Instanzen – es sei denn, eine Instanz hat eine Override gesetzt (mehr dazu im Eintrag Instances & Overrides).
Component-Beschreibung und Properties
Seit Figma 2022 können Components Component Properties haben:
- Text Properties: Verbinden einen Text-Layer mit einer editierbaren Eigenschaft in der Instanz-Seitenleiste.
- Boolean Properties: Ein Layer kann per Toggle ein- oder ausgeblendet werden (z. B. ein Icon oder ein Badge).
- Instance Swap Properties: Eine Instanz innerhalb der Komponente kann durch eine andere Komponente ersetzt werden.
- Variant Properties: Steuern, welche Variante der Komponente angezeigt wird (mehr dazu unter Variants).
Component Properties erleichtern das Anpassen von Instanzen erheblich, da alle relevanten Einstellungen gebündelt im rechten Panel erscheinen.
Assets-Panel
Das Assets-Panel (linke Seitenleiste, Shift+Alt+I / Shift+Option+I) ist die Bibliothek aller verfügbaren Components. Es zeigt Local Components (in der aktuellen Datei) und Components aus verknüpften Libraries. Components können per Drag & Drop auf die Canvas gezogen werden.
Detach from Component
Eine Instanz kann von ihrer Main Component getrennt werden: Rechtsklick → „Detach Instance" (Strg+Alt+B / Cmd+Option+B). Das Element verliert dabei seine Verbindung zur Main Component und wird zu einem normalen Frame/Group. Danach werden keine Updates der Main mehr übernommen. Diese Option sollte sparsam verwendet werden.
Beispiele
- Button-Komponente: Eine Primary Button Main Component mit Hintergrundfarbe, Text-Label und Padding. Alle Buttons im Projekt sind Instanzen – ändert man die Hintergrundfarbe der Main, ändern sich alle Buttons gleichzeitig.
- Icon-Komponente: Jedes Icon aus einer Icon-Library ist eine eigene Komponente. Per „Instance Swap" kann man in einer Instanz einfach das Icon tauschen, ohne die gesamte Komponente zu ersetzen.
- Card-Komponente: Eine Produktkarte mit Bild, Titel, Preis und CTA-Button. Boolean Properties steuern, ob ein Sale-Badge angezeigt wird oder nicht.
- Input-Komponente: Ein Formularfeld mit verschiedenen Zuständen (Default, Focus, Error) als Varianten-Set. Text Properties ermöglichen das Anpassen von Placeholder und Label direkt im Instanz-Panel.
- Navigation Bar: Eine App-Navigationsleiste als Komponente. Die aktive Tab kann per Variant gewechselt werden.
In der Praxis
Shortcuts:
- Main Component erstellen:
Strg+Alt+K/Cmd+Option+K - Instanz von Main Component trennen:
Strg+Alt+B/Cmd+Option+B - Zur Main Component springen: Rechtsklick auf Instanz → „Go to Main Component"
- Assets-Panel öffnen:
Shift+Alt+I/Shift+Option+I(dann Assets-Tab wählen)
Best Practices:
- Main Components auf einer dedizierten Seite organisieren (z. B. „_Components" oder „🧱 Components").
- Hierarchische Benennung mit Schrägstrich für klare Assets-Panel-Struktur verwenden.
- Component Properties statt manueller Overrides nutzen – das macht Instanzen kontrollierbarer.
- Auto Layout in Main Components integrieren für dynamisch flexible Instanzen.
Häufige Fehler:
- Main Components im gleichen Design-Flow ablegen statt auf einer separaten Seite – das führt zu Verwirrung.
- Instanzen direkt auf der Main-Component-Seite platzieren – das erzeugt unerwünschte Kopien.
- Zu viele Variants erstellen statt Boolean Properties zu verwenden – erhöht unnötig die Komplexität.
Vergleich & Abgrenzung
Sketch hat „Symbols", die ebenfalls eine Master-Instanz-Logik verfolgen, aber weniger mächtig in Bezug auf Properties und Variants sind. Adobe XD nennt vergleichbare Elemente „Components" (seit 2019), unterstützt aber keine Component Properties in dieser Tiefe. Framer nutzt React-basierte Komponenten, die noch mächtiger, aber für Designer ohne Coding-Kenntnisse schwerer zugänglich sind. Figma-Components sind der industrieweite Standard für kollaboratives Design-System-Management.
Häufige Fragen (FAQ)
Kann ich eine Instanz in eine andere Main Component umwandeln? Ja, durch Rechtsklick → „Swap Component" oder per Instance Swap im Design-Panel. Das ersetzt die Instanz durch eine Instanz einer anderen Komponente, während Override-Werte (soweit möglich) beibehalten werden.
Was passiert, wenn ich die Main Component lösche? Alle Instanzen verlieren ihre Verbindung und werden zu normalen Frames/Groups. Eine Warnung erscheint, bevor Figma die Main Component löscht. Dieser Vorgang ist nicht rückgängig zu machen, wenn nicht eine vorherige Version in der Versionshistorie existiert.
Können Components aus anderen Dateien genutzt werden? Ja, über Shared Libraries. Eine Datei muss als Library veröffentlicht werden, dann können andere Team-Dateien ihre Components nutzen. Das ist der Standard-Ansatz für teamweite Design-Systeme.
Verwandte Einträge
Weiterführend
- Figma Help Center – help.figma.com/de
- Figma-Dokumentation: „Components in Figma" – help.figma.com/hc/en-us/articles/360038662654
- Femke van Schoonhoven: „How to build a component library in Figma" (YouTube, 2024)
