Veröffentlicht am 13. Februar 2018 von Robert Klank

Mit verschachtelten Symbolen zum Sketch Experten

Nested Symbols bieten die Möglichkeit Symbole innerhalb eines anderen Symbols zu integrieren. Auf einem Artboard als Instanz eingesetzt, werden die Attribute des verschachtelten Symbols vererbt und können weitergenutzt werden. Dies macht Symbole vielseitig einsetzbar und schafft klar definierte UI-Elemente. Unsere Schritt für Schritt Anleitung zeigt das Einrichten und die Funktionsweise der Funktion anhand eines flexiblen Elements:

Das Farbsymbol erstellen

  1. Erstelle für benötigte Farben gleich große Artboards auf der Symbol-Seite. Benenne diese entsprechend einer einheitlichen Schreibregel (z.B. COLOR/your_color).
  2. Lege auf den jeweiligen Artboards rechteckige Layer in der Wunschfarbe an. Für einen erfolgreichen Export in Zeplin empfiehlt sich auch eine Benennung des Layers entsprechend der Namenskonventionen (z.B. your_color).
  3. Nun können Farben als Symbol ausgewählt und in ihren Artboards, bzw. in einem weiteren Symbol eingefügt werden.

Nested Icon-Symbol erstellen

Im folgenden beschreiben wir die Erstellung eines anpassbaren Icon Symbols. Die Farbe der Icons wird als Symbol-Instanz eingebunden, um dieses mit der Override Funktion on the fly zu ändern.

  1. Erstelle ein Artboard auf der Symbolseite mit dem Namen „ICON/your_icon_name“ und füge dort das Icon-Shape ein.

  2. Mache einen Rechtsklick auf das Icon-Shape und wähle Mask aus.

  3. Wähle anschließend ein Color-Symbol aus den Symbolen aus und setze es über den Shape-Layer auf ein Icon-Artboard. Durch die Maske wird die Farbe nur auf das Icon angewendet.


  4. Wichtig für die spätere Bedienung der Overrides in verschachtelten Symbolen ist nun noch die korrekte Benennung des Farb-Layers entsprechend der Namenskonventionen (🎨icnclr). 
  5. Nun kann die Farbe des Icon-Symbols per Override ausgewählt werden, um sie bspw. in einem weiteren Symbol zu verschachteln.

Nested Symbol im Nested Symbol im Nested Symbol

Im Folgenden zeigen wir die Erstellung eines Eingabefeldes. Als verschachteltes Symbol kann dies variable Zustände darstellen. Durch die Einhaltung der Namenskonventionen erhalten wir in den Overrides nachvollziehbare Symbolattribute.

  1. Erstelle auf der Symbolseite ein Artboard in der gewünschten Größe des Eingabefeldes und füge eine Instanz eines zuvor erstellten Farbsymbols ein.
  2. Skaliere die Instanz des Symbols auf die Größe des Artboards und benenne diese entsprechend der Namenskonventionen (z.B. 🎨clr_outside).

  3. Legen ein Rectangle-Layer mit runden Ecken (hier 3 Pixel) an. Ziehe den Layer auf die volle Größe der Farbsymbol-Instanz und benenne ihn mit MASK.

  4. Ziehe den MASK-Layer unter die Farbsymbol-Instanz (🎨clr_outside) und maskiere damit die Instanz.

  5. Die runden Ecken des MASK-Layers wurden auf die Farbsymbol-Instanz angewendet. Nun werden beide Layer gruppiert und die Gruppe benannt. Um auch im geschlossenen Zustand den Inhalt nachzuvollziehen, bietet sich eine Benennung entsprechend der beinhalteten Symbol-Instanz an.

  6. Füge eine weitere Farbsymbol-Instanz (hier im Beispiel Color/white) hinzu und nenne diese 🎨clr_inside. Skaliere die Größe so, dass an allen Seiten ein gleich großer Rand (z.B. 1 Pixel) entsteht. Die Farbe der dahinterliegenden Gruppe sollte nun an allen Seiten geichmäßig sichtbar sein.

  7. Lege einen weiteren Rectangle-Layer an, der die gleiche Größe und Position wie die Farbsymbol-Instanz aus dem letzten Schritt hat. Benenne ihn mit MASK und gebe ihm ebenfalls runde Ecken (hier 2,5 Pixel). Positioniere den Layer unterhalb der Farbsymbol-Instanz aus dem letzten Schritt. Nun kannst Du die weiße Farbsymbol-Instanz (🎨clr_inside) maskieren.

  8. Nun werden beide Layer miteinander gruppiert und entsprechend der beinhalteten Symbol-Instanz benannt.
    TIPP: Für ein responsives Verhalten des Inputfeldes sollten der Gruppe die Constraints zugewiesen werden, welche rechts in der Abbildung unter Resizing abgebildet sind. Dadurch skaliert die clr-inside-Gruppe mit einem Abstand von je 1 px an allen Seiten mit.

  9. Füge jetzt einen Textlayer hinzu und benenne ihn den Namenskonventionen entsprechend mit btntxt.
    Auch für das Label des Inputfeldes kann über die Constraints ein responsives Verhalten erzeugt werden.

  10. Als nächstes wird ein Icon als Symbol-Instanz festgelegt, an der gewünschten Stelle eingefügt und in 🌀btnicon umbenannt.

    Auch die Icon-Symbol-Instanz verhält sich über die Constraints in der Abbildung auf Wunsch responsive.

  11. Fertig 💪
    Alle Overrides sind nachvollziehbar benannt und können im Inspector bearbeitet werden. Nun kannst Du die vollen Möglichkeiten des Nested Symbols nutzen und Deinem Element individuelle Zustände zuweisen:

Keine Zeit zum Basteln?
Hier gibt es unser Sketch Beispiel zum Download

 

Unsere Sketch-Reihe:

1. Teil: Effizienter Arbeiten mit Sketch – Emojis haben doch einen Sinn
2. Teil: Kollaboratives Arbeiten mit Sketch – Libraries optimal nutzen
3. Teil: Mit verschachtelten Symbolen zum Sketch Experten
4. Teil: Button Hack: Responsive Schaltflächen in Sketch
5. Teil: Plug-Ins: 2018er Edition

Schon etwas älter, unser Artikel zu Sketch-Plug-Ins 2016: http://www.interaction-design.de/2016/02/23/sketch-plugins/