23 Top Sketch Plugins
Seite 1 von 2: Seite 1Sketch-Plugins helfen dabei, Sketch noch besser zu machen. Sketch ist für viele das bevorzugte Webdesign-Tool für die Benutzeroberfläche. Ein Teil dessen, was es so gut macht, ist die Community von Menschen, die daran arbeiten, ihre Funktionen und Features durch die Erstellung benutzerdefinierter Plugins zu erweitern.
Die Verwaltung Ihrer Sketch-Plugins ist jetzt einfacher als je zuvor. Plugins werden automatisch aktualisiert und veraltete werden deaktiviert. Das Plugin-Ökosystem noch nützlicher zu machen, ist Sketch Cloud , ein Dateifreigabedienst, für den sich jeder anmelden kann, mit dem Sie Sketch-Dokumente anzeigen, herunterladen und kommentieren können, die öffentlich oder privat direkt von Sketch aus freigegeben wurden.
Schauen wir uns also die besten Sketch-Plugins an, die die Art und Weise, wie Sie Benutzeroberflächen entwerfen, drastisch verändern könnten. Wenn Sie eine gefunden haben, die Sie möchten, lesen Sie, wie Sie sie installieren Skizzen-Plugins . Wenn Sie Ihre Web-Tools lieben, sollten Sie unseren Favoriten nicht verpassen Webdesign-Tools , Webseitenersteller und Cloud-Speicher Zusammenfassungen. Und denken Sie daran, Ihre Wahl von Web-Hosting Der Anbieter ist entscheidend für den Erfolg Ihrer Website (unser Leitfaden hilft Ihnen dabei).
01. Kopieren und Einfügen von Handbüchern
- Preis: Frei
- Zusammenfassung: Kopieren, Einfügen oder Entfernen von Hilfslinien von Ihren Zeichenflächen
Jeder Designer hat eine Hassliebe zu Guides. Manchmal sind sie absolut notwendig und den Rest der Zeit stehen sie dir nur im Weg. Wenn Sie anstelle der Layoutoption von Sketch Hilfslinien verwenden, kann das Ändern für mehrere Zeichenflächen ein Albtraum sein. Mit diesem Plugin können Sie jedoch einfach Hilfslinien von allen Zeichenflächen kopieren, einfügen und entfernen.
02. Sketch Cleaner
- Preis: $ 2
- Zusammenfassung: Holen Sie sich Ihre Design-Dateien so sauber wie eine Pfeife
Jedes Sketch-Design, das einige Iterationen durchlaufen hat, muss auf dem Weg ein wenig Müll auffangen, z. B. ausgeblendete Ebenen, inkonsistente Rahmenpositionen und nicht verwendete Ebenenstile.
Es ist zwar nicht das Ende der Welt, eine unordentliche Skizzendatei zu haben, aber es könnte sich auf die Übergabe auswirken und es wird jedem das Leben leichter machen, der es später verstehen muss. Verwenden Sie Sketch Cleaner, um alle gängigen Probleme automatisch zu lösen, anstatt alles von Hand durchzugehen.
03. Anima
- Preis: Frei nach oben
- Zusammenfassung: Erstellen Sie reaktionsschnelle High-Fidelity-Prototypen
Früher als separate kostenlose Plugins erhältlich - Auto Layout und Launchpad - Anima ist jetzt ein All-in-One-Plugin, mit dem Sie reaktionsschnelle Layouts mit Pins, Stapeln und Polstern sowie High-Fidelity-Prototypen erstellen können, die auf alle Bildschirme passen. Es gibt noch eine kostenlose Version, die ein Projekt unterstützt. Für unbegrenzte Projekte beginnt der Preis bei 25 USD pro Monat.
04. Reagiere auf Sketch.app
- Preis: Frei
- Zusammenfassung: Rendern Reagieren Sie Komponenten auf Skizze
Das Verwalten von Design-Assets in Sketch kann schwierig sein. Dieses praktische Sketch-Plugin bietet eine einfachere und zuverlässigere Möglichkeit, Ihre Assets zu verwalten. Implementieren Sie Ihre Entwürfe im Code als React-Komponenten und verwenden Sie dieses Plugin, um sie in eine Skizze zu rendern. Es erleichtert auch das Abrufen und Implementieren realer Daten in Ihre Skizzendateien.
React Sketch.app wurde von Airbnb für die Verwendung mit seinem Designsystem entwickelt, um die Lücke zwischen Designern und Entwicklern zu schließen.
05. Git Sketch Plugin
- Preis: Frei
- Zusammenfassung: Ein in Sketch integrierter Git-Client
Dieses Plugin soll die Versionskontrolle in Sketch bringen. Es funktioniert, indem ein Bild für jeden Teil des Designs exportiert und dann hübsche Unterschiede generiert werden, sodass klar ist, welche Änderungen vorgenommen wurden. Durch die Dokumentation jedes Schritts des Entwurfsprozesses kann jeder im Team sehen, wie sich der Entwurf entwickelt hat.
Git Sketch Plugin wurde erstellt von Mathieu Dutour , der seitdem ein umfassenderes, kostenpflichtiges Versionskontrollsystem namens entwickelt hat Kactus .
06. ImageOptim
- Preis: Frei
- Zusammenfassung: Bildoptimierung in Sketch
Während Sketch seine eigenen anbietet Lösung Für die Optimierung von SVG-Dateien gibt es keine Optionen zum Komprimieren von JPG- und PNG-Bildern. Schon seit ImageOptim bietet seit einigen Jahren einen soliden Service an. Es ist sinnvoll, diese Funktionalität für Sketch bereitzustellen.
Jeder Designer, der sich um Ladezeiten und Bildoptimierung kümmert (das sollten alle Designer sein), sollte ImageOptim zu seiner Toolbox hinzufügen. Beachten Sie, dass Sie neben dem Plugin auch den Kern benötigen ImageOptim App (kostenlos) auf Ihrem macOS-System installiert, und Sie müssen Layer in Sketch weiterhin als exportierbar markieren (navigieren Sie zunächst zu 'Exportieren und Optimieren aller Assets').
07. Zauberspiegel
- Preis: Ab 4 USD / Monat
- Zusammenfassung: Werkzeug zur Transformation der Bildperspektive
Wenn Sie versuchen, ein beeindruckendes Produkt herzustellen Modelle Aber wenn Sie weiter in Photoshop springen müssen, um mit den kniffligen Dingen fertig zu werden, könnte Magic Mirror ein Lebensretter für Sie sein. Es ist ein Werkzeug zur Transformation der Bildperspektive, mit dem Sie perspektivische Modelle und andere verzerrte Effekte erstellen können, ohne Sketch jemals verlassen zu müssen.
08. Mehr exportieren
- Preis: Frei
- Zusammenfassung: Exportieren Sie Mac-kompatible Symbole und GIFs
Zuvor zwei verschiedene Plugins - ICNS generieren und GIF generieren - Nathan Rutzky's Mehr exportieren bringt beide in einem einzigen Paket zusammen, das einige krasse Lücken in den Exportoptionen von Sketch behebt. Mit ihm können Sie Icon-Designs als Mac-kompatible ICNS-Dateien exportieren und einfache Animationen erstellen, die Sie als GIFs exportieren können, ohne jemals aus Ihrem Sketch-Workflow aussteigen zu müssen.
Dieses Sketch-Plugin ist ideal, um die erneute Begeisterung für GIFs - während Sie verwenden könnten Photoshop CC für oder After Effects CC Für Ihr GIF-Design benötigen Sie nicht unbedingt eine voll ausgestattete Adobe-App, insbesondere wenn Sie relativ einfache Animationen erstellen.
Export More behandelt jede Zeichenfläche als individuellen Rahmen und kombiniert sie miteinander. Sie können dann wählen, ob das GIF einmal oder in einer Endlosschleife abgespielt werden soll. Navigieren Sie zu Plugins> Mehr exportieren> Zeichenflächen nach GIF, wählen Sie die gewünschte Wiedergabemethode (Standard oder Loop) und anschließend die gewünschte Bildrate.
09. Sketch Style Inventory
- Preis: Frei
- Zusammenfassung: Verwalten Sie Ihre Stile einfach
Design kann eine eigenartige Kombination aus Freiform-Erkundung und sorgfältig strukturiertem Prozess sein. Sketch Style Inventory hilft Ihnen dabei, die beiden zu verbinden: Es gibt Ihnen einen Überblick über alle von Ihnen verwendeten Stile und hilft Ihnen dann, die Stile ähnlicher Ebenen zu einer zusammenzuführen. So können Sie einen endgültigen Stil aus all Ihren verschiedenen Experimenten festlegen.
10. Tag Spieler
- Preis: Frei
- Zusammenfassung: Generiert automatisch Platzhalterbilder
Das Hinzufügen von Platzhalterbildern zu einem Design ist ein notwendiger Bestandteil des Prototyping, aber das Finden der tatsächlichen Bilder kann schwierig sein. Überlassen Sie also alles dem Day Player, anstatt Zeit damit zu verschwenden. Auf diese Weise können Sie jedem Skizzendokument benutzerdefinierte Platzhalterbilder aus einer Reihe verschiedener Platzhalterbilddienste hinzufügen. Die größte Entscheidung, die Sie treffen müssen, ist also, ob Sie Bill Murray, Nicolas Cage oder Kätzchen verwenden möchten.
11. Marketch
- Hier herunterladen
- Preis: Frei
- Zusammenfassung: Generieren Sie eine HTML-Seite, die CSS-Stile messen und abrufen kann
Wenn Sie CSS-Stile aus Ihren Sketch-Designs abrufen möchten, ist ein Plugin wie Marketch unbedingt erforderlich. Sie können Ihre Sketch-Zeichenflächen als Zip-Datei mit HTML-Dokumenten exportieren, die Sie dann extrahieren können, um sofort eine Menge süßes CSS herauszuholen.
12. Segmentierte Kreise
- Preis: Frei
- Zusammenfassung: Erstellen Sie präzise kreisförmige Grafiken
Hier ist eine schnelle Möglichkeit, segmentierte Kreise für Diagramme und Diagramme zu erstellen. Dieses Plugin kann verschiedene Arten von Kreisdiagrammen erstellen, einschließlich gestrichelter Kreise und Kreise mit Häkchen. Die Dicke wird über eine einfache Liste von durch Kommas getrennten Werten gesteuert.
13. Sketch Runner
- Preis: Frei
- Zusammenfassung: Spotlight für die Suche
Sketch ist bekannt für seinen minimalistischen Tastatur-Workflow. Davon abgesehen gibt es immer zwei oder drei Tastaturkürzel, die Sie immer zu vergessen oder mit einer anderen Design-App wie Photoshop zu verwechseln scheinen - und vergessen wir nicht die weniger verbreiteten Tools und Funktionen, die keine Tastenkombination haben und tief in der Tastatur verborgen sind Skizzenmenü.
Sketch Runner löst diese Probleme auf eine Weise, mit der MacOS-Benutzer vertraut sind. Sketch Runner ist das MacOS Spotlight, jedoch für Sketch.
14. Symbolschrift
- Preis: Frei
- Zusammenfassung: Verwalten von Symbolschriftarten
Symbolschriftarten sind eine hocheffiziente Möglichkeit, Symbole in Ihren Webdesigns zu verwenden, ohne eine Menge Bildelemente exportieren und optimieren zu müssen. In der Regel verweisen wir auf Symbolschriftarten in der Abschnitt der HTML-Webseiten, wie wir es mit CSS und JavaScript tun. Die Verwendung in Sketch ist jedoch etwas komplizierter. Zum Glück macht es Icon Font einfach.
Laden Sie nach dem Herunterladen und Installieren von Sketch IconFont SVG-Schriftdateien herunter oder laden Sie diese herunter Schriftpaket , einschließlich der Schriftdateien für FontAwesome, Material Design Icons, Ion Icons und Simple Line Icons. Wenn Sie fertig sind, navigieren Sie zu Plugins> Symbolschriftart> Schriftartenpaket installieren, wählen Sie die heruntergeladenen Schriftarten aus dem Dialogfeld Datei öffnen aus und navigieren Sie zu Plugins> Symbolschriftart> Rastereinfügung> [Ihre gewünschte Symbolschriftart], um sie einzufügen ein Symbol.
Selbst wenn Sie beabsichtigen, ein benutzerdefiniertes Icon-Set für Ihr Design zu entwerfen, können vorgefertigte Icons in den frühen Phasen des Designs beim schnellen Prototyping helfen und Ihren Low-Fidelity-Modellen ein wenig mehr Klarheit / Wiedergabetreue verleihen .
15. Suchen und ersetzen
- Preis: Frei
- Zusammenfassung: Suchen und ersetzen Sie Text in ausgewählten Ebenen
Texteditoren sind nicht der einzige Ort, den Sie suchen und ersetzen müssen - sie sind auch in Sketch nützlich. Dieses Plugin bietet viele erweiterte Optionen und ermöglicht es Ihnen, in ausgewählten Ebenen (und allem, was darin enthalten ist) nach Instanzen bestimmter Wörter oder Phrasen im Text zu suchen und diese dann einfach zu ersetzen.
Nächste Seite: Weitere zeitsparende Sketch-Plugins
- 1
- zwei
Aktuelle Seite: Seite 1
Nächste Seite Seite 2
