Arbeiten mit Komponenten & Instanzen

Komponenten können dazu beitragen, Fehler zu reduzieren, Konsistenz zu gewährleisten und Zeit zu sparen – indem Ihr Team von der mühsamen Arbeit des Synchronisierens und Aktualisierens befreit wird.

Sobald Sie ein Objekt oder eine Gruppe in eine Komponente umwandeln, fungiert sie als Master für alle Kopien – oder Instanzen – die aus dieser Komponente erstellt werden.

Das bedeutet, dass jede Formatierung, die Sie auf die Komponente anwenden, sofort von jeder Instanz im Projekt übernommen wird.

Instanzen bleiben jedoch unabhängig von der Komponente in ihren Koordinaten (einschließlich Spiegeln und Drehen) und Sichtbarkeit. Das bedeutet, dass Sie Komponenten verschieben oder ausblenden können, ohne die Position oder Sichtbarkeit ihrer Instanzen zu beeinflussen.

In diesem Artikel zeigen wir Ihnen, wie Sie ein beliebiges Objekt oder eine Gruppe in eine Komponente umwandeln, Instanzen dieser Komponente erstellen und demonstrieren, wie Sie Ihre Komponenten durch Hinzufügen oder Entfernen von Elementen bearbeiten können.

Komponenten und Instanzen erstellen

Eine Komponente erstellen

Um eine Komponente zu erstellen:

  1. Wählen Sie ein beliebiges Objekt oder eine Gruppe auf der Seite aus.
  2. Wählen Sie über die Komponenten-Schaltfläche in der oberen Symbolleiste oder den Komponentenbereich im rechtsklick Kontextmenü die Option Komponente erstellen.
  3. Einmal erstellt und ausgewählt, sind Komponenten durch ihre lila „Komponenten"-Beschriftung, ihr Abzeichen und ihren Rahmen erkennbar; im Gliederungs-Panel sind sie durch eine lila Hervorhebung gekennzeichnet.

Eine Instanz erstellen

Um eine Instanz zu erstellen:

  1. Erstellen Sie eine Kopie der Komponente mit Strg/Cmd + D, der Option Duplizieren im Kontextmenü, oder halten Sie einfach Alt/Option gedrückt und ziehen.
  2. Sie können die Instanz auf jede Seite innerhalb des Projekts einfügen
  3. Ändern Sie nun Größe, Text, Farbe oder andere Formatierungsattribute der Komponente
  4. Sobald die Änderungen abgeschlossen sind, klicken Sie außerhalb des Objekt-Rahmens der Komponente – und beobachten Sie, wie die Änderungen auf alle Instanzen innerhalb des Projekts übertragen werden.

Objekte zu einer Komponente bearbeiten und hinzufügen

Komponenten und Instanzen – auch solche, die aus einzelnen Objekten bestehen – verhalten sich wie Gruppen.

Um eine Komponente oder Instanz zu bearbeiten:

  1. Wählen Sie sie aus, damit Sie den lila Objekt-Rahmen sehen.
  2. Doppelklicken Sie dann, damit der dickere Komponenten-Bearbeitungsrahmen in lila erscheint.
  3. Jetzt können Sie...
  • Durchklicken zum Bearbeiten
  • Ein neues Element aus der linken Seitenleiste hinzufügen
  • Ein Objekt von der Seite selbst kopieren und einfügen

Im Gliederungs-Panel können Sie Objekte nicht neu anordnen oder neue zu einer Komponentengruppe per Drag-and-Drop im Panel hinzufügen. Schneiden bzw. kopieren Sie stattdessen das Objekt von der Seite, betreten Sie die Komponente und fügen Sie es ein.

Instanzen überschreiben

Manchmal möchten Sie möglicherweise einen Aspekt einer einzelnen Instanz anpassen – sie aber dennoch für andere Änderungen und Aktualisierungen mit ihrer Komponente verbunden und reaktionsfähig lassen. Sie möchten beispielsweise die Farbe eines CTA auf einer bestimmten Seite ändern, möchten aber, dass diese Schaltfläche für alle zukünftigen Größen- und Textänderungen mit ihrem Master synchronisiert bleibt.

Deshalb überschreibt eine lokal an einer einzelnen Instanz vorgenommene Änderung die Fähigkeit der Komponente, dieses spezifische Formatierungsattribut (Text, Farbe, Unschärfe, abgerundete Ecken) in Zukunft zu ändern.

Lokal angewendete Überschreibungen haben keine Auswirkungen auf andere Instanzen oder die ursprüngliche Komponente selbst. Dies ermöglicht es Ihrem Team, im Design konsistent zu sein, aber dennoch auf den besonderen Designkontext jeder Instanz zu reagieren.

Instanzen zurücksetzen und lösen

Eine Instanz zurücksetzen

Wenn Sie lokale Änderungen und Überschreibungen an einer einzelnen Instanz vorgenommen haben, aber dann entscheiden, diese Überschreibungen zu entfernen und den vollständigen Stil und die Eigenschaften der Komponente erneut anzuwenden, wählen Sie Instanz zurücksetzen.

Eine Instanz lösen

Wenn Sie eine Instanz wieder in ein normales Objekt oder eine Gruppe umwandeln möchten, wählen Sie einfach Instanz lösen.

Komponenten finden und wiederherstellen

Um Ihre Komponenten zu organisieren, können Sie sie im Kontext eines Designs belassen – oder eine separate Seite erstellen, auf der alle Ihre Komponenten leben können, und diese Seite oben im Seiten-Panel anheften.

Von Zeit zu Zeit möchten Sie jedoch möglicherweise von einem anderen Ort in Ihrem Projekt zu Ihrer Komponente springen – beispielsweise während der Arbeit an einer ihrer Instanzen.

Und falls Sie eine Komponente versehentlich löschen, müssen Sie sie möglicherweise aus einer ihrer Instanzen wiederherstellen.

Eine Komponente finden

Wenn Sie mit einer Instanz arbeiten und die Komponente selbst überprüfen oder anpassen müssen, klicken Sie einfach auf die Instanz und wählen Sie Zur Komponente gehen aus dem Menü. Egal wo sich die Instanz befindet, Sie springen direkt zur Position der Komponente innerhalb des Projekts.

Eine Komponente wiederherstellen

Wenn Sie aus irgendeinem Grund eine Komponente löschen und verwaiste Instanzen zurücklassen, wählen Sie einfach eine der Instanzen aus und wählen Sie die Option Komponente wiederherstellen. Die Komponente erscheint wie von Zauberhand wieder! Beachten Sie, dass dies auch für Instanzen mit Überschreibungen funktioniert – Sie erhalten die ursprüngliche Komponente zurück.