Erstellen einer Komponentenbibliothek mit Figma

Ich habe an der Erstellung und Pflege der Hauptbibliothek unseres Designsystems Lexicon gearbeitet. Wir haben die Sketch-App im ersten Jahr verwendet und sind dann zu Figma gewechselt, wo die Bibliotheksverwaltung in bestimmten Aspekten anders war, was die Umstellung für uns ziemlich herausfordernd machte.

Um ehrlich zu sein, erfordert dies, wie bei jedem Bibliotheksbau, Zeit, Mühe und Planung, aber die Mühe lohnt sich, da es bei der Bereitstellung detaillierter Komponenten für Ihr Team hilfreich sein wird. Es trägt auch dazu bei, die Gesamtkonsistenz des Designs zu erhöhen und die Wartung auf lange Sicht zu vereinfachen. Ich hoffe, dass die Tipps, die ich in diesem Artikel gebe, den Prozess auch für Sie reibungsloser machen.

Dieser Artikel beschreibt die Schritte, die zum Erstellen einer Komponentenbibliothek mit Figma erforderlich sind, indem Stile und eine Master-Komponente verwendet werden. (Eine Master-Komponente ermöglicht es Ihnen, mehrere Änderungen auf einmal anzuwenden.) Ich werde auch die Organisation der Komponenten im Detail behandeln und Ihnen eine mögliche Lösung zeigen, wenn Sie eine große Anzahl von Symbolen in der Bibliothek haben.

Hinweis: Um die Verwendung, Aktualisierung und Wartung zu vereinfachen, haben wir festgestellt, dass es am besten ist, eine separate Figma-Datei für die Bibliothek zu verwenden und sie dann als Team-„Bibliothek“ zu veröffentlichen, anstatt die Komponenten einzeln zu veröffentlichen.

Einstieg

Dieses Handbuch wurde aus der Perspektive eines Designers erstellt, und wenn Sie zumindest über Grundkenntnisse in Figma (oder Sketch) verfügen, sollte es Ihnen helfen, eine Komponentenbibliothek für Ihr Designteam zu erstellen, zu organisieren und zu pflegen.

Wenn Sie neu bei Figma sind, sehen Sie sich die folgenden Tutorials an, bevor Sie mit dem Artikel fortfahren:

• Best Practices: Komponenten, Stile und gemeinsam genutzte Bibliotheken
• Einführung in Figma: Leitfaden für Anfänger zu Figma-Grundlagen (Video)
• Figma für Anfänger
• Figur 101

Anforderungen

Bevor wir beginnen, gibt es einige Anforderungen, die wir erfüllen müssen, um die Stile für die Bibliothek zu definieren.

Typografie-Skala

Der erste Schritt besteht darin, die Typografieskala zu definieren; Es hilft, sich darauf zu konzentrieren, wie die Textgröße und Zeilenhöhe in Ihrem System wächst, und ermöglicht es Ihnen, die visuelle Hierarchie Ihrer Texte zu definieren.

Die Art der Skala hängt davon ab, was Sie entwerfen. Es ist üblich, ein größeres Verhältnis für Website-Designs und ein kleineres Verhältnis beim Entwerfen digitaler Produkte zu verwenden.

Der Grund dafür liegt hinter dem Ziel des Designs – eine Website ist normalerweise so konzipiert, dass sie kommuniziert und konvertiert, sodass Sie ein oder zwei direkte Aktionen erhalten. In diesem Zusammenhang ist es einfacher, 36 Pixel für einen Haupttitel, 24 Pixel für einen Nebentitel und 16 Pixel für einen Beschreibungstext zu haben.

Zugehörige Ressource: „8-Point Grid: Typography On The Web“ von Elliot Dahl.

Andererseits sind digitale Produkte oder Dienstleistungen darauf ausgelegt, eine Lösung für ein bestimmtes Problem bereitzustellen, normalerweise mit mehreren Aktionen und möglichen Abläufen. Es bedeutet mehr Informationen, mehr Inhalt und mehr Komponenten, alles im selben Raum.

Für diesen Fall finde ich es persönlich selten, mehr als 24px für Texte zu verwenden. Es ist üblicher, kleine Größen für Komponenten zu verwenden – in der Regel zwischen 12 und 18 Pixel, je nach Wichtigkeit des Textes.

Wenn Sie ein digitales Produkt entwerfen, ist es hilfreich, zuerst mit den Entwicklern zu sprechen. Es ist einfacher, eine Typografieskala zu pflegen, die eher auf EM/REM als auf tatsächlichen Pixeln basiert. Die Erstellung einer Regel zur Umwandlung von Pixeln in EM/REM-Vielfache wird immer empfohlen.

Zugehörige Ressource: „Defining A Modular Type Scale For Web UI“ von Kelly Dern.

Farbschema

Zweitens müssen wir das Farbschema definieren. Ich denke, es ist am besten, wenn Sie diese Aufgabe in zwei Teile aufteilen.

1. Zuerst müssen Sie die Hauptfarben des Systems definieren . Ich empfehle, es einfach zu halten und maximal vier oder fünf Farben (einschließlich Validierungsfarben) zu verwenden, denn je mehr Farben Sie hier einfügen, desto mehr Dinge müssen Sie in Zukunft pflegen.
2. Generieren Sie als Nächstes weitere Farbwerte mit den Sass-Funktionen wie „Aufhellen“ und „Abdunkeln“ – das funktioniert sehr gut für Benutzeroberflächen. Der Hauptvorteil dieser Technik besteht darin, denselben Farbton für die verschiedenen Varianten zu verwenden und eine mathematische Regel zu erhalten, die im Code automatisiert werden kann. Sie können es nicht direkt mit Figma machen, aber jeder Sass-Farbgenerator wird gut funktionieren – zum Beispiel SassMe von Jim Nielsen. Ich erhöhe die Funktionen gerne um 1%, um mehr Farbauswahl zu haben.

Tipp : Um zukünftige Änderungen anwenden zu können, ohne die Variablen umbenennen zu müssen, vermeiden Sie die Verwendung der Farbe als Teil des Farbnamens. Verwenden Sie zB anstelle von $blue $primary .

Empfohlene Lektüre : „Wie nennt man Farbvariablen?“ von Chris Coyier

Figma-Stile

Sobald wir die Typografieskala und das Farbschema festgelegt haben, können wir sie verwenden, um die Stile der Bibliothek zu definieren.

Dies ist der erste eigentliche Schritt in die Bibliothekserstellung. Mit dieser Funktion können Sie einen einzelnen Satz von Eigenschaften in mehreren Elementen verwenden .

Konkretes Beispiel

Angenommen, Sie definieren Ihre Markenfarbe als Stil, es ist ein sanftes Blau, und Sie wenden es ursprünglich auf 500 verschiedene Elemente an. Wenn später entschieden wird, dass Sie es in ein dunkleres Blau mit mehr Kontrast ändern müssen, können Sie dank der Stile alle 500 gestalteten Elemente auf einmal aktualisieren, sodass Sie dies nicht Element für Element manuell tun müssen.

Wir können Stile für Folgendes definieren:

• Text
• Farben
• Auswirkungen
• Gitter

Wenn Sie Variationen desselben Stils haben, können Sie die einzelnen Stile benennen und sie innerhalb des Bedienfelds als Gruppen anordnen, um sie später leichter zu finden. Verwenden Sie dazu einfach diese Formel:

Gruppenname/Stilname

Ich habe unten einen Vorschlag zur Benennung von Text- und Farbstilen beigefügt.

Textstile

Eigenschaften, die Sie innerhalb eines Textstils definieren können:

• Schriftgröße
• Schriftgewicht
• Zeilenhöhe
• Buchstaben-Abstand

Tipp : Figma reduziert die Anzahl der Stile, die wir in der Bibliothek definieren müssen, drastisch, da Ausrichtungen und Farben unabhängig vom Stil sind. Sie können einen Textstil mit einem Farbstil im selben Textelement kombinieren.

Benennung von Textstilen

Ich empfehle die Verwendung einer Benennungsregel wie „Größe/Gewicht“
(z. B.: 16/Normal, 16/Halbfett, 16/Fett).

Figma erlaubt nur eine Einzugsebene, wenn Sie die Schriftart einbeziehen müssen, können Sie immer ein Präfix vor der Größe hinzufügen:
FontFamily-Größe/-Gewicht oder FF-Größe/ -Gewicht
*(zB: SourceSansPro 16/Regular oder SSP 16/Regular ).*

Farbstile

Der Farbstil verwendet seinen Hex-Wert ( #FFF ) und die Deckkraft als Eigenschaften.

Tipp : Mit Figma können Sie innerhalb desselben Elements einen Farbstil für die Füllung und einen anderen für den Rand festlegen, wodurch sie voneinander unabhängig werden.

Benennung von Farbstilen

Zur besseren Organisation empfehle ich die Verwendung dieser Regel „Farbe/Variante“. Wir haben unsere Farbstile mit „Primary/Default“ für die Starterfarbe, „Primary/L1“, „Primary/L2“ für hellere Varianten und „Primary/D1“, „Primary/D2“ für dunklere Varianten benannt.

Auswirkungen

Beim Entwerfen einer Benutzeroberfläche müssen Sie möglicherweise auch Elemente erstellen, die einige Effekte wie Schlagschatten verwenden (das Drag & Drop könnte ein Beispiel für ein Muster sein, das Schlagschatteneffekte verwendet). Um die Kontrolle über diese Grafikdetails zu haben, können Sie Effektstile wie Schatten oder Ebenenunschärfen in die Bibliothek aufnehmen und bei Bedarf auch in Gruppen unterteilen.

Gitter

Um Ihrem Team etwas sehr Nützliches zu bieten, fügen Sie die Rasterstile hinzu. Sie können das 8-Pixel-Raster, das 12-Spalten-Raster und flexible Raster definieren, damit Ihr Team sie nicht neu erstellen muss.

Tipp : Wenn Sie diese Funktion nutzen, können Sie alle verschiedenen Haltepunkte als „Gitterstile“ bereitstellen.

Master-Komponente

Mit Figma können Sie mehrere Instanzen derselben Komponente generieren und sie über eine einzige Master-Komponente aktualisieren. Es ist einfacher als Sie vielleicht denken, Sie können mit einigen kleinen Elementen beginnen und diese dann verwenden, um Ihre Bibliothek weiterzuentwickeln.

Um diesen Arbeitsablauf besser zu erklären, werde ich eine der grundlegenden Komponenten verwenden, die alle Bibliotheken haben: die Schaltflächen.

Tasten!

Jedes System hat verschiedene Arten von Schaltflächen, um die Wichtigkeit der Aktionen darzustellen. Sie können beginnen, sowohl primäre als auch sekundäre Schaltflächen mit nur Texten und einer Größe zu haben, aber die Realität ist, dass Sie wahrscheinlich so etwas beibehalten müssen:

• 2 Farbtypen ( Primär | Sekundär )
• 2 Größen von Knöpfen ( Normal | Klein )
• 4 Inhaltstypen ( Nur Text | Nur Symbol | Text + Symbol rechts | Symbol links + Text )
• 5 Zustände ( Standard | Schweben | Aktiv | Deaktiviert | Fokus )

Dies würde uns bis zu 88 verschiedene Komponenten geben, die wir nur mit dem oben erwähnten Satz von Schaltflächen warten müssen!

Beginnen wir Schritt für Schritt

Der erste Schritt besteht darin, alle Variationen zusammen an derselben Stelle aufzunehmen. Für die Schaltflächen, die wir verwenden werden:

• Eine einzelne Form für den Hintergrund der Schaltfläche, damit wir dann die Farbstile für die Füllung und den Rahmen platzieren können;
• Der einzelne Text, der sowohl Text- als auch Farbstile haben wird;
• Drei Symbolkomponenten (rechts, in der Mitte und links positioniert) mit dem Farbstil ausgefüllt (Sie können die Symbole einfach austauschen).

Der zweite Schritt besteht darin, die Master-Komponente mit allen Variationen als Instanzen zu erstellen (verwenden Sie die Tastenkombination Cmd + Alt + K auf dem Mac oder Strg + Alt + K auf Windows). Ich schlage vor, einen anderen und neutralen Stil für die Elemente innerhalb der Hauptkomponente zu verwenden und die echten Stile für die Unterkomponenten zu verwenden. Dieser Trick hilft dem Team, nur Unterkomponenten zu verwenden.

Den visuellen Unterschied zwischen einer Master-Komponente und einer Sub-Komponente können Sie im nächsten Schritt erkennen:

Im dritten Schritt müssen Sie die Master-Komponente duplizieren, um eine Instanz zu generieren. Jetzt können Sie diese Instanz verwenden, um eine Unterkomponente zu erstellen, und von nun an wird jede Änderung, die Sie an der Master-Komponente vornehmen, auch die von Ihnen vorgenommene Unterkomponente ändern. habe erstellt.

Sie können jetzt damit beginnen, die verschiedenen Stile, die wir zuvor gesehen haben, auf die Elemente innerhalb der Unterkomponente anzuwenden, und natürlich können Sie die Elemente, die Sie nicht benötigen, in dieser Unterkomponente ausblenden.

Textausrichtung

Wie ich Ihnen in den Stilen gezeigt habe, sind die Ausrichtungen unabhängig vom Stil. Wenn Sie also die Textausrichtung ändern möchten, wählen Sie sie einfach aus, indem Sie Cmd / Strg drücken und ändern. Links, Mitte oder rechts: Es funktioniert alles und Sie können verschiedene Unterkomponenten definieren, wie ich es mit den Schaltflächen getan habe.

Tipp : Damit Sie schneller arbeiten können, ohne die genaue Elementebene suchen zu müssen, wird beim Löschen eines Elements innerhalb der Instanz das Element ausgeblendet, anstatt es tatsächlich zu löschen.

Komponentenorganisation

Wenn Sie von Sketch kommen, könnten Sie Probleme mit der Organisation der Komponenten in Figma haben, da es einige wichtige Unterschiede zwischen diesen beiden Tools gibt. Dies ist eine kurze Anleitung, die Ihnen dabei helfen soll, die Komponenten gut zu organisieren, damit das Instanzmenü die Effektivität Ihres Teams nicht negativ beeinflusst.

Wir kennen es alle, die Lösung ist einfacher als Sie denken!

Hier ist, was ich über die Organisation der Komponenten gelernt habe.

Figma-Namensgebung

Während in Sketch die gesamte Organisation nur vom Namen der einzelnen Komponente abhängt, hängt sie in Figma vom Namen der Seite , dem Namen des Rahmens und dem Namen der einzelnen Komponente ab – genau in dieser Reihenfolge.

Um eine gut organisierte Bibliothek bereitzustellen, müssen Sie sie sich als visuelle Organisation vorstellen. Solange Sie die Reihenfolge einhalten, können Sie die Benennung an Ihre Bedürfnisse anpassen.

So habe ich es aufgeteilt:

• Dateiname = Bibliotheksname (zB Lexikon);
• Seitenname = Komponentengruppe (z. B. Karten);
• Rahmenname = Komponententyp (z. B. Bildkarte, Benutzerkarte, Ordnerkarte usw.);
• Komponentenname = Komponentenstatus (z. B. Standard, Hover, Aktiv, Ausgewählt usw.).

Einzugsebenen hinzufügen

Beim Erstellen der Lexicon-Bibliothek stellte ich fest, dass ich für einige der Komponenten, wie die Schaltflächen, die wir zuvor gesehen hatten, tatsächlich mehr als drei Einrückungsebenen benötigte.

Für diese Fälle können Sie die Benennung mit der gleichen Methode wie Sketch für verschachtelte Symbole erweitern (mit den Schrägstrichen im Komponentennamen, zB „Component/Sub-Component“), unter der Bedingung, dass Sie dies erst nach der dritten Ebene von tun Einrückung, unter Beachtung der strukturellen Reihenfolge der ersten drei Ebenen, wie im vorherigen Punkt erläutert.

So habe ich unsere Buttons organisiert:

• Seitenname = Komponentengruppe (zB Schaltflächen);
• Rahmenname = Komponentengröße (z. B. normal oder klein);
• Komponentenname = Stil/Typ/Status (z. B. Primär/Text/Hover).

Tipp : Sie können den Komponentennamen (oder ein Präfix des Namens) in die letzte Ebene aufnehmen, dies hilft Ihrem Team, die Ebenen besser zu identifizieren, wenn sie die Komponenten aus der Bibliothek importieren.

Symbolorganisation

Das Organisieren der Symbole in Figma kann eine Herausforderung darstellen, wenn eine große Anzahl von Symbolen eingebunden wird.

Im Gegensatz zu Sketch, das eine Bildlauffunktion verwendet, verwendet Figma die Untermenüs, um die Komponenten zu unterteilen. Das Problem ist, dass, wenn Sie eine große Anzahl von Symbolen in Untermenüs gruppiert haben, diese irgendwann vom Bildschirm verschwinden könnten (meine Erfahrung mit Figma auf einem MacBook Pro).

Hier sind zwei mögliche Lösungen:

• Lösung 1
  Erstellen Sie eine Seite mit dem Namen „Icons“ und dann einen Rahmen für jeden Buchstaben des Alphabets, und platzieren Sie dann jedes Icon in dem Rahmen basierend auf dem Namen des Icons. Wenn Sie beispielsweise ein Symbol mit dem Namen „Plus“ haben, wird es in den Rahmen „P“ eingefügt.
• Lösung 2
  Erstellen Sie eine Seite mit dem Namen „Icons“ und teilen Sie sie dann nach Frames basierend auf den Icon-Kategorien auf. Wenn Sie beispielsweise Symbole haben, die ein Boot, ein Auto und ein Motorrad darstellen, können Sie sie in einem Rahmen namens „Fahrzeuge“ platzieren.

Fazit

Jetzt, da Sie wissen, was genau hinter dem Bibliotheksbau eines Teams in Figma steckt, können Sie selbst mit dem Bau einer Bibliothek beginnen! Figma hat einen kostenlosen Abonnementplan, der Ihnen hilft, mit dieser Methode in einer einzigen Datei zu beginnen und zu experimentieren (wenn Sie jedoch eine Teambibliothek teilen möchten, müssen Sie die Option „Professional“ abonnieren).

Probieren Sie es aus, erstellen und organisieren Sie einige fortschrittliche Komponenten und präsentieren Sie die Bibliothek dann Ihren Teammitgliedern, damit Sie sie verblüffen können – oder sie möglicherweise davon überzeugen können, Figma zu ihrem Toolset hinzuzufügen.

Lassen Sie mich abschließend erwähnen, dass wir hier bei Liferay Open-Source-Projekte lieben und daher eine Kopie unserer Lexikonbibliothek zusammen mit einigen anderen Ressourcen teilen. Sie können die Lexikon-Bibliothekskomponenten und die anderen Ressourcen kostenlos nutzen, und Ihr Feedback ist immer willkommen (auch als Figma-Kommentare, wenn Sie dies bevorzugen).

• Laden Sie die Bibliothek „Lexikon“ herunter

Wenn Sie Fragen haben oder Hilfe bei Ihrer ersten Komponentenbibliothek in Figma benötigen, fragen Sie mich in den Kommentaren unten oder schreiben Sie mir eine Nachricht auf Twitter.

Weitere Ressourcen

• „8-Punkte-Raster: Typografie im Web“, Elliot Dahl, freeCodeCamp
• Definieren einer modularen Typenskala für Web-UI“, Kelly Dern, Medium
• „Relative Farbpaletten mit Sass“, Ethan Muller, Sparkbox
• SassMe (Tool von Jim Nielsen, mit dem Sie Sass HSL-Farbfunktionen in Echtzeit visualisieren können)
• „Wie nennen Sie Farbvariablen?“, Chris Coyier, CSS-Tricks
• „Best Practices: Komponenten, Stile und gemeinsam genutzte Bibliotheken“, Thomas Lowry, Figma
• Figma YouTube-Kanal
• Figma-Hilfeartikel