Figma-Bibliotheken: Struktur, Updates und Dev-Mode-Besonderheiten
Von: Jonas Komponenten werden in Figma üblicherweise in Bibliotheken verwaltet. Im Dev Mode kann für einzelne Komponenten analysiert werden, wo diese liegen und ob es Änderungen zum Original gibt.
Video
Eine Datei oder mehrere?
Solange ein Projekt überschaubar ist und alle Designs in einer einzigen Datei leben, müssen Komponenten und Styles nicht zwingend als Bibliothek veröffentlicht werden. Erst wenn mehrere Projektdateien auf dieselben globalen Assets zugreifen sollen, lohnt sich der Schritt zur geteilten Bibliothek. In der Praxis ist das allerdings üblich.
Das Veröffentlichen erfolgt über den Bereich Assets → Bibliotheken. Bei größeren Designsystemen mit über 1000 Komponenten kann dieser Vorgang durchaus mehrere Minuten dauern.
Verknüpfte Bibliotheken im Dev Mode
Sobald eine Bibliothek veröffentlicht und in einer Projektdatei verknüpft ist, können Komponenten aus der Bibliothek ganz normal eingesetzt werden. Im Dev Mode fällt dann jedoch ein kleiner, aber wichtiger Unterschied auf:
- Befindet sich die Hauptkomponente in derselben Datei, zeigt Figma in der Seitenleiste schlicht »Component instance« an.
- Stammt die Komponente aus einer externen Bibliothek, erscheint ein abweichendes Icon und ein Hinweis, dass das Original in einer anderen Datei liegt. Zusätzlich wird der Name der Quelldatei in Klammern angezeigt, zum Beispiel: »Component instance (Simple Design System)«.
Mit einem Klick auf dieses Icon springt man direkt in die Originaldatei und genau an die Stelle, wo die Komponente erstellt wurde. Voraussetzung ist natürlich, dass man Zugriff auf diese Datei hat. Fehlt der Zugriff, erscheint eine entsprechende Meldung.
Bibliotheks-Updates und Änderungen
Hat jemand eine Instanz lokal angepasst – etwa den Text geändert –, zeigt der Dev Mode das transparent an: Es wird darauf hingewiesen, dass Text oder Layout vom Original abweichen. Über eine Vergleichsansicht lässt sich genau nachvollziehen, was geändert wurde.
Wenn in der Hauptbibliothek Änderungen vorgenommen werden, können diese als Update in den Projektdateien eingespielt werden. Dabei sollte man im Hinterkopf behalten, dass eine scheinbar kleine Änderung weitreichende Folgen haben kann: Da Komponenten im Atomic Design oft ineinander verschachtelt sind, kann eine einzelne Anpassung Dutzende abhängige Komponenten betreffen.
Das Update selbst kann global oder selektiv für einzelne Instanzen eingespielt werden. Hier liegt jedoch eine wichtige Einschränkung des beschriebenen Workflows: Wurde ein Update nur für einzelne Instanzen eingespielt, ist der veraltete Stand anderer Instanzen im Dev Mode nicht leicht erkennbar.
