12 unentbehrliche kostenlose Sketch Plugins
Wenn Sketch 44 die Betaversion verlässt, werfen wir einen Blick auf eine der besten Funktionen von Sketch: die riesige Auswahl an Open-Source-Plugins.
Die Sketch-Community unterstützt Sie sehr und Sie können jede Menge toller Plugins finden, die Ihren Arbeitsablauf radikal verbessern. In diesem Beitrag werde ich die 12 besten Sketch-Plugins behandeln, die jeder Designer haben sollte.
1. Skizzenmaß
Skizzenmaß hilft Designern dabei, ihre Arbeit für Entwickler, Projektmanager und andere Teammitglieder zu organisieren und zu beschreiben.
Aber das ist auch sehr nützlich für einsame Wölfe, die all ihre Projekte entwerfen und programmieren. Mit dem Measure-Plugin können Sie Elemente mit spezifischen Breiten- / Höhenmaßen skizzieren, um auf einen Blick die richtigen Maße zu erhalten.
Dies umfasst alle Seitenelemente wie Schaltflächen, Text, Symbole und sogar große Teile der Zeichenfläche.
Mit Sketch Measure können Sie Seiten sogar in HTML / CSS mit Seitenstilen direkt exportieren. Zugegeben, es gibt Adobe-Werkzeuge das kann das auch. Aber all diese Funktionen in Sketch zu haben macht Ihre Arbeit viel einfacher.
2. InVision Handwerk
Vor einiger Zeit kündigte das InVision Team ein neues Plugin an Kunst . Aber das ist mehr wie eine Suite von Plugins, wo Sie Tonnen von zusätzlichen Funktionen und Verknüpfungen erhalten.
Ein Beispiel ist die Datenplugin Damit können Entwickler Text / Daten direkt aus öffentlichen APIs im Web abrufen. Auf diese Weise können Sie Ihre App automatisch mit echten Inhalten und Bildern im laufenden Betrieb füllen.
InVision-Entwickler aktualisieren Craft ständig mit neuen Plugin-Funktionen, um dies für Designer noch wertvoller zu machen. Und habe ich erwähnt, dass das völlig kostenlos ist?
Bis jetzt hat Craft 6 wichtige Plugin-Funktionen, die es wert sind, in Ihren Design-Workflow aufgenommen zu werden.
- Freihändig - Echtzeit-Zusammenarbeit in Sketch
- Prototyp - Dynamisches High-Fidelity-Prototyping
- Synchronisieren - sofortige Synchronisierung zwischen InVision-Prototypen und Sketch
- Daten - Ziehen Sie echte Daten aus dem Internet in Ihr Sketch-Modell
- Bibliothek - Design-Assets in der Cloud, die für Ihr gesamtes Team verfügbar sind
- Duplikat - blitzschnelles Klonen von UI
Sieh dir das an Bastelhomepage und sieh was du denkst. Sobald Sie es versuchen, werden Sie nie mehr zurück wollen.
3. Skizzieren Sie die Toolbox
Jeder Sketch-Benutzer sollte etwas über das wissen Skizzen-Toolbox . Es ist ein exquisiter Plugin-Manager, der die Installation / Anpassung Ihrer Plugins erleichtert.
Mit dieser Toolbox können Sie Hunderte von Sketch Plugins durchsuchen und auswählen, welche Sie installieren möchten. Sie klicken einfach, was Sie wollen, und es wird automatisch auf Ihren Computer heruntergeladen und kann sofort verwendet werden.
Und die Sketch Toolbox aktualisiert Plug-Ins automatisch, damit sie reibungslos funktionieren.
Technisch ist dies immer noch in der Beta und es werden immer neue Updates erhalten auf GitHub . Aber ich denke, es ist solide genug für einen Produktions-Workflow. In der Tat würde ich argumentieren, dass ein guter Sketch-Workflow ohne diesen unglaublichen Plugin-Manager nicht komplett wäre.
4. Export von Assets
Eine der detailliertesten Aufgaben eines Designers besteht darin, Ressourcen zuzuweisen und sie mit Entwicklern zu teilen. All die kleinen Icons, Grafiken, Hintergrundmuster, all diese müssen exportiert werden (normalerweise von Hand).
Das Exportieren von Assets macht diesen Prozess zum Kinderspiel. Beachten Sie, dass dieser Plug speziell für mobile Apps entwickelt wurde, bei denen Designer Android / iOS-Schnittstellen-Assets exportieren müssen. Dies beinhaltet Retina Assets für @ 2x und @ 3x Bildschirmgrößen.
Ich habe keine Funktionen im Zusammenhang mit Netzhaut Webdesign gesehen, aber Sie können die Skizzenexporter Plugin auch. Es ist derzeit in der Beta und es soll eine verbesserte Version des Originals sein.
5. Inhaltsgenerator
Das Craft-Plugin, das ich bereits erwähnte, bietet Content-Generierung. Aber vielleicht möchtest du so etwas einfacher haben Inhaltsgenerator von Timur Carpeev.
Wenn Sie diese Option installiert haben, können Sie automatisch mehrere Sketch-Elemente mit zugehörigen Daten wie z.
- Benutzeravatare
- Vor- und Nachnamen
- Dummy-Absatztext
- Benutzerdefinierte Zeichenfolgen (Geos, Preise, CC-Kartennummern usw.)
Der gesamte Inhalt wird aus Open-Source-Datenbanken wie Unsplash und Uinames Sie können dies für mehrere kommerzielle oder andere Projekte verwenden.
6. Looper
Photoshop verfügt über ein eigenes Bedienfeld Aktionen, in dem Sie wiederholte Aktionen automatisieren können. Sketch hat kein Panel wie dieses, aber es hat das Looper-Plugin Das ist völlig kostenlos und super einfach zu lernen.
Dies ist am nützlichsten für das Erstellen von sich wiederholenden Mustern, die die gesamte Seite übernehmen. Grafikdesigner finden möglicherweise mehr Nutzen für dieses Plug-in als Web-Designer, aber es kann viel Zeit durch wiederholende Skalierungs- / Duplizierungsaufgaben sparen.
Werfen Sie einen Blick auf die Looper Homepage um zu sehen, was es tun kann. Es ist vielleicht nicht für jeden nützlich, aber für diejenigen, die es benutzen können, werden Sie viel Zeit sparen.
7. Skizzieren Sie Iconfont
Webdesigner lieben Symbolschriften . Große Symbole erleichtern das UI-Design und Schriftdateien sind in der Regel kleiner als Bilder.
Das Sketch Iconfont Plugin ist eine komplette Management-Suite zum Speichern, Sortieren und Ziehen von Symbolschriften direkt in Sketch. Standardmäßig ist das Plugin leer, daher müssen Sie Icon-Fonts lokal herunterladen, um sie zu verwenden.
Dadurch haben Sie jedoch vollen Zugriff auf die Arbeit mit allen Symbolschriften, die Sie online finden. Es gibt tatsächlich eine Schriftpaketpaket speziell für dieses Plugin erstellt, wenn Sie Ihren Iconfont-Ordner schnell füllen möchten. Und Sie können immer das Web für mehr im Laufe der Zeit durchforsten.
Ich empfehle dringend, eine Kopie dieses Plugins zu greifen. Icon-Fonts sind hier, um zu bleiben, und sie sind von unschätzbarem Wert für moderne Websites.
8. Stil Inventar
Wenn Sie eine neue Sketch-Datei starten, müssen Sie die Stile entweder von Grund auf neu erstellen oder Sie müssen Stile aus früheren Modellen kopieren / einfügen.
Mit dem Plugin für Stilinventar Sie können all diese zusätzlichen Arbeiten umgehen. Mit nur ein paar Klicks werden alle Ihre vorherigen Stile direkt in Ihr neues Sketch-Dokument importiert, um einen einfachen Zugriff zu ermöglichen.
Diese Stile umfassen Farben, Textstile und Symbole sowie Layerstile für bestimmte Elemente.
Dieses Plugin wird selten aktualisiert, aber ich empfehle es für das Zusammenführen ähnlicher Modelle. Sie könnten auch versuchen, die Skizze Paletten-Plugin zum Speichern und Importieren von Farbschemata.
9. Pixel Perfecter
Jeder digitale Designer ist stolz auf pixelgenaue Modelle. Diese Aufgabe ist nicht schwer, erfordert jedoch, dass jedes Designelement perfekt auf das Raster ausgerichtet ist und keine Überlappungen oder Unvollkommenheiten aufweist.
Wenn Sie Ihre Arbeit vor dem Export überprüfen möchten, können Sie sie ausführen Pixel Perfecter . Dieses sehr kleine Plugin überprüft alle Ihre Datei-Assets, um zu sehen, ob irgendwelche Pixel die traditionellen X / Y-Koordinatenpositionen überlaufen und unvollkommene Pixel erzeugen.
Beachten Sie, dass diese Offset-Pixelwerte nicht automatisch korrigiert werden. Es wird nur die Ebene (n) finden, die Probleme verursachen, und sie hervorheben, damit Sie selbst hineingehen und sie beheben können. Trotzdem spart es viel Zeit, jede Ebene manuell zu überprüfen.
10. Dynamische Schaltfläche
Das ursprüngliche dynamische Tasten-Plugin wurde im Jahr 2015 etwas aufgegeben, aber das neuere Dynamische Schaltfläche Plugin ist noch besser und kompatibel mit Sketch 3.5+.
Es fügt automatisch Füll- und Schaltflächenstile zu jeder von Ihnen erstellten Textebene hinzu, und die Auffüllung ist dynamisch, sodass sie unabhängig von der Textgröße aktualisiert wird. Dies ist sehr hilfreich für UI-Designer, die ständig Änderungen an ihren Modellen vornehmen.
Dies kann auch für mobile Apps verwendet werden, bei denen Schaltflächen in der Regel einer festen Größe / Verhältnis folgen. Es ist nicht das glamouröseste Sketch-Plugin, aber es erfüllt seine Aufgabe gut.
11. Compo
Wenn Sie einen Knopfgenerator zusammen mit einigen zusätzlichen Funktionen möchten, dann die Compo-Plugin ist es wert, getestet zu werden.
Der Entwickler von Compo hat die Idee, nachdem er das Dynamic Button Plugin für eine Weile benutzt hat, um etwas schneller zu bekommen. Compo generiert automatisch die richtige Tastengröße und Textgröße, um Ihren genauen Spezifikationen zu entsprechen. Ein Klick und Sie haben eine funktionierende Sketch-Komponente, die automatisch richtig skaliert und positioniert wird.
Wenn Sie eine Schaltfläche erstellen und den Text ändern, wirkt sich dies normalerweise nur auf die Textebene aus. Der zugrunde liegende Button wäre also zu klein. Compo passt die Schaltfläche und den Text automatisch an, als wären sie ein Element.
Sie können Tonnen von Demos auf dem finden GitHub Repo zusammen mit einigen Benutzerhandbüchern für den Einstieg.
12. CSSketch
Last but not least ist das CSS-Zeichenkette Plugin. Dies ist besonders nützlich für Designer + Entwickler-Kombinationen, die direkten Zugriff auf CSS-Code für alle Stile haben möchten, die sie erstellen.
Jede Seite, die Sie entwerfen, kann über dieses Plugin ausgeführt werden, um ein vollständiges Stylesheet mit allen berücksichtigten Assets zu exportieren. Da dies jedoch automatisiert ist, können Sie keinen A ++ - Qualitätscode erwarten.
Ich bevorzuge es immer noch, mein CSS von Hand zu codieren, aber dieses Plugin bietet zumindest einen Ausgangspunkt für nicht-technische Designer oder Entwickler, die ein bisschen Zeit sparen möchten.
