Veröffentlicht am 26. März 2018 von Robert Klank

Top 7 Sketch-Plugins für 2018

Eine der besonderen Stärken von Sketch ist seine Erweiterbarkeit mit Plugins, die nützliche Zusatzfunktionen anbieten, die das Programm „ab Werk“ nicht mitbringt. In diesem Bereich tut sich weiterhin sehr viel und wir entdecken neben bewährten Plugins, die wir seit Jahren nutzen, immer wieder neue Erweiterungen. Hier unsere sieben neuesten Funde:

Unsere neuen Lieblinge

#1 Paddy

– Von DWilliams

Lange wünschten sich Designer in Sketch eine Option, um Buttons automatisch aufgrund der Textlänge des Buttontextes zu skalieren. Was bisher nur durch händisches Skalieren möglich war, erledigt nun das Plugin Paddy wie von Zauberhand.

Im einfachsten Falle steht der Buttontext über einem Rectangle-Layer. Beide Layer werden nun gruppiert und anschließend über das Pluginmenü „Paddy/Padding for Selection“ ausgewählt. Standardmäßig ist hier nun ein Padding von „10 20“ eingestellt. Wer sich etwas mit CSS auskennt, dem kommt diese Einstellung bereits bekannt vor: 10 steht für ein Padding von 10px über und unter dem Textlayer. 20 gibt das Padding links und rechts neben dem Textlayer vor. Will man das Padding für alle vier Seiten einzeln justieren, tippt man einfach vier Werte nacheinander ein. Dadurch werden die Abstände im Uhrzeigersinn um den Textlayer vorgegeben, beginnend über dem Textlayer.

Der Clou ist, dass das Ganze auch mit Icons funktioniert sowie mit Symbols bzw. nested Symbols. Hierbei ist allerdings zu beachten dass die Constraints für das Icon so definiert werden, dass es an der gewünschten Stelle stehen bleibt, sowie bei der Skalierung des Buttons das Icon in der Breite und Höhe fixiert ist.

Das Plugin Paddy bietet noch einige weitere Features für das Spacing und Alignment von Layers, die auf der GitHub-Seite, auf der das Plugin auch heruntergeladen werden kann, erläutert werden:
https://github.com/DWilliames/paddy-sketch-plugin

Für uns ist das beschriebene automatische Skalieren von Buttons aber ganz klar das beste Feature.

 

#2 Symbol Instance Locator

– von Jason Burns (sonburn)

Symbole aufzubauen und deren Instanzen zu verwenden ist in Sketch eine praktische Sache. Was aber passiert, wenn man seine Symbols-Page aufräumen und vermeintlich ungenutzte Symbole löschen will? Hin und wieder erscheint dann diese Warnung:

Wenn diese Meldung erscheint, wird eine Instanz des zu löschenden Symbols offenbar noch auf einem Artboard verwendet. Klickt man hier trotz der Warnung auf Delete, wird das Symbol gelöscht und die verwendete Instanz vom Symbol abgelöst. Das will man als ordnungsliebender Designer natürlich vermeiden. Anstatt die Instanz(en) des Symbols durch langwierige Suche ausfindig zu mache, benutzen wir bei UCDplus das Plugin „Symbol Instance Locator“.

Dabei ist das Vorgehen sehr einfach. Man wählt einfach das zu löschende Symbol-Artboard aus, um dann anschließend über den Plugins-Dialog das Plugin auszuwählen. Nun erscheint ein Fenster, dass alle Instanzen des ausgewählten Symbols anzeigt. Durch Auswahl in der Liste springt das Plugin auf das entsprechende Artboard, auf dem sich die Instanz befindet, und das Symbol kann entfernt oder einem anderen Symbol zugewiesen werden. Einfach und unkompliziert Nerven und Zeit gespart.

Das Plugin kann hier heruntergeladen werden:
https://github.com/sonburn/symbol-instance-locator

 

#3 Clipboard Fill

– von Scott Savarie

Bilder müssen in das Interface und es muss mal wieder schnell gehen? Wir nutzen für erste Entwürfe das Sketch-Plugin Clipboard Fill, um Bilder aus der Zwischenablage passend in eine Shape einzufügen. Das folgende GIF erklärt eigentlich alles.

Bitte achtet aber bei der Verwendung auf die Einhaltung der Copyrights – im Zweifelsfall sind gemeinfreie Fotos die sicherste Wahl.

Das Plugin kann hier heruntergeladen werden:
https://github.com/ScottSavarie/Clipboard-Fill

PS: Für Profilfotos bietet sich auch das Plugin tinyfac.es an, die Fotos aus einer crowdsourcing Avatar Gallery einbindet.

 

#4 Rename It

– von Rodrigo Soares (rodi01)

Ordnung ist das halbe Leben. Manche Designer leben in der anderen Hälfte. Um auch bei umfangreichen Projekten den Überblick zu behalten, ist es essentiell, Layer ordentlich und nachvollziehbar zu benennen. Dies kann jedoch auch schnell in Arbeit ausarten. Um diese Arbeitslast zu verringern und Layer im Stapel umzubenennen, verwenden wir das kleine aber feine Plugin Rename It. Das folgende GIF zeigt die Funktionsweise.

Das Plugin Rename It ist auch für nachträgliches Aufräumen unerlässlich und bietet noch weitere schlaue Feinheiten. Auf der Download-Seite werden diese näher erläutert werden:
https://github.com/rodi01/RenameIt

 

#5 Find and Replace

– von Thierry Charbonnel (thierryc)

Suchen und ersetzen bringt Sketch „ab Werk“ nicht mit. Dies ist jedoch eine Funktion, die wir bei Änderungen oft benötigen und mit diesem feinen Plugin abdecken. Find and Replace findet Text in ausgewählten Layers und allen darin enthaltenen Komponenten. Dieser kann dann ersetzt werden durch anderen Text. Teil-, Groß- und Kleinschreibung sowie Volltextabgleich werden dabei unterstützt.

Das Plugin kann hier heruntergeladen werden:
https://github.com/thierryc/Sketch-Find-And-Replace

 

#6 Nudge Resize

– von David Williames (DWilliames)

In Sketch lässt sich die Größe eines Layers um einen festen Wert ändern, indem man ‚CMD + Pfeiltaste‘ oder ‚CMD + SHIFT + Pfeiltaste‘ verwendet. Diese Skalierung wirkt sich jedoch nur von der oberen linken Kante des Layers aus. Wenn man ein Layer zentriert skalieren will, ist es eine ziemliche Frickelei, zu skalieren und anschließend das Layer wieder in zentrierter Position auszurichten. Dieses Plugin ist für Tastaturkürzel-Junkies eine echte Zeitersparnis und erleichtert zentrierte Skalierung.

   

Das Plugin kann hier heruntergeladen werden:
https://github.com/DWilliames/nudge-resize-sketch-plugin

 

#7 Move to library

– von Ahmed Abdelmageed

Wie in einem vorherigen Artikel beschrieben, bieten Sketch Libraries eine tolle Möglichkeit, kollaborativ zu arbeiten oder Designvorgaben projektübergreifend zu nutzen. Wenn sich nachträglich für eine Library entschieden wird und bereits Elemente in der Datei bestehen, welche eigentlich in eine Bibliothek gehören, müsste nun ein manuelles kopieren jedes Symbols stattfinden. Das Plugin „Move to library“  übergibt Symbole aus der aktuellen Datei an eine Library und ersetzt Symbole auf den Seiten gegen Verknüpfungen mit der Bibliothek.

Das Plugin kann hier heruntergeladen werden:
https://github.com/ahmedmigo/Move-to-library-sketchplugin

 

 

Habt Ihr noch weitere, heiße Sketch-Plugins?

Wir wollen die Liste kontinuierlich erweitern und sind natürlich selbst immer auf der Jagd nach sinnvollen Zeitsparern. Wenn ihr also Plugins habt, ohne die Ihr nicht mehr leben könnt, schreibt uns einen Kommentar↓

Oder wir lesen uns einfach auf twitter @ucdplus ✌

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/