Wie man Bibliotheken in Figma verwendet? | Figma für Anfänger #6

Wie erstellt man Stil- und Komponentenbibliotheken in Figma? Wie verwendet man sie in seinen Dateien und teilt sie mit anderen Teammitgliedern? Die Antwort finden Sie im folgenden Artikel. Durch die Verwendung von Stilen ist es einfacher, in Teamprojekten Konsistenz zu wahren. Lesen Sie weiter.

Bibliotheken in Figma – Inhaltsverzeichnis:

  1. Stile
  2. Komponenten
  3. Stile und Komponenten in einer Bibliothek veröffentlichen

Stile

Dies sind Sets von Eigenschaften, die auf Ebenen in Projekten angewendet werden können. Um einen Stil zu erstellen, müssen Sie zuerst das Objekt auswählen, dessen Eigenschaften Sie speichern möchten. Klicken Sie dann auf das Stil-Symbol im Eigenschaften-Panel neben der ausgewählten Eigenschaft und klicken Sie dann auf das + Symbol.

Ein Fenster öffnet sich, in dem Sie den Namen des Stils eingeben müssen, den Sie erstellen. Klicken Sie auf Stil erstellen.

Die erstellten Stile werden im Eigenschaften-Panel angezeigt, wenn keine Objekte ausgewählt sind.

Im Stile bearbeiten Panel können Sie eine Beschreibung hinzufügen und die Eigenschaften jedes Stils bearbeiten. Wann immer Sie Änderungen an den Eigenschaften des ausgewählten Stils vornehmen, werden diese Änderungen auf alle Objekte angewendet, die ihn verwenden.

Sie können die folgenden Stile erstellen:

Farb- (Farben) Stile – für Füllungen und Striche, Text und Hintergründe und sogar für Bilder und Verläufe.

Textstile – dank der Textstile können Sie Stile für Überschriften und Haupttext definieren. Sie können Textstile auf einen gesamten Textblock oder nur auf einen Teil des Textes im Block anwenden. Sie können definieren: Schriftfamilie, Größe, Zeilenhöhe, Abstände.

Hinweis: Mit Textstilen können Sie die Textausrichtung nicht festlegen.

Effekte – hier können Sie Schatten- und Unschärfeattribute definieren.

Layout-Raster – das Erstellen von Layout-Raster Stilen ist nützlich, wenn Sie eine bestimmte Struktur in mehreren Projekten duplizieren möchten.

Um einen Stil auf die aktive Ebene anzuwenden, klicken Sie auf das Stil-Symbol im Eigenschaften-Panel neben der ausgewählten Eigenschaft und wählen Sie den Stil aus der Liste aus.

Um einen Stil von der aktiven Ebene zu entfernen, klicken Sie auf Stile trennen. Dies ist nützlich, wenn Sie Änderungen an einem Objekt vornehmen möchten, ohne den Stil zu beeinträchtigen.

Aufgabe 6.1. Üben Sie das Erstellen von Stilen in Figma. Erstellen Sie Stile für Abschnittsüberschriften auf der Startseite, Produktnamen und Preise.

Komponenten

Dies sind die Bausteine Ihrer Designs, die Sie wiederverwenden können. Sie können Icons, Schaltflächen oder komplexere Elemente sein. Komponenten helfen, Ihre Designs konsistent zu halten und ermöglichen es Ihnen, schnell Änderungen an mehreren Dateien und Projekten vorzunehmen.

Um eine Komponente zu erstellen, müssen Sie zuerst die Ebenen auswählen, die die Komponente bilden, und dann auf Komponente erstellen in der Werkzeugleiste klicken.

Die Komponentenebenen werden in einem speziellen Rahmen eingebettet und lila hervorgehoben, sodass Sie sie leicht von anderen Ebenen im Ebenen-Panel unterscheiden können.

Komponenten erhalten automatisch Namen. Sie können Komponenten im Tab “Ebenen” umbenennen. Wie bei anderen Ebenen doppelklicken Sie auf den Namen. Nachdem Sie eine Komponente im Eigenschaften-Panel ausgewählt haben, können Sie eine Komponentbeschreibung und einen Dokumentationslink für Teammitglieder hinzufügen.

Sie können die Komponenten im Assets-Tab im Ebenen-Panel anzeigen.

Aufgabe 6.2. Üben Sie das Erstellen von Komponenten in Figma. Erstellen Sie die folgenden Komponenten:

  • eine Suchleiste – bestehend aus einem Platzhalter, einem Lupe-Icon und dem Text “Suche”,
  • eine untere Leiste – bestehend aus einem Rechteck und Icons,
  • CTA-Schaltflächen – bestehend aus einem Rechteck und Text.

Stile und Komponenten in einer Bibliothek veröffentlichen

Wenn Sie Stile und Komponenten erstellen, haben Sie nur Zugriff auf sie in der aktuellen Datei. Um Stile und Komponenten in anderen Dateien zu verwenden, können Sie sie in der Bibliothek veröffentlichen. Die Option, Stile zu teilen, ist in der Werkzeugleiste verfügbar – erweitern Sie das Menü neben dem Dateinamen und klicken Sie auf Stile und Komponenten veröffentlichen.

Sie haben gerade gelernt, wie man Bibliotheken in Figma verwendet. Lesen Sie auch: Was macht ein UX-Designer?

Wenn Ihnen unsere Inhalte gefallen, treten Sie unserer aktiven Community auf Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.

Klaudia Kowalczyk

Ein Grafik- und UX-Designer, der in das Design vermittelt, was in Worten nicht ausgedrückt werden kann. Für ihn hat jede verwendete Farbe, Linie oder Schriftart eine Bedeutung. Leidenschaftlich in Grafik- und Webdesign.

View all posts →

Klaudia Kowalczyk

Ein Grafik- und UX-Designer, der in das Design vermittelt, was in Worten nicht ausgedrückt werden kann. Für ihn hat jede verwendete Farbe, Linie oder Schriftart eine Bedeutung. Leidenschaftlich in Grafik- und Webdesign.

Share
Published by
Klaudia Kowalczyk

Recent Posts

Wie erstellt man ein Ebook? Wesentliche Aspekte des Prozesses. – Digitale Produkte erstellen und verkaufen #8

Weißt du, wie man ein E-Book erstellt? Kennst du alle wesentlichen Aspekte des E-Book-Produktionsprozesses? Der…

11 minutes ago

Ist nachhaltiges Marketing die Zukunft? 4 nachhaltige Marketingstrategien

Nachhaltiges Marketing ist nicht mehr nur eine der Marketingstrategien, die Sie in Ihrem Unternehmen anwenden…

2 hours ago

Was ist stilles Einstellen und wie wurde es so populär?

In letzter Zeit sind zwei Phänomene auf dem Arbeitsmarkt aufgetaucht, die mit den Einstellungen zeitgenössischer…

3 hours ago

Wie verkauft man auf Pinterest?

Wie verkauft man auf Pinterest und warum sollte man es tun? Der Verkauf auf Pinterest…

5 hours ago

Top-Tipps zur Verbesserung des Portfolios von Freelancern

Sind Sie ein Freelancer, der nach Möglichkeiten sucht, sein Portfolio zu bewerben? Heutzutage können nicht…

7 hours ago

Digitales Finanzmanagement und Online-Buchhaltung | Digitalisierung Ihres Unternehmens #5

Die digitale Finanzverwaltung und Online-Buchhaltung sind in der Geschäftswelt zunehmend beliebt geworden. Laut einem Bericht…

9 hours ago