openpencil/packages/docs/de/user-guide/components.md
Danila Poyarkov d67415c793
docs: explain component library workflows (#520)
Documents component libraries and localized workflows added by #512.
2026-08-14 20:39:47 +03:00

5.3 KiB

title description
Komponenten Wiederverwendbare Komponenten, Instanzen, Komponenten-Sets, Overrides und Live-Synchronisation in OpenPencil.

Komponenten

Komponenten sind wiederverwendbare Design-Elemente. Bearbeiten Sie die Hauptkomponente und alle Instanzen aktualisieren sich automatisch.

Komponenten durchsuchen

Öffnen Sie links den Tab Assets, um lokale Komponenten und aktivierte Bibliotheken zu durchsuchen. Sie können suchen, zwischen Raster- und Listenansicht wechseln und Komponenten per Klick, Enter oder Drag-and-drop einfügen. Heruntergeladene Bibliotheksrevisionen bleiben auch offline verfügbar.

Komponente erstellen

Wählen Sie einen Frame oder eine Gruppe und drücken Sie K (Strg + Alt + K). Der Knoten wird zu einer wiederverwendbaren Komponente.

Komponenten zeigen ein lila Label mit Diamant-Symbol.

Komponenten-Sets und Varianten

Wählen Sie zwei oder mehr Komponenten und drücken Sie K (Shift + Strg + K), um sie zu einem Komponenten-Set zu kombinieren — ein Container mit gestricheltem lila Rand.

Varianten können mehrere Dimensionen wie Größe=Klein, Status=Hover und Theme=Dunkel verwenden. Nicht jede Kombination ist erforderlich. Die Variante oben links ist Standard und dient als Fallback, wenn eine Aktualisierung keine exakte Kombination mehr enthält. Im Eigenschaften-Panel können Sie Dimensionen und Werte hinzufügen, umbenennen, sortieren und entfernen; doppelte Kombinationen werden abgelehnt.

Komponenteneigenschaften

Komponenten unterstützen Text-, boolesche Sichtbarkeits- und Instanztausch-Eigenschaften. Verknüpfen Sie eine Eigenschaft mit einem untergeordneten Feld und ändern Sie danach den Wert einer Instanz, ohne sie zu lösen. Definitionen und Zuweisungen bleiben in .fig-Dateien erhalten.

Komponentenbibliotheken

Eine Bibliothek veröffentlicht Komponenten als unveränderliche Revision. Öffnen Sie Assets → Bibliotheken verwalten → Bibliothek veröffentlichen, legen Sie beim ersten Mal eine stabile Bibliotheks-ID und einen Namen fest, wählen Sie die Änderungen aus und veröffentlichen Sie. Bei späteren Veröffentlichungen bleiben nicht ausgewählte Änderungen ausstehend.

Aktivieren Sie Bibliotheken unter Bibliotheken verwalten. Ihre Assets erscheinen neben lokalen Komponenten; veröffentlichte Definitionen sind im konsumierenden Dokument schreibgeschützt, verknüpfte Instanzen und Overrides bleiben bearbeitbar.

Unter Updates können Sie die aktuelle und neue Instanz nebeneinander prüfen. Aktualisieren Sie eine Instanz, alle Instanzen eines Assets, die aktuelle Seite oder alle Seiten. Kompatible Eigenschaften bleiben erhalten; fehlende Varianten zeigen vor dem Bestätigen den Fallback an. Updates unterstützen Rückgängig/Wiederholen.

Bibliotheken können lokal oder über einen konfigurierten Speicheranbieter gespeichert werden. Heruntergeladene Revisionen werden lokal zwischengespeichert. Aktivierte Bindungen und materialisierte Definitionen werden in .fig gespeichert, sodass Dokumente auch ohne Verbindung zur Remote-Bibliothek geöffnet werden können.

Instanzen erstellen

Rechtsklick auf eine Komponente → Instanz erstellen. Die Instanz erscheint 40 px rechts von der Quellkomponente.

Instanz lösen

Wählen Sie eine Instanz und drücken Sie B (Strg + Alt + B). Die Instanz wird zu einem regulären Frame ohne Verbindung zur Komponente.

Zur Hauptkomponente

Rechtsklick auf eine Instanz → Zur Hauptkomponente. Der Editor navigiert zur Hauptkomponente und wählt sie aus.

Live-Synchronisation

Wenn Sie eine Komponente bearbeiten, aktualisieren sich alle Instanzen automatisch. Synchronisierte Eigenschaften:

  • Breite und Höhe
  • Füllungen, Konturen und Effekte
  • Deckkraft und Eckenradien
  • Layout-Eigenschaften
  • Inhalte beschneiden

Overrides

Instanzen können bestimmte Eigenschaften überschreiben, ohne die Synchronisationsverbindung zu unterbrechen. Überschriebene Eigenschaften werden bei der Synchronisation übersprungen.

Überschreibbare Eigenschaften

Name, Text, Schriftgröße, Schriftstärke, Schriftfamilie sowie alle visuellen und Layout-Eigenschaften.

Neue Kinder

Wenn Sie der Komponente ein Kind hinzufügen, erhalten alle Instanzen automatisch eine geklonte Kopie.

Hit-Testing

Komponenten und Instanzen sind opake Container — Klicken wählt die Komponente selbst. Doppelklick zum Betreten und Kinder auswählen.

Visuelles Erscheinungsbild

Element Darstellung
Komponenten-Label Lila mit Diamant-Symbol
Instanz-Label Lila mit Diamant-Symbol
Komponenten-Set-Rand Gestrichelt lila

Tastenkürzel

Aktion Mac Windows / Linux
Komponente erstellen K Strg + Alt + K
Komponenten-Set erstellen K Shift + Strg + K
Instanz lösen B Strg + Alt + B

Tipps

  • Textbearbeitung innerhalb einer Instanz erstellt ein Override.
  • Verwenden Sie Komponenten-Sets für Varianten (z.B. Button-Zustände).
  • Doppelklicken Sie in eine Komponente, bevor Sie ihre Kinder bearbeiten.