Skizzenanleitungen

Alles, was Sie über den neuen Design System Manager von InVision wissen müssen, einschließlich dessen, wie Sie einen erstellen

Teamzusammenarbeit leicht gemacht.

Sein Name mag jetzt vertraut klingen, aber Ransom E. Olds wird von vielen als Begründer der Automobilindustrie und Patriarch der Massenproduktion angesehen. Vielleicht haben Sie vom Oldsmobile gehört? Er ist der Typ.

Diesem vergessenen Pionier wird die Entwicklung des Fließbands zugeschrieben, mit dessen Hilfe er das erste Serienauto der Welt, den Oldsmobile Curved Dash, baute. Jetzt ist da ein Auto!

Der Verdienst für die Erfindung des Fließbands geht oft an Henry Ford wegen einer sehr wichtigen Neuerung: Ford stellte die Autos auf eine Art Förderband und schuf das alles entscheidende Fließband.

Die Montagelinie ist eine der außergewöhnlichsten Innovationen, die jemals entwickelt wurden. Erstmals konnten Produkte ohne Qualitätseinbußen schnell und konsequent montiert werden. Es gab keine Vermutungen - Produkte, die von der Linie kamen, sahen jedes Mal gleich aus und wirkten gleich.

Das Konzept wurde branchenübergreifend verbessert und angepasst, um die Produktion zu beschleunigen und den Output zu verbessern, und es hat endlich seinen Weg in die gängige Konstruktionspraxis mit Konstruktionssystemen gefunden.

Die richtige Zeit

Wenn Sie digitale Produkte in großem Maßstab mit einem internen Designteam aus mehr als einer Person erstellen, ist es möglicherweise an der Zeit, mit dem Aufbau eines Designsystems zu beginnen.

Es gibt verschiedene Ebenen der Komplexität und Komplexität, aber alle Systeme enthalten eine Art Sammlung wiederverwendbarer Elemente und Komponenten. Wenn Sie sich für eine elementare Gruppe von Designelementen entschieden haben, können Sie festlegen, wie und wann diese verwendet werden sollen, und sie an einem zentralen Ort für die Herstellung im Fließbandstil durch Ihr Designteam speichern.

InVision Design System Manager (DSM)

Wir befinden uns in einer industriellen Revolution, in der jeden Tag neue Designtools auf den Markt gebracht werden, und es kann schwierig sein, die Unordnung zu durchschauen.

Nachdem ich verschiedene Tools überprüft hatte, kehrte ich schließlich zum InVision DSM-Plugin zurück, da InVision für unseren Workflow für die Entwurfsbereitstellung von zentraler Bedeutung war und sein wird. Es hat für mich einfach Sinn gemacht, im Ökosystem zu bleiben.

Hinweis: Ich habe nicht zu Studio gewechselt, da meine Agentur sehr stark mit Sketch vertraut ist. In diesem Moment wäre es ein kostspieliger Wechsel, aber wir schließen ihn nicht aus. Ich höre großartige Dinge und die Zeit könnte in der Zukunft besser sein.

DSM ist der Ford der Konstruktionssysteme und bietet eine Verbesserung des Konzepts, mit dem ein Konstruktionssystem einfacher aktualisiert und skaliert werden kann, ohne auf das Konstruktionswerkzeug Ihrer Wahl verzichten zu müssen.

Warum nicht einfach Skizzenbibliotheken verwenden?

Völlig verständliche Frage - ich habe dasselbe gefragt. Hier ist, warum es mir gefällt:

  • Drag-and-Drop-Schnittstelle
  • Sie können nach Komponenten suchen
  • Symbole werden visuell in einer Toolbox organisiert
  • Team Sharing ist einfacher
  • Versionsverlauf und Versionsbereitstellung
  • Automatisch generierter Online-Styleguide

Bauen Sie Ihr Design-System

Lassen Sie uns jeden Schritt aufschlüsseln, der zum Aufbau Ihres Konstruktionssystems in InVision DSM erforderlich ist. Es ist erwähnenswert, dass ausgereifte Designsysteme normalerweise Design, Philosophie und Code enthalten. Ich werde den Entwurfsabschnitt in diesem Artikel behandeln, erkenne jedoch nur, dass es sich nur um einen Teil einer größeren Montagelinie handelt.

Ich gehe davon aus, dass Sie Ihre Stile und Symbole bereits erstellt haben. Wenn Sie dies noch nicht getan haben, können Sie Render, das von InVision DSM bereitgestellte Beispieldesignsystem, verwenden.

Öffnen Sie Ihr Design-System. Skizzieren Sie eine Datei, in der Sie die verschiedenen Komponenten Ihres Design-Systems erstellt haben, und legen Sie los.

Schritt 1: Erstellen einer Bibliothek

Gehen Sie zu Ihrem InVision-Web-Dashboard und klicken Sie auf DSM.

Genauso wie Sie ein neues InVision-Projekt erstellen müssen, bevor Sie mit der Synchronisierung von Bildschirmen beginnen können, müssen Sie eine neue Entwurfssystembibliothek erstellen. Wenn Ihr Design-System wächst, empfiehlt es sich, Ihre Systemkomponenten in mehrere Bibliotheken zu unterteilen - eine Bibliothek für den Desktop, eine für iOS-Handys, eine für Android-Handys, eine für Kernkomponenten, eine für produktspezifische Komponenten usw.

Klicken Sie auf Neue Bibliothek erstellen, um zu beginnen:

Schritt 2: Laden Sie das Plugin herunter

Ihre Design-System-Shell ist fertig und es ist Zeit, sie mit Elementen, Komponenten und gespeicherten Stilen zu füllen.

Laden Sie das InVision Craft-Plugin herunter und installieren Sie es, falls Sie dies noch nicht getan haben. Wenn Sie es noch nie zuvor verwendet haben, werden Sie möglicherweise verwirrt, wenn Sie die App öffnen, da Sie keinen Start sehen. Sie finden es in der Mac-Menüleiste.

Stellen Sie sicher, dass Sie das DSM-Tool oben auf der Registerkarte Tools aktivieren.

Wenn Sie es richtig installiert haben, wird in Sketch eine neue vertikale Symbolleiste angezeigt:

Schritt 3: Die Bibliotheksabschnitte verstehen

Klicken Sie unten auf die Zahnform (diese befindet sich möglicherweise an einer anderen Stelle, je nachdem, welche Werkzeuge Sie in Craft Manager aktiviert haben). Die DSM-Toolbox wird in einem neuen Fenster geöffnet, und Ihre neue Bibliotheksshell sollte bereits ausgewählt sein:

Pro Tipp: Ein- und Ausblenden dieses Fensters mit Befehlstaste + L!

Eine DSM-Bibliothek ist standardmäßig in fünf Abschnitte (Ordner genannt) unterteilt:

  • Farben: Hier legen Sie alle Farben fest, die in Ihrem System verwendet werden
  • Textstile: Hier legen Sie alle gespeicherten Textstile ab
  • Ebenenstile: Hier legen Sie alle gespeicherten Ebenenstile (Füllungen, Rahmen, Schatten usw.) ab.
  • Symbole: Hier können Sie alle Symbolsymbole Ihres Designsystems organisieren.
  • Komponenten: Hier platzieren Sie alle Ihre Symbole.

Ordner

Ordner sind wahrscheinlich das bequemste Tool in DSM, da Sie damit die Teile Ihres Entwurfssystems nachdenklich organisieren können, sodass sie für jeden, der sie verwendet, sinnvoll sind. Sie können sogar Ordner in anderen Ordnern erstellen, um die Organisation zu vertiefen (derzeit auf zwei Verschachtelungsebenen beschränkt).

Schritt 4: Hinzufügen von Farben

Wählen Sie den Ordner Farben und klicken Sie auf die Schaltfläche + unten rechts. Ein Modal wird angezeigt, in dem Sie aufgefordert werden, diese Farbpalette zu benennen. Sie können mehrere Farbpaletten basierend auf Ihrem Farbsystem verwenden. Sie können also eine oder mehrere erstellen.

DSM scannt Ihr Dokument, um alle von Ihnen verwendeten Farben zu finden. Wählen Sie diejenigen aus, die Sie zu dieser Palette hinzufügen möchten, und klicken Sie dann auf Farben hinzufügen.

Klicken Sie auf den Text unter dem Farbfeld, um Ihre Farben in etwas Nützlicheres umzubenennen:

Mit DSM können Sie den Komponenten in Ihrer Bibliothek Beschreibungen hinzufügen, die sich hervorragend zum Hinzufügen von Verwendungsrichtlinien und Entwurfsprinzipien eignen:

Der Rich-Text-Editor ist ziemlich einfach - ich muss ihn nicht mit meiner eigenen Formatierung hacken.

Schritt 5: Hinzufügen von Textstilen

Wenn Sie noch keine Textstile verwenden, fordere ich Sie auf, sofort zu beginnen. Wenn Sie Produkte mit Textstilen entwerfen, ist es denkbar einfach, dateiweite Aktualisierungen der Schriftart vorzunehmen, indem Sie nur den Stil aktualisieren und dann synchronisieren.

Wie auch immer, das Hinzufügen von Textstilen ist kinderleicht, da DSM alles für Sie erledigt. Klicken Sie in den Ordner "Textstile" und dann unten rechts auf die Schaltfläche "+":

Es sieht so aus, als würde es Duplikate ziehen, aber nicht. Ich habe zwei Textstile für die Ausrichtung nach links und in der Mitte eingerichtet!

DSM erkennt automatisch jeden Textstil in Ihrem Dokument. Klicken Sie einfach auf Alle auswählen und Textstile hinzufügen.

Schritt 6: Hinzufügen von Ebenenstilen

Klicken Sie in den Ordner Ebenenstile und wiederholen Sie den vorherigen Schritt. Ziemlich einfach!

Schritt 7: Hinzufügen von Symbolen

Es ist wichtig zu beachten, dass Symbole keine Symbole sein müssen, um sie Ihrer DSM-Bibliothek hinzuzufügen.

!!! Ein sehr wichtiger Hinweis !!!
DSM unterstützt Deep Nesting in Symbolen. Wenn Sie also die Farbsymboltechnik verwenden, um die Farbe Ihrer Symbole zu ändern, kratzt DSM Ihre Datei automatisch nach allen verschachtelten Symbolen und importiert diese automatisch in die Bibliothek. Dies bedeutet, dass Sie Ihre Farbsymbole nicht importieren müssen. Importieren Sie einfach Ihre endgültigen Symbolzusammensetzungen… nicht die einzelnen verschachtelten Symbole, aus denen die endgültige Komponente besteht.

Klicken Sie in den Ordner "Symbole", wählen Sie eine Symbolebene oder ein Symbol aus und klicken Sie dann zum Hinzufügen auf die Schaltfläche "+". Hinweis: Sie können mehrere Symbole gleichzeitig auswählen und auf einen Schlag hinzufügen. Sie müssen nicht einzeln ausgeführt werden. Puh.

Ich empfehle dringend, dass Sie sich etwas Zeit nehmen, um Ihre Symbole in einer verständlichen Unterordnerstruktur zu organisieren. So können Sie sie später leichter finden:

Normalerweise teile ich meine in Folgendes ein:

  • App Icons: Produktsymbole für Dinge wie Twitter und Facebook.
  • Benutzeroberflächensymbole: Standard-Benutzeroberflächensymbole wie Einstellungen, Löschen, Benutzerprofil usw.
  • Symbole umschalten: Markierungsfelder, Radios und Schalter.
  • Verschiedene Symbole: Alles andere, was nicht in die oben genannten Kategorien passt.

Schritt 8: Hinzufügen von Komponenten

Sie sollten jetzt den Dreh raus haben! Klicken Sie in den Ordner Komponenten und dann auf die Schaltfläche +, um die wiederverwendbaren Elemente und Komponenten hinzuzufügen.

Hier möchten Sie mit Ihrer Ordnerstruktur aufgeräumt sein:

Beachten Sie, dass DSM tief verschachtelte Symbole, aus denen Ihre größeren Symbolzusammensetzungen bestehen, automatisch importiert. Sie müssen also nur die „letzte Komponente“ in DSM importieren:

Die obigen Chips enthalten viele verschachtelte Symbole, mit denen Sie verschiedene Avatar-Stile (Bild, Initialen, Symbole), Chipfarbe und Textfarbe auswählen können. Ich musste nur mein letztes Chipsymbol in DSM importieren. Wenn ich Chips aus meinem Design-System in einer anderen Datei verwende, bringt DSM alle diese verschachtelten Symbole mit, einschließlich aller verschachtelten Symbole mit derselben Zeichenfläche.

Es ist wirklich sehr, sehr schön.

Schritt 9: Bereitstellen und Verwenden des Systems

Wenn Sie alle erforderlichen Komponenten zu Ihrem Design-System hinzugefügt haben, stehen sie sofort allen Mitgliedern Ihres Teams zur Verfügung! Sie müssen nur auf "Synchronisieren" klicken, um ihre Datei mit den neuesten Informationen aus der freigegebenen DSM-Bibliothek zu aktualisieren.

Im Enterprise-Plan haben Sie die Möglichkeit, anspruchsvollere Aufgaben wie die Versionsverwaltung für Bibliotheken, Benutzerberechtigungen und die Bibliothekszugriffskontrolle auszuführen.

Wenn Sie sich im Enterprise-Plan befinden und eine neue Version veröffentlichen möchten, klicken Sie einfach auf das Dropdown-Menü oben links und wählen Sie "Neue Version veröffentlichen".

Ihre neue Design-System-Version ist jetzt vorhanden. Wenn Sie bereits eine frühere Version veröffentlicht haben, können Sie sehen, was geändert wurde, indem Sie auf "Versionsverlauf" klicken.

So gelangen Sie zu einer Webansicht Ihres Änderungsprotokolls, wie Sie es möglicherweise sehen, wenn Sie eine App auf Ihrem Computer aktualisieren:

Sie sollten wirklich viel ausführlicher und detaillierter sein als im obigen Screenshot, damit Ihr Team weiß, was sich geändert hat.

Apropos Team: Sie möchten wahrscheinlich einige andere Designer einladen, Ihre neue DSM-Bibliothek zu verwenden, zu bearbeiten und zu verwalten.

Klicken Sie in Ihrer Bibliothek auf der Weboberfläche oben rechts auf die Schaltfläche Einladen. Es wird ein Popover angezeigt, in das Sie andere Designer einladen können.

Hinweis: Wenn Sie sich im Enterprise-Plan befinden, können Sie Benutzer zum Anzeigen, Bearbeiten oder Verwalten (Admin) dieser Bibliothek einladen.

Sie können auch die Registerkarte Personen auf dem DSM-Startbildschirm aufrufen, um Mitarbeiter in Ihren Bibliotheken anzuzeigen, zu bearbeiten und hinzuzufügen.

Diese Berechtigungen und Rollen sind nur im Enterprise-Plan verfügbar.

Sie können auch über das DSM-Plugin schnell zu dieser Seite springen:

Schritt 10: Aktualisieren Ihres Systems

Da Sie der "Hauptbibliothekar" Ihres neuen Konstruktionssystems sind, ist es sinnvoll, von Zeit zu Zeit Aktualisierungen vorzunehmen, ob Sie neue Komponenten hinzufügen oder vorhandene aktualisieren.

Klicken Sie in den Ordner, der die Komponente enthält, die Sie aktualisieren möchten, und klicken Sie dann auf die Schaltfläche +. Wenn DSM feststellt, dass das Symbol bereits vorhanden ist, wird ein Dialogfeld angezeigt, das wie folgt aussieht:

Entscheiden Sie, ob Sie Neues erstellen oder Vorhandenes ersetzen möchten, und die Änderung wird in Ihre DSM-Bibliothek übernommen:

Wenn Aktualisierungen in Ihrer Bibliothek vorgenommen werden, werden Mitglieder Ihres Designteams benachrichtigt, dass Komponenten aktualisiert wurden:

Sie müssen lediglich auf Bibliothek synchronisieren klicken, um zu dokumentieren, und die Änderungen werden in ihrem Dokument übernommen, wobei alle vorhandenen Überschreibungen (wie z. B. Text) beibehalten werden:

Really-Quick-Side-Note: Jeder, der nicht in den Bibliothekssymbolen herumstöbern sollte, kann innerhalb der Mitbearbeiterberechtigungen einfach als Viewer anstelle eines Administrators oder Editors festgelegt werden. Schützen Sie Ihr System vor unerwünschten Änderungen!

Zusammenfassung

In diesem Artikel haben wir gelernt, wie Sie eine Bibliothek erstellen, das Craft-Plugin installieren, Ihre Bibliothek erweitern und Ihr System bereitstellen. Sie und Ihr Team sind jetzt bereit, Ihr brandneues Designsystem zu verwenden!

Ich habe InVision dabei geholfen, ein Beispieldesignsystem mit dem Namen Render zu erstellen, damit Sie sehen können, wie gut es in der Webansicht aussieht. Laden Sie die Skizzendatei und das Craft-Plugin herunter, und Sie können beginnen, Ihre eigene Bibliothek mit dem DSM-Tool zusammenzustellen, wobei Sie das Render-System als Ausgangspunkt verwenden.

Klicken Sie oben, um das fertige Design-System in InVision anzuzeigen!

Wenn ich keine Entwurfssysteme erstelle, arbeite ich bei UX Power Tools an Skizzentools, um Sie zu einem besseren und effizienteren Designer zu machen.

Folgen Sie UX Power Tools auf Twitter
Folge mir auf Twitter
Sagen Sie Hallo auf LinkedIn
Weitere Informationen finden Sie im Blog meiner Agentur