Inhalt
- 01. Kopieren und Einfügen von Handbüchern
- 02. Sketch Cleaner
- 03. Anima
- 04. Reagiere auf Sketch.app
- 05. Git Sketch Plugin
- 06. ImageOptim
- 07. Zauberspiegel
- 08. Mehr exportieren
- 11. Marketch
- 12. Segmentierte Kreise
- 13. Sketch Runner
- 14. Symbolschriftart
- 15. Suchen und ersetzen
Sketch-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 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 Plugins sind deaktiviert. Um das Plugin-Ökosystem noch nützlicher zu machen, ist Sketch Cloud ein Dateifreigabedienst, für den sich jeder anmelden kann. Hier können Sie Sketch-Dokumente anzeigen, herunterladen und kommentieren, die öffentlich oder privat direkt von Sketch 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 eines gefunden haben, das Ihnen gefällt, lesen Sie, wie Sie Sketch-Plugins installieren. Wenn Sie Ihre Web-Tools lieben, sollten Sie unsere bevorzugten Webdesign-Tools, Website-Builder und Cloud-Speicher-Zusammenfassungen nicht verpassen. Und denken Sie daran, dass Ihre Wahl des Webhosting-Anbieters entscheidend für den Erfolg Ihrer Website ist (unser Leitfaden hilft Ihnen dabei).
01. Kopieren und Einfügen von Handbüchern
- Hier herunterladen
- Preis: Kostenlos
- 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 dieser 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
- Hier herunterladen
- 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 etwas 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 dies könnte sich auf die Übergabe auswirken und das Leben für jeden einfacher machen, der später einen Sinn daraus ziehen muss. Verwenden Sie Sketch Cleaner, um alle gängigen Probleme automatisch zu lösen, anstatt alles von Hand durchzugehen.
03. Anima
- Hier herunterladen
- 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
- Hier herunterladen
- Preis: Kostenlos
- 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
- Hier herunterladen
- Preis: Kostenlos
- 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.
Das Git Sketch Plugin wurde von Mathieu Dutour erstellt, der seitdem ein umfassenderes, kostenpflichtiges Versionskontrollsystem namens Kactus entwickelt hat.
06. ImageOptim
- Hier herunterladen
- Preis: Kostenlos
- Zusammenfassung: Bildoptimierung in Sketch
Während Sketch eine eigene Lösung zur Optimierung von SVG-Dateien bietet, gibt es keine Optionen zum Komprimieren von JPG- und PNG-Bildern. Da ImageOptim seit einigen Jahren einen soliden Service anbietet, ist es 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 neben dem Plugin die (kostenlose) ImageOptim-Kern-App auf Ihrem MacOS-System installiert sein muss und Sie in Sketch weiterhin Layer als exportierbar markieren müssen (navigieren Sie zu "Exportieren und Optimieren aller Assets", um zu beginnen).
07. Zauberspiegel
- Hier herunterladen
- Preis: Ab 4 USD / Monat
- Zusammenfassung: Werkzeug zur Transformation der Bildperspektive
Wenn Sie versuchen, beeindruckende Produktmodelle zu erstellen, aber immer wieder 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
- Hier herunterladen
- Preis: Kostenlos
- 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: Kostenlos
- 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
- Hier herunterladen
- Preis: Kostenlos
- 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
- Hier herunterladen
- Preis: Kostenlos
- 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. Symbolschriftart
- Hier herunterladen
- Preis: Kostenlos
- 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 Kopf> 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 dieses Schriftartenpaket herunter, das die Schriftdateien für FontAwesome, Material Design Icons, Ion Icons und Simple Line Icons enthält. 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 dann zu Plugins> Symbolschriftart> Rastereinfügung> [Ihre gewünschte Symbolschriftart], um sie einzufügen ein Symbol.
Selbst wenn Sie beabsichtigen, ein benutzerdefiniertes Symbolset für Ihr Design zu entwerfen, können vorgefertigte Symbole Ihnen 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
- Hier herunterladen
- Preis: Kostenlos
- Zusammenfassung: Suchen und ersetzen Sie Text in ausgewählten Ebenen
Texteditoren sind nicht der einzige Ort, an dem Sie suchen und ersetzen müssen - dies ist auch in Sketch nützlich. Dieses Plugin verfügt über 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
