Komponenteninstanzen erstellen und einfügen

Wer kann diese Funktion verwenden?

Verfügbar in allen Abos

Jede Person mit Schreibzugriff 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 Komponenten-Instanzen 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 Asset-Tab zugreifen kannst
• Mithilfe von Schnelleinfügen
• Durch Kopieren oder Duplizieren einer Instanz

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:

1. Wähle den Assets-Tab in der linken Seitenleiste aus oder verwende den Tastaturbefehl:
   • Mac: ⌥ Wahltaste 2
   • Windows: Alt 2
2. Die Komponenten finden, die du verwenden möchtest:
   • Betrachte lokale Komponenten, die in der aktuellen Datei erstellt wurden.
   • Entdecke Komponenten in den freigegebenen Bibliotheken und öffne die Bibliothekenansicht, um verfügbare Bibliotheken zu verwalten.
   • Sieh dir private lokale Komponenten an und alle Komponenten, die In der Datei verwendet wurden.
   • Verwende die und , um zwischen Rasteransicht und Listenansicht hin- und herzuwechseln.
   • Verwende das Suchfeld für die Suche nach Komponenten in allen Bibliotheken, auf die du Zugriff hast, einschließlich Team- oder Unternehmens-Bibliotheken und Dateien, auf die du mindestens Lesezugriff hast.
   • Fahre mit der Maus über eine Komponente, um die Anzahl an Varianten angezeigt zu bekommen, falls zutreffend.
   • Klicke auf eine Komponente, um die detaillierte Komponentenansicht zu öffnen.
3. Klicke und ziehe eine Komponente in die Arbeitsfläche, um eine Instanz dieser Komponente zu erzeugen.

• Bibliotheken für deine Entwürfe verwalten
• Bibliotheken in Designdateien verwalten
• Bibliotheken innerhalb des Teams verwalten
• Standardbibliotheken des Unternehmens verwalten

Detaillierte Komponentenansicht

In der detaillierten Komponentenansicht ist Folgendes zu sehen:

• Die Komponentenunterlagen
• Die zugehörige Bibliothek
• Eine Vorschau der Komponente im Standardmodus

Verfügst du über Schreibzugriff in einer Bibliothek in einem kostenpflichtigen Team, dann hast du zusätzlichen Zugriff auf die Komponenten-Testumgebung. In der Testumgebung lassen sich die Variantenvorschau, Komponenteneigenschaften und Variablen-Modi sowie das Einfügen in die Arbeitsfläche steuern.

1. Wähle den Assets-Tab in der linken Seitenleiste aus oder verwende den Tastaturbefehl:
   • Mac: ⌥ Wahltaste2
   • Windows: Alt2
2. Finde die Komponente und wähle sie zum Öffnen der detaillierten Komponentenansicht aus.
3. Verwende die Steuerung zur Gestaltung deiner Komponente.
4. Zum Einfügen der Instanz, klicke auf Insert instance (Instanz einfügen), um die Vorschau in die Arbeitsfläche zu ziehen.

Schnelleinfügen

Füge Komponenteninstanzen über die Tastatur mit Schnelleinfügen ein. Schnelleinfügen öffnet die Ressourcenansicht, in der du Komponenten freigegebener Bibliotheken finden und ansehen kannst.

Die Komponenten, die in der Ressourcenansicht gefunden wurden, spiegeln wider, was du im Assets-Tab siehst. Entdecke Komponenten in Bibliotheken, auf die du Zugriff hast, einschließlich:

• Zuletzt verwendete Komponenten aus all deinen Dateien
• Lokale Komponenten der aktuellen Datei sortiert nach Seiten
• Alle Komponenten in einer freigegebenen Bibliothek

1. Verwende den Tastaturbefehl Shift |, um Schnelleinfügen zu öffnen.
2. Zum Auffinden einer Komponente ist Folgendes möglich:
   • Verwende die Suchleiste, um eine spezifische Komponente zu finden, oder verwende die Pfeiltasten, um dich zur gewünschten Komponente zu bewegen.
   • Verwende die Symbole und , um zwischen Rasteransicht und Listenansicht hin- und herzuwechseln.
   • Wähle aus zuletzt verwendeten Komponenten aller deiner Dateien aus oder wähle aus einer freigegebenen Bibliothek. Falls eine Bibliothek nicht angezeeigt wird, musst du möglicherweise zunächst die Bibliothek freischalten. Bibliotheken in den Designdateien verwalten →
3. Zum Austauschen: Wähle die Instanz oder fahre mit der Maus darüber und halte die ⌥ Wahltaste beim Mac gedrückt bzw. Strg bei Windows. Komponenten und Instanzen austauschen →

Kopieren und Duplizieren

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 und kopieren nutzen:

1. Halte die ⌥ Wahltaste beim Mac gedrückt oder Alt bei Windows und ziehe die Komponente, um eine Instanz zu erzeugen.
2. 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.

Komponenten-Instanzen und veröffentlichte Hauptkomponenten können über Dateien hinweg kopiert und eingefügt werden.

• Mac: ⌘ BefehlstasteC und ⌘ BefehlstasteV
• Windows: StrgC und StrgV