Hilfe für Designer bei der Einhaltung eines Designsystems mit Sketch

In den Walmart Labs in Bentonville erstellt unser internes Designteam Anwendungen für Mitarbeiter (Walmarts Name für Mitarbeiter) in unseren Filialen, Vertriebszentren und Unternehmensbüros. Wir entwerfen alles von tragbaren Geräten bis hin zu Desktop-Systemen, und die Umgebungen unserer Benutzer reichen von hell beleuchteten Büros bis hin zu Lagerräumen. Um unseren Mitarbeitern zu helfen, sich schnell in mehreren digitalen Tools zurechtzufinden, haben wir ein System gemeinsamer interaktiver und visueller Muster erstellt, das auf dem Material Design von Google basiert. Unser Design-System ist in Sketch integriert. In diesem Beitrag erfahren Sie, wie wir mit dieser Sprache umgehen.

Wo soll man anfangen

Wenn Sie ein Designer sind, der eine Bibliothek erstellen und verwalten muss, damit andere an einem Designsystem festhalten können, lesen Sie weiter. Bei der Entwicklung digitaler Tools, die von über 1 Million Mitarbeitern in den USA verwendet werden, hat sich Folgendes als hilfreich erwiesen.

Die Konsistenz des Designs kann in einer Unternehmensumgebung eine Herausforderung darstellen, insbesondere bei unterschiedlichen Zielgruppen und unterschiedlichen Verwendungskontexten. Das korrekte Auswendiglernen und Verwenden aller Spezifikationen kann überwältigend und zeitaufwändig sein. Designer, auch erfahrene, müssen möglicherweise ständig auf Designspezifikationen zurückgreifen. Dies kostet wertvolle Zeit in einem bereits aggressiven Konstruktionszyklus.

Die Antwort? Bringen Sie das Design-System in ihrem Design-Tool zu den Designern.
Bildnachweis: Walmart.

Unsere Konstruktionssystembibliothek - intern bekannt als Ignite - ist in Sketch integriert. Wir haben Sketch ausgewählt, damit sich die Konstrukteure nicht um die Einhaltung des Konstruktionssystems kümmern müssen, sondern sich darauf konzentrieren können, die ideale Erfahrung zu entwerfen. Unsere Designer arbeiten mit diesem Tool genauer, effizienter und konsistenter. Außerdem können Designer wiederverwendbare Muster aus der Bibliothek erstellen und Aktualisierungen übernehmen, wenn die Bibliothek aktualisiert wird.

Einige Hauptmerkmale sind:

  • Konfigurierbares Symbol für jede Komponente im Konstruktionssystem
  • Richtlinien als verschachteltes Symbol für Auffüllung und Schriftbehandlung
  • Anpassbarer Text mit anderen Elementen, die auf die Textlänge reagieren
  • Möglichkeit, benutzerdefinierte Farben, Schriftarten und Avatare hinzuzufügen, ohne die Symbolbibliothek zu ändern

Verschachtelung der Designspezifikationen

Skizze ist kein Designsystem. , aber es ist eines unserer bevorzugten Werkzeuge. Bei korrekter Verwaltung kann Sketch Designern dabei helfen, Regeln und Richtlinien nahtlos zu befolgen. Wir bringen die Designsystemspezifikationen zum Designer, indem wir sie in jedes Symbol schachteln. Designer können sich mehr auf den Ablauf und weniger auf das Erinnern an die Regeln konzentrieren.

Beispiel für eine horizontale Führung und Auffüllung, die in einem Tabulatorsymbol verschachtelt sind. Bildnachweis: Walmart.

Vertikale Führung

Hilfslinien können anzeigen, wo die Größe von Symbolen vertikal geändert werden soll. Im folgenden Beispiel ändert sich die Höhe einer Symbolleiste für den Quer- und Hochformatmodus. Diese Technik ist nützlich, um die Bauteilhöhe vom normalen zum dichten Layout zu ändern.

Beispiel einer vertikalen Führung in einem Symbolleistensymbol. Bildnachweis: Walmart

Text-Baseline-Anleitung

Mithilfe der Textbasislinie können Designer die Höhe eines Symbols an die Texthöhe anpassen. Designer ändern die Symbolhöhe, bis sich die Grundlinie an der Grundlinie der letzten Textzeile befindet, ohne dass eine Messung erforderlich ist.

Textgrundlinien-Hilfslinien werden häufig verwendet, um die Größe von Symbolen an den Text anzupassen. Bildnachweis: Walmart.

Adaptiver Text

Unsere Designer fügen echten Text und Informationen in ihre Kompositionen ein, und unsere Texte und Elemente in Symbolen reagieren auf die Länge des benachbarten Texts. Symbole bewegen sich, wenn sich die Textlänge ändert, um den Abstand beizubehalten. Die Textdekoration und das Auffüllen sind im Symbol festgelegt, sodass sich die Designer mehr auf den Inhalt konzentrieren können.

Tabulatoren und Aktivitätsanzeige reagieren auf die Textlänge. Bildnachweis: Walmart.Der Rand und der Cursor des Textfelds bewegen sich, wenn sich die Textlänge ändert. Bildnachweis: Walmart.

Farbe als Symbol

Walmart hat mehrere Abteilungen und Tochtergesellschaften mit jeweils einer eigenen Farbpalette. Bisher war es sehr mühsam, alle Farben eines Designs für einen anderen Unternehmensbereich zu aktualisieren. Wir müssten die Datei duplizieren und zwei Kopien für Aktualisierungen bereitstellen.

Jede Farbe in unserer Palette ist ein Symbol, einschließlich der Primär- und Sekundärfarbe, und wird überall dort verschachtelt, wo Farbe benötigt wird. Dies hat die Notwendigkeit zum Entfernen von Symbolen erheblich verringert und bietet Farbflexibilität.

Designer können die Farbe und Deckkraft eines Symbols über das Übersteuerungsmenü ändern. Bildnachweis: Walmart.

Aktualisieren Sie sofort die Farbe aller Symbole

Designer können Farben in der gesamten App erkunden, indem sie die Farboptionen der Bibliothek ändern. Auf der Seite zur Farbanpassung können sie die Ergebnisse in Echtzeit anzeigen, da sie die primäre, sekundäre und umsetzbare Textfarbe ändern. Es sind keine Plugins erforderlich. Symbole mit Symbolfarben werden sofort aktualisiert. Umsetzbare Textfarben werden über den Textstil von Sketch verwaltet. Dadurch kann die Textfarbe aktualisiert werden, während Symbole adaptiven Text erhalten.

Das Farbschema der Bibliothek wird durch Ändern der primären und sekundären Farbsymbole geändert. Bildnachweis: Walmart.

Updates werden ebenfalls vereinfacht. Designer werden aufgefordert, die Bibliothek zu aktualisieren, wenn sie eine Datei öffnen, die die Bibliothek verwendet. Wenn akzeptiert, werden die neuen Farben angewendet.

Mit dieser Technik können Designer auch benutzerdefinierte Bibliotheken mit Farbmotiven erstellen, speichern und auf jedes andere Projekt anwenden. Dies reduziert auch die Anzahl der Symbole, die in der Symbolbibliothek erstellt und verwaltet werden müssen, erheblich.

Konfigurierbare Symbole

Das Übersteuerungsmenü ermöglicht die Konfiguration von Symbolen in jedem Zustand oder in jeder Variation, die im Entwurfssystem beschrieben sind. Designer können sie weiter anpassen, indem sie relevante Bilder, Symbole und Farben auswählen.

Ein einzeiliges Listensymbol zeigt einen Avatar und ein ausgewähltes Kontrollkästchen an. Bildnachweis: Walmart.

Wir reduzieren unnötige Übersteuerungsmenüs, indem wir ein wenig zusätzliche Arbeit in der Bibliothek erledigen. Symbole mit dunklem Hintergrund zeigen beispielsweise nur die weiße Version von Symbolen an.

Bei einigen Symbolen muss die Symbolfarbe nicht ausgewählt werden. Weiße Symbole stehen für dunkle Hintergründe und schwarze Symbole für helle Hintergründe zur Verfügung. Bildnachweis: Walmart.

Aufkleber Blatt Vorlage

Mithilfe der Bibliothekssymbole werden auf dem Stickerbogen allgemeine Muster und eine Mixins-Seite bereitgestellt, auf der benutzerdefinierte Farben, Symbole und Avatare in den entsprechenden Bibliothekssymbolen angezeigt werden. Es enthält auch eine Zusammenfassungsseite zum Bereitstellen von Notizen, Kommentaren sowie der im Entwurf verwendeten Primär- und Sekundärfarben

Mixins: Hinzufügen von benutzerdefinierten Farben, Symbolen und Avataren

Durch unsere Iterationen haben wir Designer gefunden, die benutzerdefinierte Symbole, Farben und Avatare hinzufügen müssen. Durch das Trennen eines Symbols wurde verhindert, dass zukünftige Aktualisierungen empfangen werden. Choose Image funktioniert nur für eine einzelne Instanz des Symbols.

Ohne die Ignite-Bibliothek zu ändern, können Designer benutzerdefinierte Symbole hinzufügen, Farben und Bilder werden in Ignite-Symbolen angezeigt. In Sketch werden Symboldimensionen zum Auffüllen von Überschreibungsmenüs verwendet. Kunsttafeln mit entsprechenden Abmessungen sind auf dem Aufkleberblatt angegeben.

Wenn die Zeichenflächen im Aufkleberblatt in Symbole konvertiert werden, werden sie in allen relevanten Übersteuerungsmenüs angezeigt. Bildnachweis: Walmart.

Um ein neues Symbol hinzuzufügen, wandeln die Designer die bereitgestellte Symbol-Zeichenfläche in ein Symbol um. Das Symbol wird jetzt in jedem Übersteuerungsmenü mit den vorhandenen von Ignite bereitgestellten Symbolen angezeigt.

Beispiele für die Symbolkonfiguration

Ein einzelnes Symbol kann auf verschiedene Arten konfiguriert werden. Auf dem Aufkleberblatt werden die verschiedenen Konfigurationen für die am häufigsten verwendeten Symbole angezeigt.

Diese Seite im Aufkleberbogen enthält nur 3 Symbole, zeigt jedoch die verschiedenen möglichen Konfigurationen. Bildnachweis: Walmart.

Stickerbogen als Vorlage

Stickerbögen können mit zunehmender Verwendung unordentlich werden. Dinge bewegen sich, wenn sie kopiert und eingefügt werden. Wir bieten eine einfache Möglichkeit, das Stickerbogen in den Vorlagenordner von Sketch einzufügen. Wie bei der Installation von Apps auf einem Mac ziehen Designer die Datei in den Ordner.

Ein Installationsprogramm erleichtert das Bereitstellen der Aufkleberblätter als Skizzenvorlage. Bildnachweis: Walmart.

Neues Aufkleberblatt von der Schablone

Nach der Installation des Aufkleberbogens können Designer eine neue Kopie erhalten, um ein Projekt zu starten, indem sie den Aufkleberbogen aus dem Vorlagenmenü auswählen.

Eine neue Kopie des Stickerbogens kann über das Menü Vorlagen erstellt werden. Bildnachweis: Walmart.

Das Stickerbogen verwendet Symbole aus der Bibliothek, kann jedoch unabhängig aktualisiert werden. Auf diese Weise können neue Muster zum Stickerbogen hinzugefügt werden, ohne auf die nächste Veröffentlichung der Bibliothek zu warten.

Verwalten und Veröffentlichen der Bibliothek

Die Ignite Sketch-Bibliothek wird als Produkt mit Release-Zyklus, Feature-Backlog, Versionierung und Versionshinweisen behandelt.

Versionsnummerierung

Wir versuchen, Bibliothekssymbole so zu aktualisieren, dass beim Upgrade die Designs nicht beschädigt werden. Die Versionsnummer gibt Auskunft über die Fähigkeitsstufe der aktuell verwendeten Bibliotheksversion.

Bildnachweis: Walmart.

Die Versionsnummer wird in der Miniaturansicht der Skizzenbibliothek angezeigt, sodass Sie leicht erkennen können, welche Version geladen ist. Die Version finden Sie auch in den Versionshinweisen Symbolname.

Die Versionsnummer der Bibliothek finden Sie in der Miniaturansicht der Vorlage in den Versionshinweisen unter dem Symbolnamen. Bildnachweis: Walmart.

Verteilung

GitHub ist nicht nur für Code gedacht. Es kann zum Verwalten von Nicht-Textdateien verwendet werden und bietet eine einfache und leicht zu erstellende Produktseite.

GitHub Page wird verwendet, um die Produktseite zu generieren. Bildnachweis: Walmart.

Designer laden einen gezippten Ordner herunter, der die neueste Version und frühere Versionen enthält. Wenn Designer auf ein Problem stoßen, können sie schnell zu einer früheren Version zurückkehren.

Versionshinweise

Es ist wichtig, die Designer über neue Funktionen und Fehlerbehebungen zu informieren. GitHub Releases wird verwendet, um die Versionshinweise mit der angehängten Bibliotheksdatei zu veröffentlichen. Die neuesten Versionshinweise befinden sich ebenfalls in der Bibliothek und können über das Symbolmenü aufgerufen werden.

Beispiel für Versionshinweise unter Verwendung von GitHub-Versionen. Bildnachweis: Walmart.Versionshinweise sind in der Bibliothek als Symbol verfügbar. Bildnachweis: Walmart.

Verfolgung von Fehlern und Funktionsanfragen

GitHub Issues bietet eine einfache Möglichkeit, Fehler und Featureanfragen einzureichen. Jeder Beitrag ist ein Diskussionsthread, in den sich jeder einbringen kann. Labels, Projekte, Meilensteine ​​und zugewiesene Personen können zum Heften hinzugefügt werden.

Bugs und Feature Requests können mit GitHub Issues nachverfolgt und besprochen werden. Bildnachweis: Walmart.

Eine Projektseite kann für die nächste Version erstellt werden und alle relevanten Fehler- / Feature-Beiträge können über die Tags hinzugefügt werden, so dass genau nachverfolgt werden kann, was für die nächste Version geplant ist.

Kommunikation

Wir haben einen speziellen Slack-Kanal, der Designern zugänglich ist und neue Releases ankündigt. Für jede Version veröffentlichen wir die Versionshinweise und verlinken auf die Produktseite.

Jetzt bist du dran

Durch kontinuierliches Feedback und Iteration bemühen wir uns, die Bibliothek zu verbessern und unseren Designern zu helfen, genauer, effizienter und konsistenter zu entwerfen.

Die Erstellung einer Skizzensymbolbibliothek kann sich lohnen, wenn Sie Schwierigkeiten mit der Konsistenz haben oder zu viel Zeit damit verbringen, dieselben Komponenten neu zu erstellen.

Es kann schwierig sein, die richtige Balance zwischen einem gesperrten und einem extrem flexiblen Symbol zu finden. Fangen Sie klein an, teilen Sie häufig mit Designern und iterieren Sie schnell. Wenn die Bibliothek den Designern hilft, konsistenter zu sein und schneller voranzukommen, müssen Sie sie nicht verkaufen. Designer werden es verlangen.