Components in Figma sind wiederverwendbare Design-Elemente, bei denen Änderungen an der Master-Komponente automatisch auf alle Instanzen übertragen werden – das Fundament jedes skalierbaren Design Systems.
Rubrik: Software & Tools Deep-Dive · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Komponenten, Master-Component, Symbol (Sketch), Symbol/Component (Adobe XD)
Was sind Components?
Eine Component ist ein spezieller Frame in Figma, der als Vorlage (Master) fungiert. Alle daraus abgeleiteten Kopien heißen Instanzen. Ändert man die Master-Komponente – Farbe, Schrift, Struktur –, werden alle Instanzen im gesamten Projekt automatisch aktualisiert. So bleibt ein Design System über Hunderte von Screens hinweg konsistent.
Erklärung
Erstellen einer Komponente
Eine Komponente erstellt man, indem man ein Element auswählt und Cmd+Alt+K (Mac) bzw. Ctrl+Alt+K (Windows) drückt oder im Kontextmenü „Create Component" wählt. Das Element erhält ein lila Rauten-Icon im Layer-Panel. Der Frame wird zur sogenannten Main Component (früher: Master Component).
Main Component vs. Instance
- Main Component: Die Originalversion. Änderungen hier propagieren an alle Instanzen.
- Instance: Eine Kopie der Main Component. Instanzen können lokal überschrieben werden (Overrides), ohne die Main Component zu verändern.
Component-Hierarchie und Benennung
Figma nutzt Schrägstriche (/) in Namen, um Komponenten in Kategorien zu gruppieren: Button/Primary, Button/Secondary, Icon/16px/Arrow. Im Assets-Panel erscheint dann eine Baumstruktur dieser Kategorien, was das Finden von Komponenten in großen Design-Systemen erheblich vereinfacht.
Shared Libraries
Components können in einer Shared Library veröffentlicht werden. Dann stehen sie teamübergreifend in anderen Figma-Dateien zur Verfügung. Ein Designer aktualisiert die Bibliotheksdatei, alle anderen bekommen eine Update-Benachrichtigung und können die neuen Versionen mit einem Klick übernehmen.
Nested Components
Komponenten können andere Komponenten enthalten. Ein Card-Component kann einen Button-Component und einen Avatar-Component einbetten. Ändert man den Button in der Bibliothek, aktualisiert sich der auch innerhalb aller Card-Instanzen.
Component Properties
Seit 2022 unterstützen Components Component Properties: Text-Properties, Boolean-Properties (sichtbar/unsichtbar) und Instance-Swap-Properties, die in der Instanz direkt im Panel geändert werden können, ohne in den Edit-Mode wechseln zu müssen.
Detach from Component
Instanzen können von ihrer Main Component getrennt werden: Rechtsklick → Detach Instance. Danach ist das Element ein gewöhnlicher Frame ohne Verbindung – sinnvoll für einmalige Sonderanpassungen.
Beispiele
- Komponenten-System: Ein
Input/Default-Component wird in einem Formular 15-mal verwendet. Ändert man die Rahmenfarbe in der Main Component, aktualisieren sich alle 15 Instanzen sofort. - Responsive Design: Ein
Navigation/Desktop-Component und einNavigation/Mobile-Component in derselben Gruppe sorgen für plattformspezifische Konsistenz. - Prototyping/Handoff: Entwickler sehen im Dev-Mode den Component-Namen, der direkt als Code-Klassen-Name genutzt werden kann (
<Button variant="primary">). - Team-Workflow: Die Designerin veröffentlicht die Bibliothek; Produktteams abonnieren sie und erhalten Updates per Notification in Figma.
- Kombination mit Varianten: Main Components werden mit Variants-Sets kombiniert – z. B. alle Zustände eines Buttons (Default, Hover, Disabled) als ein einziges Varianten-Set.
In der Praxis
Komponente erstellen: Element auswählen → Cmd+Alt+K (Mac) / Ctrl+Alt+K (Win) Instanz einfügen: Im Assets-Panel (Shift+I) Komponente suchen → in Canvas ziehen Main Component aufrufen: Instanz auswählen → Im Panel auf „Go to main component" klicken (lila Button) Komponente bearbeiten: Doppelklick auf Main Component → Änderungen vornehmen Bibliothek veröffentlichen: Assets-Panel → Team Library → Publish
Vergleich & Abgrenzung
| Figma Components | Sketch Symbols | Adobe XD Components | |
|---|---|---|---|
| Shared Library | Ja (Team Library) | Ja (Shared Library) | Ja |
| Nested | Ja | Ja | Ja |
| Component Properties | Ja (seit 2022) | Begrenzt | Begrenzt |
| Varianten | Ja (Variants) | Nein (nativ) | Nein (nativ) |
Der wichtigste Vorteil gegenüber Sketch: Figma-Components können als Varianten-Sets mit Properties definiert werden – das macht komplexe Zustandsverwaltung ohne separate Dateien möglich.
Häufige Fragen (FAQ)
Kann ich eine Instance in eine andere Main Component umwandeln? Ja. Instanz auswählen → im Panel unter „Instance" auf den Namen klicken → „Swap Instance" wählen. Alternativ im Assets-Panel die gewünschte Komponente per Drag-and-Drop auf die Instanz ziehen.
Was passiert mit Overrides, wenn ich die Main Component ändere? Overrides auf Instanzebene bleiben erhalten, solange die Override-Schicht in der Main Component noch existiert. Wird eine Schicht in der Main Component umbenannt oder gelöscht, geht der entsprechende Override verloren.
Kann eine Komponente in mehreren Bibliotheken gleichzeitig sein? Nein. Eine Komponente gehört immer zu genau einer Datei. Über Team-Libraries können sie aber in beliebig vielen anderen Dateien referenziert werden.
Verwandte Einträge
Weiterführend
- Figma Help Center – help.figma.com/hc/en-us/articles/360038662654
- Figma (2024): Components in Figma. Figma Docs.
- Online: DesignSystems.com – Component Architecture Guide
