Sketch Tutorial

So erstellen Sie ein Entwurfssystem in Sketch (Teil 2)

Lassen Sie mich Ihnen zeigen, wie Sie einige der Schlüsselsymbole für Ihr Design-System einsetzen

Möchten Sie Ihren Workflow mit meinem Premium Design System for Sketch drastisch verbessern? Sie können eine Kopie von Cabana hier abholen.

Verwenden Sie den Angebotscode MEDIUM25, um 25% Rabatt zu erhalten.

Aufbau der Schlüsselsymbole

Im vorherigen Artikel habe ich Ihnen gezeigt, wie Sie die Grundlagen für Ihr Design-System in Sketch erstellen und die Basiselemente wie Farbe und Typografie, die die ersten für Ihren Build erforderlichen Elemente sind.

In diesem Teil möchte ich Ihnen zeigen, wie Sie auf diesen Basiselementen aufbauen und welche Schlüsselsymbole erforderlich sind, um in Sketch auf einem starken Design-System aufzubauen.

Bitte beachten Sie: Ich werde Ihnen hier nicht zeigen, wie Sie Hunderte von Symbolen aufbauen können. Seien wir ehrlich, das wäre ein 12-teiliges Tutorial, das etwas zu schwer ist. Stattdessen werde ich einige der Schlüsselelemente ansprechen, die zu einem starken und vielseitigen System gehören.

Ok, wenn Sie mitverfolgt haben, werden Sie feststellen, dass wir jetzt unsere Basisfarben, Überlagerungen usw. an Ort und Stelle haben und ihre gemeinsamen Stile (d. H. Füllen / Primär) erstellt haben.

Wir haben auch unsere Typografie sowie andere verschiedene Stile wie Schatten, Verläufe usw. eingerichtet.

Kehren wir zu den Farben zurück, und nehmen Sie diese gespeicherten freigegebenen Stile und erstellen Sie einige Symbole, die sich irgendwann in unserem Design-System verbreiten.

Lasst uns anfangen…

Farbsymbole

Ich werde mich nur auf die Primärfarbe konzentrieren, die wir für dieses Tutorial erstellt haben, ansonsten wird es, wie ich bereits erwähnte, ein 12-stündiges Tutorial, und wer hat die Zeit zwischen Projekten, Weihnachtseinkäufen und dem Gedanken: „Ooh ist wirklich InVision Studio alle dat? '.

Ich habe selbst eine Symbolseite erstellt (es ist eine unorthodoxe Vorgehensweise, aber ehrlich gesagt macht sie am Ende Sinn), dann ein Rechteck (100x100) gezeichnet, den Füll- / Primär-Freigabestil angewendet und diese Ebene dann umbenannt Base.

Ich habe dann einfach ein neues Symbol erstellt und es Farbe / Primär benannt.

Ich habe das Original entfernt und nur das neue Symbol erhalten. Farbe / Primär.

Dann musste nur noch das neue Symbol dupliziert, die Basisebene ausgewählt, die anderen zuvor erstellten Füllformate ausgewählt und das Symbol in der Ebenenliste umbenannt werden.

Mit diesen einfachen farbigen Symbol-Joy-Blöcken können Sie sie mit Leichtigkeit auf so ziemlich jedes andere Symbol anwenden.

Textsymbole

Aber zuerst erstellen wir einige Textsymbole. So wie es aussieht, müssen Sie dies manuell tun, bis Sketch ein erstaunliches Update erstellt, mit dem wir diesen eher banalen Prozess umgehen können. Hier ist die Hoffnung!

Ich wollte 2 Sätze von Textsymbolen anstreben. Eine für Tasten und die andere für Eingänge. Verwenden der Schriftfamilie Nr. 1 (Poppins) für Schaltflächen und der Schriftfamilie Nr. 2 (Open Sans) für Formulareingaben, Beschriftungen, Nachrichten und dergleichen.

Ich habe bestimmte Textstile ausgewählt, die ich zuvor erstellt habe -

  • Schwarz
  • Grün
  • Grau
  • Hellgrau
  • Primär
  • rot
  • Weiß

Ich entschied mich dann für 3 Größen für jedes meiner Textsymbole. Groß, Mittel und Klein. Diese wurden dann noch weiter in Symbole für links, rechts und zentriert ausgerichteten Text unterteilt.

Platzieren eines Textstils auf meiner Symbolseite (d. H. H5 / Schriftfamilie 1 / Mitte / Schwarz / Fett). Ich habe dann den Text so bearbeitet, dass er "Button" lautet, und daraus ein Symbol erstellt (Text / Button / Groß / Mitte / Schwarz).

Anschließend habe ich die Textebene an den linken und rechten Rand des Symbols geheftet, damit sie bei Verwendung innerhalb eines Schaltflächensymbols (auf das wir später noch eingehen werden) korrekt ausgerichtet wird.

Ja, das Erstellen von Textsymbolen ist, wie ich schnell festgestellt habe, am zeitaufwändigsten, wenn Sie ein Design-System in Sketch einrichten. Wenn Sie diese Symbole jedoch verwenden, können Sie die Art und Weise des Überschreibens sehr genau steuern Sie bauen die vielen folgenden Symbole auf (Schaltflächen, Eingaben, Menüelemente, Benachrichtigungen, Dropdowns und mehr).

Als ich schließlich mit dem Erstellen der Textsymbole fertig war, hatte ich ungefähr Folgendes…

Nach einer Symbolbenennungskonvention von -

  • Text / Knopf / Groß / Mitte / Schwarz
  • Text / Knopf / Mittel / Mitte / Schwarz
  • Text / Knopf / Klein / Mitte / Schwarz

Natürlich auch mit Links- / Rechtsausrichtung und Farbvarianten (z. B. Text / Schaltfläche / Groß / Links / Grün).

Ich habe etwas sehr ähnliches für die Eingabesymbole getan und mich dafür entschieden, die Schriftfamilie # 1 (Open Sans) für diese zu verwenden ...

Icon Symbole

Mit den Symbolen für Cabana habe ich mich für (mindestens 90%) aus dem Google Material Icon Set entschieden. Es gab dort nicht genug Abwechslung, also musste ich ein anderes Icon-Set aufrufen, um die Lücken zu füllen.

Lassen Sie mich Ihnen zeigen, wie ich die Symbolüberschreibungen für jedes der verwendeten Symbole aktiviert habe.

Ich habe einfach ein Rechteck (24x24, das dem 8pt-Rastersystem entspricht) erstellt, das als Begrenzungsrahmen für meine Symbole dient, um die zukünftige Ausrichtung und visuelle Konsistenz zu verbessern.

Ich habe mein Farb- / Primärsymbol darüber gelegt und es auf die gleiche Größe angepasst (24x24) ...

Ich ging dann weiter und zog das relevante Icon hinein (ich benutzte dafür das immer zuverlässige IconJar) und veränderte die Größe und richtete es entsprechend aus. Es wurde in einem Ordner abgelegt, also habe ich die Formebenen aus diesem Ordner entfernt und den Ordner gelöscht (Sie können leider keine Masken mit Ordnern erstellen).

Dann entfernte ich die Symbole Fill aus dem Inspector Panel und wandelte sie in eine Maske um (Rechtsklick auf das Symbol und Auswahl von Maske), bis ich Folgendes hatte ...

Dann habe ich alle Elemente (Farbsymbol, Symbolform und Begrenzungsrahmenform) ausgewählt und in ein Symbol konvertiert.

Ich habe das Original gelöscht, bis ich das neue Symbol erhalten habe, und dann die Begrenzungsrahmenebene ausgewählt und mit den Größenänderungsbeschränkungen nach allen Seiten fixiert.

Nach dem gleichen Verfahren wie oben habe ich alle anderen Symbolsymbole erstellt. Oh, um die 150 geben oder nehmen! Ich habe sie in Rekordzeit erstellt (mit dem sarkastischsten Ton aller Zeiten). Jetzt hatte ich eine Vielzahl von Symbolsymbolen, die ich in andere Symbole einbinden konnte, wobei mir der zusätzliche Bonus der Farbkorrekturen zur Verfügung stand. Oh meine Skizze, du bist das alles!

Im dritten Teil dieser 5-teiligen Mini-Serie zeige ich Ihnen die Erstellung der Schaltflächenformen und -zustände sowie die verschiedenen Eingabezustände. Im fünften und letzten Teil zeige ich Ihnen, wie Sie diese kleinen Symbole zusammensetzen, um einige voll funktionsfähige Komponenten zu erstellen. Hurra!

Begleite mich zu Teil 3 (den du hier einsehen kannst)

Sie möchten kein Design-System selbst bauen? Sie können eine Kopie von Cabana hier abholen.

Verwenden Sie den Angebotscode MEDIUM25, um 25% Rabatt zu erhalten.

Vielen Dank für das Lesen des Artikels,

Marc

Designer, Autor, Vater und Liebhaber von Schokoladen-Digestiven