Component Properties in Figma sind definierbare Attribute einer Main Component, die es erlauben, Text, Sichtbarkeit und eingebettete Instanzen direkt im Instanz-Panel zu ändern – ohne in die Komponente navigieren zu müssen.
Rubrik: Software & Tools Deep-Dive · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Komponenteneigenschaften, Component Props, Instanz-Properties
Was sind Component Properties?
Component Properties (eingeführt 2022) sind benannte Steuerpunkte einer Komponente, die im Instanz-Panel als Felder erscheinen. Es gibt drei Typen:
- Text Property – steuert den Inhalt eines Textelements.
- Boolean Property – steuert die Sichtbarkeit einer Ebene (true = sichtbar, false = unsichtbar).
- Instance Swap Property – ermöglicht das Tauschen einer eingebetteten Komponente (z. B. ein Icon-Slot).
Erklärung
Text Property
Eine Text Property verknüpft ein Textelement in der Komponente mit einem benannten Attribut. Im Instanz-Panel erscheint dann ein Eingabefeld mit diesem Namen. Ändert man den Wert, wird der Text der Instanz aktualisiert, ohne dass man in die Komponentenhierarchie navigieren muss.
Anwendungsfall: Ein Card-Component hat eine Text Property Headline und eine Description. Der Designer füllt beide Felder direkt im Seitenbereich aus.
Erstellen: Main Component auswählen → im rechten Panel unter „Properties" auf + klicken → „Text" wählen → Textelement aus der Dropdown-Liste wählen → Standardwert setzen.
Boolean Property
Eine Boolean Property steuert die Sichtbarkeit eines Layers in der Komponente. Sie erscheint im Instanz-Panel als Checkbox. Typische Anwendungsfälle sind optionale Elemente wie Icons, Badges, Suffix-Labels oder Trennlinien.
Anwendungsfall: Ein Button-Component hat eine Boolean Property Has Icon. Ist sie true, erscheint ein Icon-Frame; ist sie false, ist der Frame unsichtbar, und das Auto-Layout zieht sich zusammen.
Erstellen: Main Component auswählen → Properties + → „Boolean" → Layer aus der Dropdown wählen → Standardwert festlegen.
Instance Swap Property
Eine Instance Swap Property verknüpft einen Slot (einen eingebetteten Component-Frame) mit einem benannten Attribut, das im Instanz-Panel als Dropdown erscheint. So kann man das Icon, den Avatar oder ein anderes eingebettetes Element mit einem Klick austauschen.
Anwendungsfall: Ein MenuItem-Component hat eine Instance Swap Property Icon. Im Instanz-Panel kann man aus allen Icons der Icon-Library wählen – ohne Drag-and-Drop.
Erstellen: Main Component auswählen → Properties + → „Instance Swap" → eingebetteten Component-Frame aus Dropdown wählen → Preferred Values (bevorzugte Auswahloptionen) definieren.
Preferred Values
Für Instance Swap Properties kann man eine Liste bevorzugter Komponenten definieren, die im Dropdown bevorzugt angezeigt werden. Das verhindert, dass Designer aus der gesamten Library suchen müssen, sondern nur relevante Optionen sehen.
Zusammenspiel mit Variants
Component Properties und Variants ergänzen sich: Variants steuern die Ausprägung der Komponente (Typ, Größe, Zustand), während Component Properties den Inhalt und die Sichtbarkeit einzelner Elemente innerhalb einer Variante steuern. Zusammen decken sie nahezu alle UI-Anpassungsszenarien ab, ohne dass Designer in den Edit-Mode müssen.
Beispiele
- Komponenten-System: Ein
Toast-Notification-Component hat Properties:Message(Text),Type(Variant: Success/Error/Warning),Has Icon(Boolean),Icon(Instance Swap). Der Designer konfiguriert jede Notification-Instanz vollständig im Panel. - Responsive Design: Ein
Avatar-Component hat PropertiesName(Text),Has Badge(Boolean) – für mobile und desktop Layouts identisch konfigurierbar. - Prototyping/Handoff: Entwickler sehen im Dev-Mode alle Properties als dokumentierte Prop-Schnittstelle – direkt übertragbar auf React/Vue/Angular Component Props.
- Team-Workflow: Designer ohne tiefes Figma-Wissen können Instanzen vollständig über das Panel anpassen, ohne versehentlich die Struktur zu verändern.
- Kombination mit Variablen: Text Properties können mit Variablen verknüpft werden (Figma 2024), sodass Textinhalte aus einem zentralen Variablensatz kommen.
In der Praxis
Text Property erstellen: Main Component auswählen → rechtes Panel → „Component Properties" → + → Text → Textelement zuweisen Boolean Property erstellen: Wie oben → Boolean → Layer zuweisen → Default: true/false Instance Swap erstellen: Wie oben → Instance Swap → eingebetteten Frame zuweisen → Preferred Values wählen Property in Instanz nutzen: Instanz auswählen → im Panel direkt die Property-Felder bearbeiten Property umbenennen: Main Component → Panel → Property-Name anklicken → umbenennen
Vergleich & Abgrenzung
Vor Component Properties (vor 2022) musste man für jede Textvariante in die Komponente klicken und manuell editieren. Das war fehleranfällig, weil Overrides beim Variant-Wechsel verloren gehen konnten. Component Properties lösen dieses Problem strukturell, indem sie explizite Schnittstellen definieren – ähnlich wie Props in React. Im Vergleich zu Sketch Smart Layout sind Figmas Properties deutlich mächtiger und benutzerfreundlicher.
Häufige Fragen (FAQ)
Kann ich eine Property auf mehrere Layers gleichzeitig anwenden? Text Properties können aktuell nur einem Textelement zugeordnet werden. Boolean Properties können dagegen theoretisch einen Frame steuern, der mehrere Elemente enthält – so kann man mit einer Checkbox ganze Gruppen ein-/ausblenden.
Gehen Component Properties verloren, wenn ich die Komponente in eine Variante umwandle? Nein. Properties bleiben beim Hinzufügen zu einem Variant-Set erhalten und gelten für alle Varianten des Sets. Eine Property Has Icon erscheint im Panel unabhängig davon, welche Variante aktiv ist.
Verwandte Einträge
Weiterführend
- Figma Help Center – help.figma.com/hc/en-us/articles/5579474826519
- Figma (2024): Component properties. Figma Docs.
- Online: Figma Blog – „Introducing component properties"
