So erstellen Sie einen Sketch-Styleguide, eine Bibliothek und ein UI-Kit

Jedes Designprojekt kann von einem gut durchdachten Styleguide profitieren. Verwenden Sie dieses Tutorial, um ein UI-Kit aufzubauen und gleichzeitig eine benutzerdefinierte (und wiederverwendbare) Bibliothek für Rapid Prototyping zu erstellen.

Ob Sketch-Experte oder Sketch-Neuling, Designer werden feststellen, dass das Erstellen von Styleguides in Sketch eine wertvolle Ressource für ihre Design-Toolbox sein kann, die viel Zeit sparen kann.

Ein Styleguide hilft nicht nur, die Dinge konsistent zu halten, sondern ermöglicht auch die Aktualisierung von Elementen wie Farben und Symbolen in mehreren Dokumenten mit viel weniger Aufwand. Dieses Tutorial führt Schritt für Schritt durch den Prozess der Erstellung eines Styleguides und eines UI-Kits und vermittelt Designern ein besseres Verständnis von Sketch-Symbolen, Verweisen auf eine Sketch-Bibliothek für ihre Designs und Vertrauen in die Organisation ihrer Design-Assets.

Erstellen Ihres Sketch-Styleguides

„Ein Styleguide ist ein umfassendes ‚lebendes Dokument', das alle sich wiederholenden Elemente für ein Projekt verfolgt, von Branding-Regeln bis hin zur Abschrägung für Call-to-Action-Buttons“, so UXPin. Ein Styleguide kann alles enthalten, von einfachen visuellen Elementen bis hin zu Vokabular und genehmigter Bildsprache. Dieses Tutorial behandelt Organisation, Farben, Symbole, Schriftarten, Textstile und Assets.

Schritt eins: Organisation

1. Erstellen Sie einen Hauptordner für Skizzendateien, Plugins und andere notwendige Elemente wie Schriftarten und Ikonografie. (Plugins werden am Ende des Tutorials besprochen.)
2. Starten Sie eine neue Sketch-Datei und nennen Sie sie „ Clientname Library“. Wenn Ihr Kunde beispielsweise Toptal ist, sollte Ihre Datei „Toptal Library“ heißen.

Schritt zwei: Farben

Wenn bereits Farben ausgewählt wurden, besteht der nächste Schritt darin, Ihre Farben in Symbole umzuwandeln.

1. Machen Sie dazu Quadrate gleicher Größe und ändern Sie ihre Farben entsprechend. Klicken Sie auf „Symbol erstellen“ und speichern Sie diese Elemente mit dem Beschriftungssystem Farbe/ @Farbname . Color/@pink , color/@background-gray oder color/@FFFFF sind Beispiele für geeignete Labels. Namenskonventionen sind wichtig, um einen Styleguide organisiert zu halten, daher sollte ein Format für alles festgelegt und von Anfang an eingehalten werden.
2. Wenn Sie fertig sind, fügen Sie sie der Styleguide-Seite hinzu.
3. Speichern Sie das Farbfeld im Dokumentenbereich Ihrer Farbpalette.

Hilfreiche Abkürzungen: R – Rechteckwerkzeug, T – Textwerkzeug, alt – Abstand messen.

Schritt drei: Symbole

Durch das Umwandeln von Symbolen in dynamische Symbole kann ihre Farbe einfach in eine der oben in Schritt 2 gespeicherten Farben geändert werden. Das bedeutet, dass nach dem Platzieren eines Symbols in einem Design die Farbe über ein einfaches Dropdown-Menü, das als „Überschreiben“ bezeichnet wird, mithilfe des „Inspektors“ rechts neben der Leinwand geändert werden kann.

1. Speichern Sie das Symbol als Symbol (halten Sie sich nach Möglichkeit an .svg für den Asset-Typ).
2. Gehen Sie auf die Symbolseite, suchen Sie das Symbol und maskieren Sie es mit einer Standardfarbe aus den zuvor gespeicherten Farben. Legen Sie dazu das Farbsymbol über das Symbol und klicken Sie in der Symbolleiste auf „Maskieren“ (oder klicken Sie mit der rechten Maustaste und wählen Sie „Maskieren“ aus dem Popup-Menü).
3. Nachdem das Symbol maskiert ist, entfernen Sie die Füllung, indem Sie das Kontrollkästchen im Abschnitt „Füllungen“ im Inspektor deaktivieren.
4. Organisieren Sie die Symbole auf der Styleguide-Seite. Im selben Abschnitt ist es hilfreich, die Farbe für aktive und inaktive Symbole sowie alle anderen wichtigen Farbspezifikationen anzugeben.

Schritt vier: Textstile

Sobald Schriftarten ausgewählt wurden, ist es an der Zeit, Textstile festzulegen: H1, H2, H3, H4, H5, Textkörper, Links, Bildunterschriften, Beschriftungen usw. Eine gute Referenz für Webtypografie ist dieser Blogbeitrag von Typecast.

1. Wählen Sie Größe, Gewicht, Zeichen und Zeilenabstand für so viele Stile wie nötig.
2. Schreiben Sie ein Wort („Geben Sie etwas ein“ wird automatisch angezeigt, wenn Sie T, das Textwerkzeug, drücken) und formatieren Sie es, um die ausgewählten Stildetails widerzuspiegeln.
3. Klicken Sie auf „Neuen Textstil erstellen“.
4. Organisieren Sie die Textstile auf der Styleguide-Seite.

Schritt fünf: Vermögenswerte

Nun zum lustigen Teil. Es ist an der Zeit, alle vorherigen Schritte zu kombinieren, um einige Assets zu erstellen. Wenn Elemente bereits erstellt wurden, ist es aus Gründen der Konsistenz am besten, sie mit den bereits ausgewählten Textstilen, Symbolen und Farben neu zu erstellen. Zum Beispiel könnte es viele verschiedene Grautöne innerhalb des Arbeitsdesigndokuments geben, die ein Design nicht berücksichtigt hat, sodass die Neuerstellung des Assets die Konsistenz der gewählten Farbe garantiert. Vergessen Sie nicht, die Benennung konsistent zu halten, und stellen Sie sicher, dass Sie der Styleguide-Seite Assets hinzufügen, während sie erstellt werden.

Hier sind einige empfohlene Assets, an denen Sie arbeiten können:

Tasten

1. Erstellen Sie diese dynamischen Symbole, genau wie die Symbole, indem Sie die Schaltfläche in der Standardfarbe maskieren und die Füllung entfernen.
2. Um den Text immer zentriert zu halten, überspannen Sie die Breite des Textfelds so, dass sie der Schaltfläche entspricht, und zentrieren Sie den Text.
3. Achten Sie darauf, die gespeicherten Textstile zu verwenden, um Konsistenz zu gewährleisten.
4. Speichern Sie diese Elemente als Symbole unter Verwendung des Schaltflächen-/ Schaltflächennamen- Benennungssystems.
5. Verwenden Sie die Überschreibungsfunktion, um Beschriftungen und Farben zu ändern.

Suchleisten

1. Wenden Sie Größenbeschränkungen auf das Suchfeld sowie Symbole und Text an, die innerhalb des Felds selbst verwendet werden.
2. Vergessen Sie nicht, Textstile und Farben anzuwenden, die zuvor in Ihrer Dokumentfarbpalette gespeichert wurden.
3. Speichern Sie dieses Element als Symbol mit Suche als Titel oder halten Sie sich bei verschiedenen Suchtypen an das Kennzeichnungssystem wie Suche/Standard und Suche/kein Symbol .

Optionsfelder und Kontrollkästchen

1. Es ist möglich, ein Symbol innerhalb eines Symbols zu haben, und eine gute Möglichkeit, dies zu testen, besteht darin, intelligente Optionsschaltflächen- und Kontrollkästchen-Assets zu erstellen.
2. Erstellen Sie zuerst das Schaltflächenelement selbst. Speichern Sie dieses Element als Symbol mit Checkbox/ markiert und Checkbox/demarkiert als Beispielbeschriftung.
3. Erstellen Sie nun die Eingabe. Fügen Sie Platzhaltertext neben dem Kontrollkästchensymbol hinzu und konvertieren Sie dann das gesamte Asset in ein Symbol. Da dies jetzt eine Eingabe ist, wird empfohlen, das Asset als solches zu speichern, sodass eine gute Bezeichnung input/checkbox/selektiert und input/checkbox/desselected wäre.

Schritt 6: Verwenden Sie den Styleguide!

Diese ganze Arbeit zum Erstellen eines Styleguides ist nur dann sinnvoll, wenn ein Projekt dadurch tatsächlich reibungsloser abläuft. Nachdem alle Assets erstellt wurden, ist es an der Zeit, die Bibliothek auf das zu entwerfende Dokument anzuwenden. Gehen Sie in Sketch zu „Preferences ‐> Add Library…“ und fügen Sie das Bibliotheksdokument hinzu.

Nachdem Sie Ihrer Projektdesigndatei eine Bibliothek hinzugefügt haben, können Sie im Abschnitt „Symbole“ auf die Bibliothek und ihre Symbole zugreifen. Sie werden die iOS UI Design-Bibliothek bemerken, die mit Sketch als Bibliotheksoption geliefert wird, sowie die kürzlich importierte Bibliothek.

Wenn Sie ein Symbol aktualisieren möchten, doppelklicken Sie auf das Symbol selbst und Ihr Bibliotheksdokument sollte erscheinen. Nachdem Sie die Änderungen vorgenommen haben, gehen Sie zurück zum Designdokument und klicken Sie auf die Schaltfläche „Aktualisieren“ in der oberen rechten Ecke.

Bonus: Importieren/Exportieren von Textstilen

Textstile werden nicht mit einer Bibliothek gespeichert, aber das Shared Text Styles-Plugin für Sketch löst das. Nachdem Sie das Plugin heruntergeladen haben, gehen Sie zum Bibliotheksdokument und dann zum Menü: „Plugins ‐> Shared Text Styles ‐> Export…“ Speichern Sie diese Datei im selben Ordner wie Ihr Bibliotheksdokument. Gehen Sie dann in Ihrem Designdokument erneut zum Menü: „Plugins ‐> Freigegebene Textstile ‐> Textstile importieren…“ und importieren Sie die gerade gespeicherte Datei. Ihre Textstile werden angezeigt.

Bonus: Farbpaletten importieren/exportieren

Ähnlich wie bei Textstilen werden Dokumentfarben nicht mit einer Sketch-Bibliothek gespeichert, aber das Sketch-Paletten-Plugin löst das. Ähnlich wie oben, exportieren Sie die Palette mit „Plugins ‐> Skizzenpalette ‐> Dokumentfarben ‐> Palette speichern“ und importieren Sie sie mit „Plugins ‐> Skizzenpalette ‐> Dokumentfarben ‐> Palette laden“. Denken Sie daran, es im selben Ordner wie Ihre anderen Bibliotheksdokumente zu speichern.

Prämie: Schriftarten

Craft by InVision ist eine Suite von Plugins, die die Sketch-Software auf die nächste Stufe bringen. Mit Craft können Sie Bilder durch Stockfotos ersetzen, Prototypen erstellen und mit InVision synchronisieren, Bibliotheken erstellen und vieles mehr. Wenn Craft heruntergeladen ist, drücken Sie im Dokument „cmd-shift-c“ und ein Stylesheet wird generiert. Die Schriftarten werden hier aufgelistet.

Wenn Sie die oben beschriebenen sechs Schritte befolgen, laufen sowohl große als auch kleine Designprojekte reibungsloser und das Endergebnis wird ausgefeilter. Wenn sie einzigartig oder sehr spezifisch sind, können der Styleguide, die Bibliothek und das UI-Kit für einen Kunden oder für viele Projekte verwendet werden, wenn ständig Standard-UI-Elemente wie Wireframes und Prototypen erstellt werden. Wenn Sie am Anfang Zeit darauf verwenden, diese Sketch-UI-Komponenten richtig zu erstellen, sparen Sie viel Zeit auf der ganzen Linie und möglicherweise über viele Projekte hinweg.

Weiterführende Literatur im Toptal Design Blog:

• Warum Startups einen Styleguide brauchen
• Dinge, die Sie vielleicht nicht über Typografie in Sketch wissen
• Die ultimative Liste von 50 der besten Sketch-Plugins
• Adobe XD vs. Sketch – Welches UX-Tool ist das Richtige für Sie?
• So erstellen Sie ein effektives Design-Framework (enthält ein kostenloses Sketch-UI-Framework)