Leitfaden zu Figma-Bibliotheken – Figma Learn - Hilfe-Center

Vor dem Start

Wer diese Funktion nutzen kann

In allen kostenpflichtigen Abos verfügbar

Eine Bibliothek ist bei Figma eine Sammlung von Designobjekten, wie Komponenten, Stile und Variablen. Die Designobjekte befinden sich in einer einzigen Datei, können jedoch in verschiedenen Dateien oder Projekten wiederverwendet werden.

Bibliotheken werden häufig dazu verwendet, gemeinsame Designelemente, wie Schaltflächen, Symbole, Teile von UIs, Farben oder Werte für bestimmte Eigenschaften, zu teilen. So bleibt die Arbeit von allen Beteiligten konsistent und es ist einfacher, Dinge ausgehend von vorhandenen Designs zu entwickeln.

Wenn jemand ein Objekt in einer Bibliothek verändert, können andere die Veränderungen schnell überprüfen und ihre Designs automatisch aktualisieren.

Beispiel

Ein Designteam, das an der fiktiven App Habitz arbeitet, könnte die Bibliotheken in Figma beispielsweise folgendermaßen verwenden:

In einer Datei erstellt Kai Komponenten für verschiedene Teile der App, wie die Navigationsleiste, das Menü, den Header und andere UI-Elemente.
Er veröffentlicht die finalisierten Komponenten als Bibliothek aus der Datei heraus.
Timothy, der an einer anderen Datei im selben Projekt arbeitet, sieht die Bibliothek und fügt der Arbeitsfläche einige Komponenten hinzu.
Etwas später aktualisiert Kai eine der Komponenten in der Datei, in der die Bibliothek veröffentlicht wurde.
In allen anderen Dateien, die eine dieser Komponenten verwenden, werden die Personen, die in der Datei arbeiten, benachrichtigt, dass ein Update für die Komponente verfügbar ist. Sie können die Komponente überprüfen und das Update annehmen, wenn sie bereit sind. Das Update wird auf alle Instanzen der Komponente angewendet, die sie verwendet haben.

Du willst mehr über Kai und das Habitz-Team erfahren? Verfolge ihre Arbeit bis hin zur Veröffentlichung eines Designsystems in dem Figma-Kurs Einführung in Designsysteme →

Komponenten, Stile oder Variablen erstellen, die in einer Bibliothek verwendet werden sollen

Das Ziel einer Bibliothek ist es, wiederverwendbare Designobjekte mit den Personen, mit denen du arbeitest, zu teilen. Diese Objekte können Komponenten, Stile oder Variablen sein. Wähle einen der Reiter an, um mehr darüber zu erfahren.

Komponenten sind die Bausteine eines Designs.

Es kann sich dabei um individuelle Elemente handeln, wie Symbole oder Schaltflächen, oder um eine Sammlung von Elementen, wie Menüs oder Layouts.

Bei der Verwendung von Bibliotheken enthält die Bibliotheksdatei die Hauptkomponente, die die Eigenschaften der Komponente, die alle verwenden sollen, bestimmt.

Wenn du auf eine Bibliothek in deiner Datei zugreifst, kannst du der Arbeitsfläche eine Instanz der Komponente hinzufügen. Diese Instanz erhält alle Updates, die an der Hauptkomponente durchgeführt werden.

Erfahre, wie du Komponenten in deinen Designs erstellen kannst →

Stile definieren die Sammlung von Eigenschaften oder Einstellungen, die wir wiederverwenden wollen. Du kannst Stile zum Beispiel für Folgendes verwenden:

Erfassen bestimmter Farbwerte für Füllungen und Konturen
Definieren von Texteigenschaften, wie Schriftart, Zeilenhöhe und Zeichenabstand
Erstellen von Voreinstellungen für Schatten- und Unschärfeeffekte
Erstellen eine Grundlage in Form von Reihen, Spalten und Layoutrastern zum Freigeben

Erfahre mehr darüber, wie du Styles für Farben, Texte, Effekte und Layoutraster erstellen kannst →

Variablen speichern wiederverwendbare Werte, die du auf alle möglichen Designeigenschaften anwenden kannst.

Folgendes ist zum Beispiel möglich:

Erstellen von Design-Tokens für mehr Effizienz beim Verwalten von Designsystemen
Austauschen eines Rahmens zwischen verschiedenen Gerätegrößen. Du siehst, wie der Abstand sofort auf ein definiertes räumliches System aktualisiert wird.
Vorschau, wie verschiedene Sprachen ein Design beeinflussen
Erstellen von vollständig funktionsfähigen Warenkorb-Designs, die den Gesamtpreis der Bestellung auf Grundlage der Artikel im Warenkorb berechnen
Erstellen eines Prototyps eines interaktiven Quiz, der bedingte Logik verwendet, um anzuzeigen, ob ein Benutzer eine Frage richtig oder falsch beantwortet hat

Erfahre mehr über Variablen →

Eine Bibliothek veröffentlichen

Bevor du auf Komponenten, Stile und Variablen in anderen Dateien zugreifen kannst, musst du sie als Bibliothek veröffentlichen. Du kannst entscheiden, welche Teile du veröffentlichst, und in den Organization- und Enterprise-Abos kannst du festlegen, wer Zugriff darauf haben soll.

Wenn du einen Stil, eine Komponente oder eine Variable, die veröffentlicht wurden, änderst, wendet Figma die Änderungen nur auf Instanzen in der aktuellen Datei an. Wenn du möchtest, dass diese Änderungen in deiner Bibliothek angezeigt werden, musst du die Änderungen in der Bibliothek veröffentlichen.

Veröffentlichen von Stilen, Komponenten und Variablen in einer Bibliothek

Entscheide, welche Bibliotheken du in deinen Dateien verwenden möchtest

Du kannst auf veröffentliche Bibliotheken in jeder Entwurfsdatei oder Teamdatei zugreifen, auf die du Schreibzugriff hast. Admins können Standardbibliotheken für ein Team oder ein Unternehmen erstellen. Diese Bibliotheken sind automatisch in jeder Datei aktiviert.

Bibliotheksobjekte in einer Datei verwenden

Wenn du eine Bibliothek gefunden hast, die du verwenden möchtest, kannst du deiner Datei jegliche Komponenten, Stile und Variablen hinzufügen, indem du den Anleitungen für jede Ressource folgst:

Updates für Bibliotheken in deinen Dateien annehmen

Wenn jemand ein Update für eine Hauptkomponente, einen Stil, oder eine Variable in einer Bibliothek veröffentlicht, stellt Figma das Update für jede Datei zur Verfügung, in der die Komponente, der Stil oder die Variable verwendet wird.

Jeder mit Schreibzugriff kann die Datei überprüfen und Änderungen annehmen oder ignorieren.

Updates aus einer Bibliothek annehmen

Eine Bibliothek verwalten

Personen mit Schreibzugriff auf eine Bibliotheksdatei können Berechtigungen für die Datei festlegen, die Veröffentlichung der Bibliothek zurückziehen und Objekte zwischen Dateien verschieben.

···