Verwendung von Symbolen in Sketch

Symbole in Sketch sind spezielle Elemente, die Sie im gesamten Dokument, über Seiten und Zeichenflächen hinweg immer wieder verwenden können. Es handelt sich im Grunde genommen um eine magische Ebenengruppe, die in der Ebenenliste durch einen lila Ordner (anstelle des üblichen blauen Ordners) gekennzeichnet ist.

Die Symbole um Ihr Dokument bleiben automatisch synchron. Wenn Sie also eines ändern, fallen alle anderen sofort in eine Linie. Es ist ein perfektes Tool für das Prototyping von Apps und Ansichten, wenn Elemente wie ein Social Stream, ein Posteingang oder eine Trackliste immer wieder wiederholt werden.



Wofür wird Adobe After Effects CS6 verwendet?

Aus Entwicklersicht sind wiederverwendbare Module nichts Neues. Wenn Sie etwas codieren, sagen Best Practices (und gesunder Menschenverstand), dass Ihr Code flexibel und wiederverwendbar sein sollte. Dies spart nicht nur Zeit bei der Entwicklung, wenn Sie etwas wiederverwenden können, sondern sorgt auch für eine konsistentere Erstellung.

Die Verwendung von Symbolen beim Entwerfen spart Zeit und hilft Ihnen, schneller und realistischer zum Gesamtbild zu gelangen, als Sie es bisher für möglich gehalten haben.

Welcher Teil meines Designs sollte ein Symbol sein?

Der schwierige Teil besteht darin, zu entscheiden, welche Teile Ihres Layouts in ein Symbol umgewandelt werden sollen. Der Schlüssel liegt darin, nach Stücken zu suchen, die sich immer wieder wiederholen und nicht in jedem Fall zu unterschiedlich sind. Zum Glück gibt Ihnen Sketch die Möglichkeit, bestimmte Dinge innerhalb eines einzigen Symbols anzupassen:

  • Textinhalt
  • Opazität
  • Schatten
  • Mischmodus

Wenn Sie etwas anderes von Instanz zu Instanz ändern müssen, ist ein Symbol möglicherweise nicht die richtige Wahl (oder Sie benötigen möglicherweise ein Symbol plus einige andere Gruppen, was in Ordnung und gut wäre). Eine wichtige Sache, die Sie innerhalb einer einzelnen Symbolinstanz nicht ändern können, ist ein Bild. Machen Sie daher spezielle Pläne, wenn Sie Dinge wie Fotogalerien und Medienobjekte anlegen.

Das Denken wie ein Entwickler ist eine gute Möglichkeit, um zu entscheiden, was ein Symbol sein soll. Suchen Sie nach sich wiederholenden Stilen und Positionen, für die Sie ein Dienstprogramm-CSS schreiben würden. Dinge wie:

  • Menüs (und Menüpunkte)
  • Listen von Nachrichten
  • Widgets
  • Kopf-und Fußzeilen
  • Karten

Symbole sind der Schlüssel, um intelligenter und schneller zu arbeiten. Das Ändern der Hintergrundfarbe des Headers auf 56 Seiten sollte nicht 56 ​​Klicks dauern. Sobald Sie anfangen, werden Sie nie mehr zurückblicken.

Erstellen eines Symbols in Sketch

Das Erstellen eines Symbols ist einfach. Sie können sie aus vorhandenen Ebenengruppen oder losen Ebenen erstellen. Wenn Sie mehrere lose Ebenen auswählen, gruppiert Sketch diese beim Erstellen des Symbols für Sie.

Klicken Sie bei ausgewählten Elementen auf das Symbol Symbol erstellen in der Symbolleiste oder wählen Sie im Menü Ebene> Symbol erstellen. Wenn Sie eine Gruppe ausgewählt haben, können Sie auch mit der rechten Maustaste in die Ebenenliste klicken und Symbol erstellen auswählen.

Links: Zwei Ebenen ausgewählt, Elemente, aus denen eine Schaltfläche besteht. Rechts: Elemente, die in ein Symbol mit dem Namen button umgewandelt wurden

Links: Zwei Ebenen ausgewählt, Elemente, aus denen eine Schaltfläche besteht. Rechts: Elemente, die in ein Symbol mit dem Namen button umgewandelt wurden

Um das soeben erstellte Symbol oder ein beliebiges Symbol im Dokument zu verwenden, wählen Sie in der Symbolleiste Einfügen> Symbol. Denken Sie daran: Alle Änderungen, die Sie an Ihrem neuen Symbol vornehmen, werden sofort in den anderen Instanzen übernommen. Mit großer Macht kommt große Verantwortung.

Symbole in Sketch organisieren

Sobald Sie eine Reihe von Symbolen im Spiel haben, erfordert die effiziente Verwendung ein wenig Organisation. Wählen Sie Einfügen> Symbol> Symbole verwalten, um eine vollständige Liste aller im Dokument enthaltenen Symbole anzuzeigen. Sie können in dieser Ansicht auch Symbole umbenennen und löschen.

Erstellen von Symbolgruppen in Sketch

Sie können auch verschachtelte Symbolgruppen erstellen, um selbst die größte Designbibliothek zu organisieren. Wenn Sie dem Symbolnamen einen Schrägstrich hinzufügen, z. B. Schaltflächen / Senden, erhalten Sie ein Symbol mit dem Namen Senden, das in einem Ordner mit dem Namen Schaltflächen enthalten ist.

Wenn Sie ein Symbol einfügen, bieten die Ordner eine Drilldown-Organisation, sodass Sie leicht genau das finden, was Sie sind

Beim Einfügen eines Symbols bieten die Ordner eine Drilldown-Organisation, sodass Sie leicht genau das finden, wonach Sie suchen (manchmal enthalten meine Dateien Hunderte von Symbolen).

Es gibt viele Möglichkeiten, Ihre Symbole zu organisieren (genau wie Code!), Aber ich verwende sie normalerweise auf die folgenden drei Arten:

  • Kategorie : Teilen Sie meine Symbole nach Kontext auf, wie alle Formularelemente in einem Ordner, alle Galerieelemente in einem anderen
  • Auflösung : Teilen Sie meine Symbole nach Haltepunkt auf, mit Symbolen in Ordnern nach Bildschirmgröße des Geräts
  • Versionierung : Wenn ich ein neues Symbol mit einem völlig anderen Stil erstelle, lege ich es manchmal in einen Test- oder Versuchsordner, um meine Produktionssymbole sauber zu halten

Symbole in der Skizze tauschen

Kubo und die beiden Saitenmodelle

Sketch bietet auch eine einfache Möglichkeit, ein Symbol gegen ein anderes auszutauschen. Dies ist ideal, um Symbole auszutauschen, die einander ähnlich sind (z. B. das Austauschen eines festen Headers gegen einen modifizierten transparenten).

Links: ein vorhandenes Symbol, rechts: Auswählen eines neuen Symbols, in diesem Fall ein Bildplatzhalter gegen einen Videoplatzhalter austauschen

Links: ein vorhandenes Symbol, rechts: Auswählen eines neuen Symbols, in diesem Fall ein Bildplatzhalter gegen einen Videoplatzhalter austauschen

Suchen Sie bei ausgewähltem Zielsymbol die Dropdown-Liste für Symbole im Inspektor (das Bedienfeld auf der rechten Seite des Bildschirms).

Optimieren einzelner Symbole in Sketch

Während fast alles an einem Symbol in Ihrem Dokument synchron gehalten wird, gibt es eine Handvoll Werte, die Sie auf Instanzebene ändern können, was bedeutet, dass sie keine Auswirkungen auf andere Kopien desselben Symbols haben.

Ändern des Textinhalts in Skizzensymbolen

Ein Schlüssel zur Erstellung eines realistischen Prototyps ist die Verwendung von echtem (oder echt aussehendem) Inhalt auf allen Ihren Bildschirmen. Ein Posteingang voller bla bla bla sdsahs sieht viel weniger überzeugend aus als Beispiel-E-Mails von einem glaubwürdigen Mann namens Steve.

Um Änderungen innerhalb einer einzelnen Instanz eines Symbols vorzunehmen, wählen Sie die Zieltextebene aus und aktivieren Sie im Inspektor die Option Textwert vom Symbol ausschließen. Jetzt bleiben alle Änderungen, die Sie an dieser Textebene vornehmen, lokal für diese Instanz des Symbols.

Wenn die Option Textwert ausschließen aktiviert ist, können Sie nützliche Funktionen wie das Ändern jeder Beschriftung oder den Wert einer Schaltfläche von Seite zu Seite ändern

Wenn die Option Textwert ausschließen aktiviert ist, können Sie nützliche Funktionen wie das Ändern jeder Beschriftung oder den Wert einer Schaltfläche von Seite zu Seite ändern

Das Füllen eines Modells mit echtem Inhalt trägt wesentlich dazu bei, die Projektgenehmigung zu erhalten (sorry, lorem ipsum!), Daher nehme ich mir immer die Zeit, die Textwerte von Symbol zu Symbol zu variieren.

Ändern der Stile von Skizzensymbolen

Mit Sketch können Sie einige Schlüsselstile unabhängig voneinander steuern. Dies ist hilfreich, wenn Sie verschiedene Status erstellen (Status, Aktiv / Inaktiv, Hover usw.). Änderungen an den folgenden Elementen wirken sich nur auf die jeweilige Instanz aus, nicht auf alle Symbole:

  • Opazität : Ändern Sie die Gesamtopazität für das Symbol und den gesamten Inhalt
  • Schatten : Fügen Sie dem gesamten Symbol einen Schatten (oder Schatten) hinzu
  • Mischmodus : Ändern Sie den Mischmodus (Überlagerung, Bildschirm usw.) des Symbols

Dies ist eine ziemlich neue Änderung in Sketch 3.3, aber ich finde sie bereits hilfreich, um die schiere Anzahl von Symbolen zu reduzieren, die ich zu einem bestimmten Zeitpunkt arbeiten habe. Manchmal benötigt ein inaktives oder abgeschlossenes Objekt nur einen einfachen Deckkraftabfall, kein vollständig separates Symbol.

Ein Symbol von Grund auf neu erstellen

Unser Beispielprojekt ist eine redaktionelle Website namens Words. Wir möchten, dass die Website ein Bild, eine Gruppe von Bildern, Videos und mehr jederzeit gut anzeigen kann, wenn ein Autor sie benötigt.

In unserem Skizzendokument sind dies alles Symbole. Zu Beginn werden wir eine Mosaikgalerie erstellen, die viele Posts und Layouts benötigen und die wir definitiv nicht immer wieder erstellen möchten.

Ich wähle die Mosaikgalerie aus, weil sie mit Ebenenmasken ordentlich behandelt wird, was definitiv Zeit spart, wenn Sie mit zufälligen Bildern aus dem Internet arbeiten.

01. Zeichnen Sie das Gitter

Zeichnen Sie mit dem Rechteck-Werkzeug (Einfügen> Form> Rechteck) das Raster, in dem sich Ihre Bilder befinden sollen. Beachten Sie, dass wir mit Rechtecken planen, nicht mit tatsächlichen Bildgrößen. Wenn Sie wirklich spezifisch werden möchten - und ich auch -, können Sie die Größe mit The Inspector pixelgenau anpassen.

02. Formen hinzufügen

Fügen Sie bei vorhandenem Raster jede Form einer eigenen Gruppe hinzu (wählen Sie die Form aus und drücken Sie Cmd + G. ). Klicken Sie innerhalb jeder Gruppe mit der rechten Maustaste auf die Form und wählen Sie Als Maske verwenden. Jedes Rechteck kann jetzt ein einzelnes Bild aus Ihrer Galerie enthalten.

03. Bilder einfügen

Fügen Sie ein Bild in jede Gruppe ein und achten Sie darauf, dass es über der Maskenebene liegt. Masken funktionieren, indem sie alle Elemente enthalten, die über sich selbst in derselben Gruppe sitzen (weshalb ich Sie zuerst alles gruppieren ließ). Durch die Verwendung von Formen als Masken wird der große Ärger vermieden, jedes zufällige Bild spezifisch anpassen zu müssen, da bereits ein Raster bereitsteht und wartet.

04. In Symbole konvertieren

Wählen Sie alles aus, was Sie gerade erstellt haben, und konvertieren Sie es in ein Symbol, indem Sie entweder auf das Symbol Symbol erstellen in der Symbolleiste klicken oder im Menü Ebene> Symbol erstellen auswählen. Ihr neues Symbol kann jetzt in Ihr Dokument eingefügt werden (oben habe ich verschachtelte Ordner verwendet, um alles zu organisieren).

Ich bin mir nicht sicher, wie ich das sonst sagen soll: Ein Sketch-Dokument mit einer Bibliothek voller vorgefertigter Symbole zu haben, ist eine absolute Freude. Es ist wie ein Drag-and-Drop-Aufkleber, der mit Ihrem eigenen High-Fidelity-Design gefüllt ist.

Lego Harry Potter und der Gefangene von Azkaban

Wörter : Clark Wimberley

Möchten Sie mehr über das Entwerfen mit Sketch erfahren? Holen Sie sich Clark Wimberlys 10-teiligen InVision-Kurs Design Workflow with Sketch direkt in Ihren Posteingang. Behalten Sie den InVision-Blog im Auge einer der Ersten zu sein, der weiß, wann Sie sich anmelden können.

Mochte dies? Lese das!