Shared Libraries ermöglichen es, Components, Styles und Variables aus einer zentralen Figma-Datei als Bibliothek zu veröffentlichen, sodass alle Teammitglieder in ihren eigenen Dateien auf diese gemeinsamen Ressourcen zugreifen und sie verwenden können.
Rubrik: Software & Tools · Unterrubrik: Figma · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Team Library, Component Library, Design System Library, Figma Library; früher „Shared Styles and Components"
Was sind Shared Libraries?
Shared Libraries sind Figmas Mechanismus für teamweites, konsistentes Design. Statt in jeder Designdatei dieselben Buttons, Icons und Farbpaletten zu duplizieren, erstellt man eine zentrale Library-Datei, veröffentlicht sie als Shared Library, und alle anderen Dateien im Figma-Team können die Components, Styles und Variables dieser Library verwenden.
Wenn die Library aktualisiert wird – z. B. ein Button bekommt ein neues Padding –, erscheint in allen Dateien, die diesen Button-Component verwenden, eine Update-Benachrichtigung. Designer können die Updates per Klick akzeptieren oder ablehnen. Das gewährleistet Design-Konsistenz im Team ohne manuelle Synchronisation.
Erklärung
Library-Datei erstellen
Eine Shared Library ist konzeptuell eine normale Figma-Datei, die als Library konfiguriert wird. Best Practice ist eine dedizierte Library-Datei, die strukturiert ist für:
- Eine Seite pro Komponenten-Kategorie (z. B. „Atoms", „Molecules", „Organisms")
- Eine Seite für Styles und Variables
- Eine Seite für Dokumentation
Library veröffentlichen
Um eine Figma-Datei als Library zu veröffentlichen:
- Im Figma-Interface: Assets-Panel (linke Seitenleiste) öffnen.
- Auf das Buch-Icon (Library) klicken.
- Im Library-Dialog „Publish" wählen.
- Änderungen beschreiben (Changelog) und bestätigen.
Nach der Veröffentlichung ist die Library für alle Mitglieder des Figma-Teams (Professional Plan oder höher) verfügbar.
Library in einer Datei einbinden
- In der Empfänger-Datei das Assets-Panel öffnen.
- Auf das Buch-Icon klicken.
- Im Library-Dialog erscheinen alle verfügbaren Team-Libraries.
- Die gewünschte Library aktivieren (Toggle auf „On").
Danach erscheinen die Components, Styles und Variables der Library im Assets-Panel, getrennt von lokalen Elementen.
Update-Flow
Wenn die Library-Datei aktualisiert und neu veröffentlicht wird:
- In allen Dateien, die die Library verwenden, erscheint eine blaue Update-Benachrichtigung im rechten Panel oder Assets-Panel.
- Auf „Review Update" klicken → Figma zeigt, welche Components/Styles geändert wurden.
- „Update All" akzeptieren → alle Instanzen in der Datei werden aktualisiert.
- Oder: Selektiv einzelne Components updaten.
Das ermöglicht einen kontrollierten Update-Prozess – Teams können prüfen, was sich ändert, bevor sie die Updates annehmen.
Versions-Management der Library
Jede Veröffentlichung der Library wird als Version gespeichert. Über das Library-Dialog können frühere Versionen eingesehen werden. Wenn ein Update Fehler enthält, kann man zur vorherigen Version zurückrollen.
Es empfiehlt sich, jeden Library-Release mit einem aussagekräftigen Changelog zu dokumentieren:
- „v2.1.0 – Button erhält neue Hover-States; Input-Field-Padding korrigiert"
Mehrere Libraries einbinden
Eine Figma-Datei kann mehrere Libraries gleichzeitig einbinden:
- Die Haupt-Design-System-Library des Unternehmens
- Eine externe Icon-Library
- Eine projektspezifische Komponenten-Library
Libraries haben keine Konflikte miteinander, solange Component-Namen eindeutig sind.
Org-Level Libraries (Enterprise)
In Figmas Enterprise-Plan können Org-Level Libraries definiert werden, die automatisch für alle Dateien in der Organisation verfügbar sind, ohne dass jede Datei die Library manuell einbinden muss. Das ist besonders für große Organisationen mit zentralen Design-Systemen wichtig.
Swap Library
Wenn ein Projekt von einer Library auf eine andere wechseln muss (z. B. bei einem Rebranding oder Migration auf ein neues Design-System), bietet Figma die Swap Library-Funktion:
- Figma-Menü → Libraries → „Swap Library".
- Alte Library auswählen.
- Neue Library auswählen.
- Figma versucht, Components mit gleichem Namen zuzuordnen und tauscht sie aus.
External Libraries (Community Libraries)
Neben Team-eigenen Libraries können auch externe Libraries aus der Figma Community eingebunden werden. Viele Open-Source-Design-Systeme (Material Design 3, IBM Carbon, Ant Design, Atlassian Design System) sind als Figma-Community-Files verfügbar und können als Library eingebunden werden.
Lokale vs. Library-Components
Im Assets-Panel wird unterschieden:
- Local: Components, die in der aktuellen Datei definiert sind.
- Library-Name: Components aus verknüpften Libraries, getrennt nach Library-Quelle.
Library-Components sind im Layer-Panel durch einen kleinen Rautenindikator gekennzeichnet, der den Library-Namen anzeigt.
Beispiele
- Enterprise Design System: Eine zentrale Library-Datei enthält alle UI-Components (Buttons, Inputs, Navigation, Cards, Dialogs), Color Styles, Text Styles und Variables. 50 Produkt-Designer im Unternehmen nutzen diese Library in ihren Projektdateien.
- Brand-Refresh: Die Library-Datei wird aktualisiert (neue Primärfarbe, neue Typografieregeln). Ein Library-Update erscheint in allen 120 Projektdateien. Nach teamweiter Abstimmung wird der Update angenommen.
- Multi-Brand-System: Eine Foundation-Library mit Basis-Components und drei Brand-Libraries, die Foundation-Components überschreiben. Jedes Produkt bindet Foundation + die eigene Brand-Library ein.
- Externe Icon-Library: Das Team nutzt eine Community-File als Icon-Library. Icons werden als Instances aus der Library platziert; Updates der Library bringen neue Icons automatisch.
- Agile Komponenten-Entwicklung: Feature-Teams committen neue Components in die Library-Datei (via Branching). Nach Review werden die Branches gemergt und die Library-Version erhöht.
In der Praxis
Best Practices:
- Library-Datei strikt von Design-Dateien trennen – keine Produktdesigns in der Library-Datei.
- Changelogs bei jedem Library-Update pflegen – Teams brauchen Kontext für Update-Entscheidungen.
- Library-Updates in einem Review-Zyklus koordinieren: nicht mitten im Sprint deployen.
- Components sauber benennen (Hierarchie mit Schrägstrich) – das ist besonders wichtig bei Swap-Library-Aktionen.
- Library-Datei für Viewer freigeben, damit alle Stakeholder Einblick in das Design-System haben.
Häufige Fehler:
- Library-Components in der gleichen Datei wie das Produktdesign verwalten – verhindert die Nutzung als Shared Library.
- Updates ohne Review-Prozess pushen – kann alle laufenden Projekte brechen.
- Zu wenig dokumentieren – Entwickler und neue Designer wissen dann nicht, wie Components richtig eingesetzt werden.
Vergleich & Abgrenzung
Sketch hatte „Libraries" als ähnliche Funktion (seit Version 47), aber die Update-Mechanismen sind weniger ausgereift. Adobe XD hatte CC Libraries als kollaborative Ressource, aber XD wurde eingestellt. Zeroheight, Supernova und Storybook sind Dokumentationstools, die auf Figma-Libraries aufbauen und sie als lebendige Design-System-Dokumentation ergänzen. Figmas Shared Libraries sind der Industriestandard für kollaboratives, skalierendes Design-System-Management.
Häufige Fragen (FAQ)
Kann ich eine Library aus einem anderen Figma-Team verwenden? Im Standardplan nur, wenn beide Teams in derselben Organisation sind. Im Enterprise-Plan können Org-Level-Libraries teamübergreifend geteilt werden. Alternativ: die Library-Datei als öffentliche Community-File veröffentlichen.
Was passiert mit Instanzen in meiner Datei, wenn die Library gelöscht wird? Instanzen verlieren ihre Verbindung zur Library, behalten aber ihre visuelle Darstellung als eingebettete Werte. Eine Aktualisierung ist dann nicht mehr möglich. Vor dem Löschen einer Library alle abhängigen Dateien identifizieren und migrieren.
Kann ich eine Library-Datei selbst editieren, während andere sie nutzen? Ja, Änderungen in der Library-Datei werden erst durch „Publish" für andere sichtbar. Intermediäre Änderungen ohne Publish sind nicht sichtbar für Nutzer der Library. Das ermöglicht kontrollierte Releases.
Verwandte Einträge
Weiterführend
- Figma Help Center – help.figma.com/de
- Figma-Dokumentation: „Share styles and components" – help.figma.com/hc/en-us/articles/360041051154
- Brad Frost: „Atomic Design" (atomicdesign.bradfrost.com, Buch 2016) – Grundlage für Library-Strukturierung
