Wer diese Funktion verwenden kann
Verfügbar in allen Abos
Jede Person mit Schreibzugriff auf eine Datei in einem kostenpflichtigen Team hat Zugriff auf die Komponenten-Testumgebung.
Jede Person mit Lesezugriff auf die Datei kann die Komponenten aus dieser Bibliothek nutzen.
Du hast noch nicht viel Erfahrung mit Komponenten? Unseren Leitfaden zu Komponenten-Bibliotheken ansehen →
Komponenten sind UI-Elemente, die du in deinen Designs wiederverwenden kannst.
- Die Hauptkomponente definiert die Eigenschaften des Elements.
- Eine Instanz ist eine Kopie der Komponente, die du in deinen Designs wiederverwenden kannst.
Es gibt verschiedene Wege, um Komponenteninstanzen zu erstellen und in deine Designs einzufügen.
- Über den Assets-Tab in der linken Seitenleiste
- Über die detaillierte Komponentenansicht, auf die du über den Assets-Tab zugreifen kannst
- Verwende den Asset-Tab im Aktionsmenü
- Durch Kopieren oder Duplizieren einer Instanz
Tipp: Komponenteninstanzen lassen sich ohne Neuanordnung deiner Datei einfach an das Entwicklerinnenteam übergeben, mithilfe einer Markierungsinstanz in Dev Mode als „Bereit für die Entwicklung“ →
Assets-Tab
Im Assets-Tab in der linken Seitenleiste kannst du nach Komponenten suchen, um sie deiner Datei hinzuzufügen. Du kannst auswählen, welche Bibliotheken im Assets-Tab verfügbar sein sollen.
So öffnest du den Assets-Tab:
- Wähle den Assets-Tab in der linken Seitenleiste aus oder verwende den Tastaturbefehl:
- Mac: ⌥ Wahltaste 2
- Windows: Alt 2
- Wähle eine Bibliothek mit der Komponente aus, die du verwenden möchtest.
- Suche die Komponente, die du verwenden möchtest
- Klicke und ziehe eine Komponente in die Arbeitsfläche, um eine Instanz dieser Komponente zu erzeugen.
Tipp: Du kannst das Erscheinungsbild des Assets-Tabs an deine Vorlieben anpassen. Klicke auf , um zwischen einer Raster- oder Listenansehen zu wechseln und Unterordner ein- oder auszublenden.
Hinweis: Fehlt die Bibliothek, die du benötigst, im Assets-Tab? Klicke auf , um verfügbare Bibliotheken in deinem Team oder deiner Organisation zu durchsuchen und sie zu deiner Datei hinzuzufügen.
- Bibliotheken für deine Entwürfe verwalten
- Bibliotheken in Designdateien verwalten
- Bibliotheken innerhalb des Teams verwalten
- Standardbibliotheken der Organisation verwalten
Detaillierte Komponentenansicht
In der detaillierten Komponentenansicht ist Folgendes zu sehen:
- Die Komponentenunterlagen
- Die zugehörige Bibliothek
- Eine Vorschau der Komponente im Standardmodus
Wenn du in einem bezahlten Team Schreibzugriff auf eine Bibliothek hast, erhältst du zusätzlichen Zugriff auf eine Testumgebungskomponente.
Von der Testumgebungskomponente aus kannst du:
- Die Varianten der Komponente anzeigen
- Komponenteneigenschaften anzeigen und festlegen
- Komponenteneigenschaften ansehen und festlegen, falls verschachtelte Instanzen sichtbar sind
- Variablenmodi für alle auf die Komponente angewendeten Variablen ansehen und ändern
- Die Komponente auf die Arbeitsfläche einfügen
- Wähle den Assets-Tab in der linken Seitenleiste aus oder verwende den Tastaturbefehl:
- Mac: ⌥ Wahltaste2
- Windows: Alt2
- Suche die Komponente und wähle sie zum Öffnen der detaillierten Komponentenansicht aus.
- Verwende die Steuerung zur Gestaltung deiner Komponente.
- Zum Einfügen der Instanz, klicke auf Insert instance (Instanz einfügen), um die Vorschau in die Arbeitsfläche zu ziehen.
„Schnell “einfügen aus dem Aktionsmenü
Instanzen von Komponenten über deine Tastatur mit „Schnell einfügen“ einfügen. „Schnell einfügen“ öffnet das Aktionsmenü, in dem du Komponenten aus Bibliotheken suchen und ansehen kannst, die der Datei hinzugefügt wurden.
- Verwende den Tastaturbefehl Shift |, um „Schnell einfügen“ zu öffnen.
- Verwende die Such leiste, um eine bestimmte Komponente zu finden.
Tipp: Musst du eine Hauptkomponente von einer ihrer Instanzen aus finden? Klicke mit der rechten Maustaste auf eine beliebige Instanz und wähle Zur Hauptkomponente gehen oder verwende das Tastenkürzel:
- Mac: ^ Steuerung⌥ Option⌘ Befehlk
- Windows: SteuerungAltUmschaltk
Kopiere oder dupliziere eine Instanz auf der Arbeitsfläche
Duplizieren mithilfe der Tastaturbefehle
Falls du in derselben Datei arbeitest, kannst du eine Komponente duplizieren, um eine Instanz zu erzeugen. Dupliziere mithilfe der Tastaturbefehle:
- Mac: ⌘ Befehlstaste D
- Windows: Strg D
Ziehen zum Kopieren
Um eine Komponente in der gleichen Datei zu kopieren, kannst du auch „Ziehen zum Kopieren“ nutzen:
- Halte die ⌥ Wahltaste beim Mac gedrückt oder Alt bei Windows und ziehe die Komponente, um eine Instanz zu erzeugen.
- Lasse erst die Maustaste los, dann erst die Zusatztaste. Andernfalls wird Figma die Originalkomponente verschieben statt sie zu duplizieren.
Kopieren und Einfügen
Durch Kopieren und Einfügen lassen sich aus einer jeglichen Komponente innerhalb derselben Datei Instanzen erzeugen.
Komponenteninstanzen und veröffentlichte Hauptkomponenten können über Dateien hinweg kopiert und eingefügt werden.
- Mac: ⌘ BefehlstasteC und ⌘ BefehlstasteV
- Windows: StrgC und StrgV