Konsistenz ist der Schlüssel – So bauen Sie ein Figma-Designsystem auf

Es ist unter Designern allgemein bekannt, dass ein gutes Designsystem einen großen Einfluss auf die Qualität der von uns gelieferten Produkte und das Tempo, mit dem wir sie entwickeln können, haben kann. Da die Argumente für die Schaffung eines umfassenden Designsystems viele Male deutlich gemacht wurden und Unternehmen wie Google, GitHub, IBM und andere sie verwenden, um schneller bessere Produkte zu entwickeln, hat sich die Frage von „Warum sollten wir ein Design haben? System?" zu „Wie können wir ein großartiges Designsystem erstellen?“

Was genau ist also ein Designsystem? Will Fanguy definiert es als „eine Sammlung wiederverwendbarer Komponenten, die von klaren Standards geleitet werden und die zu einer beliebigen Anzahl von Anwendungen zusammengestellt werden können.“ Ein Designsystem kann nicht nur eine UI-Komponentenbibliothek und eine Musterbibliothek enthalten, sondern auch einen Styleguide, Best Practices, Code und mehr. Genau wie der Entwurf eines Architekten für ein Gebäude dient ein Designsystem auch als „Single Source of Truth“ für das Produktteam beim Erstellen von Produkten und trägt dazu bei, die Konsistenz zu wahren.

GitHub ist sogar so weit gegangen, seine Figma-Komponentenbibliothek zu teilen – ein großartiges Beispiel für ein Figma-basiertes Designsystem. Umfangreichere Tools wie Storybook und Component-Driven Development sind ebenfalls äußerst nützliche Ressourcen für die Implementierung und Dokumentation eines Designsystems.

Ein Designsystem bewahrt die Designkonsistenz und sollte für alle nützlich sein, die an der Erstellung eines Produkts beteiligt sind. Es ist ein Toolkit, das Designern hilft, neue Bildschirme, Abläufe und Prototypen schneller zu erstellen. Ein gutes Designsystem hilft Entwicklern, die Logik hinter Designentscheidungen zu verstehen, und trägt dazu bei, ein zusammenhängenderes Produkt zu erstellen. Es beschleunigt den Designprozess und gibt Designern mehr Zeit zum Experimentieren.

Lassen Sie uns für diejenigen Designer, die mit Figma arbeiten, einen Blick darauf werfen, wie das Erstellen einer Komponentenbibliothek in Figma ein wichtiger Bestandteil eines umfassenden Designsystems sein kann.

Die Leistungsfähigkeit einer Komponentenbibliothek

Manchmal kann es kontraproduktiv sein, zu früh in die Erstellung eines Designsystems zu investieren. In den frühen Phasen der Produktentwicklung ist der Prozess noch fließend. Wenn beispielsweise mit zwei primären Navigationsleisten experimentiert wird, wäre es nicht sinnvoll, beide zu einer Komponentenbibliothek hinzuzufügen, da dies alle im Team verwirren würde. Es ist besser zu warten, bis sich das Produktdesign festgelegt hat – am besten getestet und einigermaßen abgeschlossen.

Wenn ein Produkt ausgereift ist und keine vorhandene Komponentenbibliothek hat, sollte das Designsystem bereits durch die aktuelle Implementierung bestimmt werden. Aber es ist noch nicht kodifiziert. An dieser Stelle wäre es vorteilhaft, die gemeinsamen UX-Muster zu definieren und das Produkt in eine Reihe von Komponenten zu destillieren, die regelmäßig im gesamten Produkt verwendet werden. Darüber hinaus ist es ideal, wenn die Komponentenbibliothek an einem zentralen Ort aufbewahrt wird, der für alle leicht zugänglich ist.

Ein Designsystem ist in erster Linie ein Werkzeugkasten

Der Versuch, ein Designsystem wie ein Toolkit zu verwenden, ist ein großartiger Lackmustest für seine Effektivität. Wenn mehrere Designer es regelmäßig verwenden, um ihren Prozess zu beschleunigen, leistet es gute Arbeit. Wenn Entwickler sich auf Farben, Schriftstile oder um mit weniger Input von Designern arbeiten zu können, verweisen können, ist das ebenfalls ein gutes Zeichen.

Es ist im Allgemeinen nicht sinnvoll, hochkomplexe oder nur ein- oder zweimal verwendete Komponenten in das Produkt einzubauen. Je wiederverwendbarer etwas ist, desto mehr gehört es in ein Designsystem.

Figma hat kürzlich Designsystemanalysen für Organisationen veröffentlicht, mit denen Teams sehen können, wie effektiv verschiedene Teile eines Designsystems sind, und bei der Optimierung helfen können.

Warum Figma großartig zum Erstellen einer Komponentenbibliothek ist

Figma ist ein leistungsstarkes Designtool mit vielen großartigen Funktionen, aber es gibt eine Teilmenge von Elementen, die beim Entwerfen komplexer Produkte besonders nützlich sind: Stile , Komponenten und Bibliotheksdateien . Diese Funktionen helfen dabei, Designsysteme auf dem neuesten Stand zu halten, die Konsistenz zwischen Designs zu wahren und bieten eine Verknüpfung zum Aktualisieren mehrerer Designs von einem zentralen Ort aus.

• Stile sind Farben und Schriftstile (Schriftart, Größe, Gewicht usw.), die an einer Stelle definiert sind und auf viele Objekte angewendet werden können.
• Komponenten sind Dinge wie Schaltflächen oder Sprechblasen und können aus Stilen, Objekten wie Formen und Text und anderen Komponenten erstellt werden.
• Bibliotheksdateien ermöglichen die gemeinsame Nutzung von Stilen und Komponenten zwischen mehreren Dateien und mit einem Team oder einer Organisation.

Figma hat Zusammenarbeit und Teilen im Mittelpunkt. Designdateien können von jedem im Browser bearbeitet, frei geteilt und in Echtzeit aktualisiert werden, da mehrere Benutzer sie gleichzeitig bearbeiten können. Dies öffnet das Designsystem für eine effizientere Zusammenarbeit nicht nur zwischen Designern, sondern auch mit Entwicklern und anderen Beteiligten.

Erstellen einer Bibliotheksdatei

In Figma kann eine Bibliotheksdatei erstellt werden, die mehr oder weniger als Ausgangspunkt für ein Designsystem dient. Hier können wir Stile und Komponenten definieren, die dann im gesamten Team oder Unternehmen geteilt und in mehreren Designs verwendet werden. Stile und Komponenten können an einem Ort aktualisiert werden, und diese Änderungen können dann automatisch in alle einzelnen Designdateien übernommen werden.

Dies hat ein paar entscheidende Vorteile:

1. Geschwindigkeit . Es spart Zeit, da ein Designer möglicherweise Hunderte von Designs nicht mehr manuell aktualisieren muss. Da die Komponenten in einer einzigen Bibliotheksdatei verwaltet werden, kann sich die Aktualisierung einer Farbe an einem Ort mit nur wenigen Klicks auf jedes Design übertragen, das mit der Komponentenbibliothek erstellt wurde.
2. Konsistenz . Es reduziert die Wahrscheinlichkeit von Fehlern, indem es die Aufgabe automatisiert.

Organisation

Beim Aufbau eines Designsystems in Figma ist es hilfreich, Parallelen zwischen den Tools und der Theorie zu ziehen. Zum Beispiel könnte Styles in Figma als die grundlegendste Ebene angesehen werden, sogar noch grundlegender als Atoms in Brad Frosts Atomic Design-Modell. Dies sind Dinge wie Farbe und Schriftart, die zur Ästhetik des Produkts beitragen.

Eine einfache Figma-Komponente würde im Atomic Design-Modell als Atom betrachtet werden, z. B. eine Schaltfläche. Eine komplexere Figma-Komponente würde als Molekül oder Organismus betrachtet werden, der dann verwendet wird, um Vorlagen und Seiten zu konstruieren.

Einige der nützlichsten Dinge in einer Komponentenbibliothek sind:

• Farben
• Schriftarten
• Markenwerte, Logo usw.
• Navigation
• Tasten
• Benachrichtigungen
• Modale
• Formularelemente und Validierung

Erstellen eines Designsystems in Figma – Erste Schritte

In diesem Beispiel erstellen wir ein einfaches Anmeldeformular und erläutern die Komponenten und Stile, die abgeleitet und verwendet werden können.

Lassen Sie uns zunächst über die Komponenten und Stile nachdenken, die wahrscheinlich aus diesem Formular wiederverwendet werden können. Es gibt eine Karte mit einem Logo, Formularfeldern und einer Schaltfläche. Es gibt auch drei Schriftstile und ein paar verschiedene Farben und Effekte, die nützlich sein können.

Sobald die einzuschließenden Stile und Komponenten wie oben beschrieben in der Bibliothek identifiziert wurden, ist es an der Zeit, eine Bibliotheksdatei zu erstellen und mit dem Füllen zu beginnen.

Erstellen Sie eine Figma-Bibliotheksdatei

Erstellen Sie eine neue Datei und veröffentlichen Sie sie als Bibliothek. Nachdem eine neue Datei erstellt wurde, klicken Sie auf die Registerkarte Assets , klicken Sie auf das Bibliothekssymbol und dann auf Veröffentlichen . Dadurch werden die Stile und Komponenten in der Bibliotheksdatei veröffentlicht, sodass sie in anderen Dateien verwendet werden können.

Stile und Komponenten können jetzt in der Bibliotheksdatei erstellt und in anderen Dateien verwendet und aus der zentralen Bibliotheksdatei aktualisiert werden.

So erstellen Sie einen Figma-Stil

Das Erstellen von Stilen ist in Library-Dateien genauso wie in jeder anderen Datei, wie in den folgenden Schritten beschrieben.

• Wählen Sie das Objekt aus, aus dem Sie einen Stil erstellen möchten. Stile können Farben, Texteigenschaften, Effekte und Layoutraster sein.
• Klicken Sie auf die Schaltfläche Stile (vier Punkte in einem Quadrat) neben der Eigenschaft, die im neuen Stil verwendet werden soll, und klicken Sie dann auf die Plus-Schaltfläche im Popover, um einen neuen Stil zu erstellen.

• Dies zeigt ein Modal zum Benennen des Stils. Es ist oft hilfreich, einen semantischen Namen anstelle eines Präsentationsnamens zu verwenden, z. B. „Primärfarbe“ anstelle von „Grün“, damit klarer wird, wofür der Stil verwendet werden soll.
• Veröffentlichen Sie den Stil in Ihrer Teambibliothek, indem Sie das Popup verwenden, das unten rechts auf dem Bildschirm angezeigt wird, oder wiederholen Sie die Schritte, die zum erstmaligen Veröffentlichen der Bibliothek ausgeführt wurden.

Hier ist Figmas Tutorial zum Erstellen eines Stils .

So erstellen Sie eine Figma-Komponente

Das Erstellen einer Komponente ist ebenfalls sehr einfach. Wählen Sie einfach das Objekt aus, aus dem Sie eine Komponente erstellen möchten, klicken Sie dann mit der rechten Maustaste und wählen Sie „Komponente erstellen“.

Komponenten werden auf die gleiche Weise wie Stile in der Teambibliothek veröffentlicht.

Hier ist Figmas Tutorial zum Erstellen einer Komponente .

Sobald einige Stile und Komponenten erstellt wurden, kann die Bibliotheksdatei mit dem Team geteilt werden, und die Stile und Komponenten können in einer beliebigen Anzahl von Dateien verwendet werden.

Verwenden der Figma-Bibliothek

Um diese Stile und Komponenten in einer anderen Datei zu verwenden, muss die Bibliotheksdatei mit einer vorhandenen Designdatei verknüpft werden, in der wir die neuen Stile und Komponenten verwenden möchten. Öffnen Sie einfach erneut das Modal Bibliotheken (Elemente, Bibliothekssymbol) und aktivieren Sie den Kippschalter für die zu verwendende Bibliotheksdatei.

Die Komponentenbibliothek kann jetzt verwendet werden. Komponenten können platziert werden, indem sie von der Registerkarte „Assets“ auf der linken Seite des Bildschirms in die Designdatei gezogen werden. Bibliotheksstile können auf die gleiche Weise wie lokale Stile verwendet werden, wenn Textstile, Füllfarben, Striche, Effekte und Layoutraster geändert werden.

Wenn Komponenten und Stile in der Bibliothek aktualisiert werden, müssen die Dateien, die sie verwenden, die Änderungen akzeptieren. Figma zeigt eine Benachrichtigung an, wenn Aktualisierungen in der Bibliotheksdatei vorgenommen werden, und bietet die Möglichkeit, sie zu veröffentlichen. Nach der Veröffentlichung müssen alle Dateien, die die Komponenten und Stile verwenden, die Änderung über eine ähnliche Benachrichtigung oder die Registerkarte „Assets“ akzeptieren, um ihre Komponenten und Stile zu aktualisieren. Dadurch wird verhindert, dass Änderungen unerwartet veröffentlicht und aktualisiert werden.

Über das Erstellen einer Komponentenbibliothek in Figma hinaus

Figma deckt nur den Teil der Komponentenbibliothek eines vollwertigen Konstruktionssystems ab. Für ein vollständig abgerundetes Designsystem lohnt es sich, andere Elemente in Betracht zu ziehen, die integriert werden könnten, wie z. B. Markenrichtlinien, Content Style Guides und Entwicklerdokumentation.

Der Styleguide für Inhalte von Mailchimp ist ein hervorragendes Beispiel, das den Tonfall und das Branding durch Inhalte detailliert beschreibt. GitHub hat einige großartige Dokumentationen darüber, wie ihre Komponentenbibliothek im Code funktioniert, und das Material Design System von Google hat auch einige hervorragende Beispiele für die Dokumentation der Logik hinter dem Designsystem.

Als Designtool ist Figma stark gereift und es werden ständig neue Funktionen hinzugefügt. Die Hinzufügung eines Figma-Designsystems mit integrierter Analyse, auf das die gesamte Organisation zugreifen kann, ist ein großer Schritt nach vorne. Das Hinzufügen dieser Funktionen zeigt, dass Figma darauf abzielt, ein vollwertiges, umfassendes Design-Tool zu sein, und es ist auf dem besten Weg, dies zu erreichen.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Die Kraft von Figma als Designtool
• Optimieren Sie kollaboratives Design mit Figma
• Mini-Tutorial – Nutzung der Funktionen von Figma für den gesamten Designprozess
• Mini-Tutorial – Arbeiten mit Figma-Button-Komponenten
• Meistern Sie Ihr Handwerk mit diesen Top-UX-Tools