Veröffentlicht am 20. Februar 2018 von Robert Klank

Button Hack: Tutorial für responsive Schaltflächen in Sketch

Mobile first und responsives User Interface Design sind seit Jahren Pflichtbestandteile unserer Projekte. In der Gestaltung erfordert geräteübergreifendes Design flexible Elemente, die auf verschiedenen Bildschirmgrößen wiederverwendet werden können. Im Gegensatz zu dem, was Invision Studio seit längerem anteasert, lassen sich Sketch Symbole aber nur in Grenzen für responsives Layouts nutzen. Meist benötigt es zusätzliche Plugins wie Auto-Layout von Anima. Die machen aber oft bei Sketch-Updates Probleme, da sie seltener mit Updates versorgt werden.

Werden Buttons mit Label und Icon als Sketch Symbol erstellt, funktionieren diese mit etwas Arbeit auch in verschiedenen Größen. Sobald das Icon aber links vom Text platziert wird, verhalten sich Inhalte wider sämtlicher Logik. Wir bei UCDplus haben einen Hack entwickelt, mit dem ein solch responsiver Button umgesetzt werden kann.

1. Schritt: Responsiver Button mit Icon rechts

Um skalierbare Schaltflächen mit rechts orientierten Icon anzulegen, gibt es verschiedene Methoden. in diesem Tutorial haben wir uns für den längeren, aber nachhaltigeren Weg entschieden.

  1. Lege ein Rechteck mit 150×42 Pixel an und gestalte Farbe, Rahmen und Radien nach eigenem Wunsch.
    PRO TIPP: Den Hintergrund, wie in unserem Beispiel, als Nested Symbol anlegen. Dadurch lässt sich die Farbe später mit der Override Funktion austauschen. Dabei wird der angelegte Hintergrund als Maske genutzt und ein Farbsymbol wird in derselben Größe darüber gelegt. Mehr Infos in unserem Blogartikel.
  2. Benenne die Fläche in 🎨btnclr um und erstelle daraus das Symbol BUTTON/btn_icon_right. Auf der Symbolseite siehst Du nun folgende Inhalte:
  3. Erstelle auf der Inhaltsseite den Text BUTTON LABEL und benenne das Label ✏btntxt. Achte auf das Alignment Auto und Zentiert. Rechts daneben fügst Du jetzt ein Icon Deiner Wahl ein. Passe den Abstand zum Text auf 4 Pixel an und benenne das Icon 🌀btnicn:
    TIPP: Es empfiehlt sich ein Icon-Symbol aus einer Sammlung zu nutzen. Alle Icons mit Symbolflächen gleicher Größe lassen sich später per Override auszutauschen.
  4. Markiere das Textfeld und das Icon und erstelle ein Symbol mit dem Namen MOLEKULE/btn_icon_right.
  5. Öffne das Symbol durch Doppelklick. Es enthält nun Label und Icon. Vergrößere die Zeichenfläche des Symbols auf 136×24 Pixel.

  6. Richte Label und Icon mittig aus. Passe ggf. noch den Stil der Schrift an. Weise nun dem Label und dem Icon die folgenden Constraints zu:

  7. Anschließend wird das eben erzeugte Symbol MOLEKULE/btn_icon_right auf der Symbol-Seite eingefügt. Jetzt fehlt nur noch die richtige Einbindung.
  8. Platziere das Symbol mittig auf dem Button Symbol BUTTON/btn_icon_right (je 9 Pixel Platz nach oben/unten und 7 Pixel nach rechts/links). Bei den Constraints aktivierst Du alle Richtungen.
  9. Jetzt kann die Magie starten. Mit dem Button-Symbol lassen sich verschiedene Zustände umsetzen:

2. Schritt: Endlich, der Button mit Icon links

Jetzt ist etwas Bastelarbeit gefragt – aber zum Glück haben wir gut vorgearbeitet. im Folgenden werden die eben erstellten Symbole des Buttons kopiert und für ein links ausgerichtetes Icon umgewandelt.

  1. Kopiere die beiden Symbole und benenne diese mit BUTTON/btn_icon_left bzw. MOLEKULE/btn_icon_left. Stelle anschließend Transform beim Icon, dem Label und der Instanz der beiden auf -180º Rotation:

    Moment. Drehung auf Kopf? Ja richtig gelesen. An dieser Stelle müssen wir Sketch austricksen, um zum Ergebnis zu kommen. Durch das erneute umdrehen der Instanz um 180° ist ja dann alles wieder korrekt gedreht.
  2. Aktuell verweist die Instanz noch auf unser Label-Symbol mit dem Icon auf der rechten Seite. Daher ersetzen wir es mit der „Replace With“ Funktion mit unserer zuvor erstellten Kopie MOLEKULE/btn_icon_left:
  3. Und fertig ist der flexible Button.

Grenzen des Tricks

Wir haben das Netz nach vielen Lösungen durchforstet und alle getestet. Doch keine der angebotenen Tricks bot die Freiheit, die ein responsives Design erfordert. Einige Einschränkungen mussten wir jedoch auch bei unserem Button-Hack feststellen:

  • Seit der letzten Sketch Version sind Inhalte besonders bei breiten oder schmalen Buttons nicht perfekt zentriert. Daher müssen einige Pixelmaße ggf. manuell korrigiert werden
  • Beim Export für Zeplin werden die Maße von Icon und Label durch den umgedrehten Button etwas anders dargestellt. Mit der eigentlich Darstellung des Buttons gibt es aber keine Probleme.

Weitere Möglichkeiten

Der Trick ist natürlich nicht auf Buttons beschränkt. Es gibt zahlreiche Elemente, für die das responsive Verhalten prädestiniert sind. Bis Sketch das Arbeiten auf verschiedenen Displaygrößen weiterentwickelt, bleiben Hacks wie der unsrige somit ein Muss. Zudem lassen sich die Symbole auch gut mit Libraries kollaborativ nutzen. Einmal erstellt, können so diese flexibel in verschiedenen Projekten eingesetzt werden und viel Bearbeitungszeit sparen.


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/