Veröffentlicht am 23. Februar 2016 von David Paschke

Sketch Plugins

Seit Ende 2015 sind wir komplett auf Sketch als Hauptwerkzeug für das Interface Design umgestiegen. Sketch ist genau für diesen Zweck entwickelt worden und kommt vektorbasiert, schlank und durch Plugins erweiterbar daher. Schaut man sich die Design Tools Umfrage von Khoi Vinh an, wird schnell deutlich, dass Sketch es innerhalb weniger Jahre zum Platzhirsch in diesem Bereich gebracht hat. Die Daten sind zwar in den USA erhoben, eine ähnliche Verteilung dürfte sich aber auch in naher Zukunft hierzulande ergeben.

Das Grundpaket lässt kaum Wünsche offen, schließlich sind Seiten, Artboards, Raster, ausgefeilte Pfadoperationen etc. direkt an Bord. Für speziellere Wünsche und Anwendungsfälle lässt sich Sketch allerdings durch Plugins im Funktionsumfang erweitern und wird dadurch noch mehr zum Wolf im Schafspelz.

 

Wo findet man Plugins?

Sketch-Plugins können von jedem entwickelt und zur Verfügung gestellt werden. Auf der Sketch-Produktseite findet man eine gute Übersicht populärer Erweiterungen und aller Plugins. Es gibt noch unzählige Portale, wie Awesome Sketch Plugins und Sketch App Sources. Eine weitere gute Quelle für Plug-Ins und Tutorials in deutscher Sprache ist Sketch Wiki.

Die schnellste Variante ist aber immer noch google zu bemühen – brauchten wir eine spezielle Funktionalität, haben wir immer etwas passendes gefunden.

 

Installation von Plugins

Die Erweiterungen liegen in einem eigenen .sketchplugin-Dateiformat zum Download vor oder bei komplexeren Programmerweiterungen als Installer. Ein Doppelklick auf eine .sketchplugin-Datei installiert die Erweiterung – anschließend taucht sie im Einstellungsfenster von Sketch auf.

Sketch Einstellungen - Plugins

Eine gute Alternative, um die Installation und Verwaltung von Plugins noch zu vereinfachen ist das kleine Hilfsprogramm Sketch Toolbox. Damit werden .sketchplugins, die üblicherweise von den Entwicklern über ihre GitHub-Repositories zur Verfügung gestellt werden, auch automatisch aktualisiert, wenn es eine neue Version gibt. Auch die Suche innerhalb der registrierten Plugins ist wunderbar.

Sketch Toolbox

 

 

Unsere bisherigen Lieblinge

Sketch Palettes

– von Andrew Fiorillo

Oft genug kommt es vor, dass mehrere Designer an einem Projekt in unterschiedlichen Dateien arbeiten. Die vorgegebene oder vorher definierte Farbwelt ist natürlich die gleiche. Für den Austausch von Farbdefinitionen empfehlen wir deshalb Sketch Palettes.

Was in der Welt von Photoshop, Illustrator, InDesign etc. über .ase-Dateien gemacht wird, kann hier über das eigene Dateiformat .sketchpalette gemacht werden. Es lassen sich sowohl die globalen Farben, als auch Dokumentfarben speichern und laden.

Sketch Palettes

➠ Das Plugin kann unter github.com/andrewfiorillo/sketch-palettes herunterladen geladen werden oder Ihr sucht einfach nach „palettes“ in Sketch Toolbox.

💧Fluid

– von Matt und Cat Noone

Entwirft man Apps oder Websites, kommt man schnell an den Punkt, an dem man eine Ansicht in 2, 3 oder noch mehr Größen darstellen muss. Sketch macht es zwar einfach, mal eben ein Artboard zu duplizieren und die Elemente in eine andere Screengröße zu bringen – „mal eben“ kann dann aber auch gern viel Zeit verschlingen.

Hier kommt Fluid ins Spiel: Damit ist es möglich, anhand von Bedingungen zu definieren, wie sich ein Element verhalten soll, wenn sich die Screengröße (simuliert durch die Größe eines Artboards) verändert. Das kann im einfachsten Fall eine Bedingung sein, dass das Element immer horizontal zentriert wird, egal wie groß das Artboard ist. Oder – und hier wird es interessant – dass eine Fläche immer die volle Breite des Screens einnimmt, aber einen definierten Rand nach außen hat. Hiermit lässt sich innerhalb von Sketch eben wirklich „mal schnell“ simulieren, wie sich ein Layout flüssig über verschiedene Devicegrößen verhält.

Fluid Demo

➠ Das Plugin kann unter github.com/matt-curtis/Fluid-for-Sketch heruntergeladen werden oder Ihr sucht einfach nach „fluid“ in Sketch Toolbox.

➠ Probiert unbedingt auch die Constraints-Demo aus!

Craft

– von Invision Labs

Craft ist die neueste und gleichzeitig mächtigste Erweiterung aus unserer Lieblingsliste. Damit ist es möglich, in Entwürfen mit echten Daten (Bilder und Texte) zu arbeiten.

Hat man z.B. ein Raster aus 2×5 Rechtecken angelegt, kann man diese ganz einfach mit echten Fotos aus verschiedenen Quellen füllen lassen.

Craft Demo - Fotos

Selbiges gilt für Textfelder – hat man eine Liste mit einzelnen Zeilen für z.B. Namen und Wohnort, kann man diese automatisch mit abwechslungsreichen Fake-Daten füllen lassen. Nicht jeder heißt nämlich „Max Mustermann“ 😉 .

Craft Demo – Texte
Allein diese beiden Funktionen machen Mockups realistischer und sind unheimlich zeitsparend. Craft bietet weitere Funktionen, wie z.B. das Duplizieren und Verteilen von Elementen in bestimmten Richtungen und Abständen – hier gibt es einen guten Überblick zum Funktionsumfang und der Benutzung.

Die bisherigen Funktionen erinnern stark an einige Features, die Adobe gerade für Project Comet entwickelt – wir sind gespannt, wie Craft in Zukunft erweitert wird.

➠ Craft kann hier heruntergeladen werden www.invisionapp.com/craft und muss anschließend installiert werden.

 

Welche Plugins benutzt Ihr in Sketch?

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 ✌🏻