10 kostenlose Sketch Plugins für Webentwickler

Sketch wird unter Webdesignern und -entwicklern immer beliebter. Das liegt wahrscheinlich daran, dass es so ist intuitiv, leicht zu erlernen und verfügt über viele Funktionen, die die Erstellung eines Website-Prototyps erheblich erleichtern. Es kann auch sein, dass diese Anwendung erweiterbar ist, d. H. Sie können der Anwendung mit Hilfe von Plugins problemlos neue Funktionen hinzufügen.

Hier sind 10 Plugins, die Ihnen helfen können, Ihre Produktivität bei der Arbeit mit Sketch zu steigern. Es gibt verschiedene Bereiche, die von Inhaltsgeneratoren bis zur Farbpalettenauswahl reichen. Sie können Ihnen dabei helfen, Layermessungen anzuzeigen oder einer Ebene automatisch Abstand hinzuzufügen.

1. CSS-Buddy

CSS-Buddy ermöglicht das Hinzufügen von CSS zu Ihrer Ebene im Arbeitsbereich "Skizze". Grundsätzlich können Sie mit CSS Breite, Höhe, Deckkraft, Box-Schatten, Rahmen und Hintergrund auf die Ebene anwenden.

Wenn dieses Plugin installiert ist, wählen Sie einfach eine Ebene aus und wählen Sie dann aus Auf Ausgewählt anwenden aus dem Plugin-Menü. Ein Dialog fordert Sie auf, Ihr Stylesheet einzugeben. Fügen Sie den CSS-Inhalt ohne die CSS-Klasse hinzu und beobachten Sie, wie Ihre Ebene Gestalt annimmt.

2. Material Design Color Palette

Wenn Sie dem Trend von Material Design folgen, werden Sie auffällige Farben erkennen. Material Design hat eine tolle Farbpalette. Jetzt können Sie das mit in Ihren Arbeitsbereich bringen Material Design Farbpaletten-Plugin.

Dieses Plugin erstellt in Sekunden Farbpaletten, ohne dass Sie Ihren Arbeitsbereich schließen müssen. Wählen Sie „Farbton“, „Wert“ oder „Farbfeld“, um eine Farbpalette zu generieren, die für Ihr Projekt geeignet ist.

3. Skizzenheft

Manchmal müssen wir zeigen, was wir in einem Kommentar oder in einer Dokumentation machen. Wenn Sie an Projekten mit anderen Designern arbeiten oder sich an einem Kunden beteiligen, ist dies ebenfalls notwendig, damit Sie sicherstellen können, dass das Ergebnis das ist, was alle anstrebten.

Skizzenheft ist ein Plugin für die einfache Dokumentation Ihres Entwurfs in Sketch. Dadurch wird Ihrem Arbeitsbereich eine zusätzliche Seitenleiste hinzugefügt, die Kommentare enthält, die Sie zu jedem Element Ihres Designs hinzufügen. Sie können Kommentare neu anordnen, neu ausrichten, löschen und die Sichtbarkeit von Kommentaren ändern.

4. Tagesspieler

Bevor wir echte Bilder in einem Design verwenden, verwenden wir häufig Platzhalterbilder, um den Designprozess zu beschleunigen. Für Sketch können Sie verwenden Tag Spieler Hinzufügen von benutzerdefinierten Platzhaltern zu jeder Ebene in Ihrem Sketch-Arbeitsbereich aus 6 Platzhalter-Image-Services, einschließlich Placehold.it, LoremPixel und Unsplash. Nach der Aktivierung können Sie die Breite, Höhe und andere Informationen des Bildes festlegen.

5. Content Generator

Wir haben bereits ein Plugin zum Einfügen von Platzhalterbildern, wie etwa eines für allgemeinen Inhalt? Inhaltsgenerator unterstützt Sie beim Hinzufügen von Dummy-Daten wie Avataren, Namen, Geolocation-Daten und mehr. Er eignet sich hervorragend für Mockup-Designs und zur Verringerung der Kopfschmerzen, wenn er herausfinden möchte, wie Daten vor Ort generiert werden.

Wählen Sie zum Hinzufügen der Dummy-Daten einfach eine Ebene aus und wählen Sie dann aus Plugin> Generator, und wähle Geo, Persona oder Fotos.

6. Skizzierung

Sketch-Maß ist ein Messwerkzeug für Sketch. Er misst die Länge oder Größe einer Ebene (oder Ebenen) in Ihrem Entwurf. Sie erhalten auch die Auffüllung und den Rand einer Ebene sowie den Abstand zwischen zwei Ebenen. Sketch Measure kann auch die Ebeneneigenschaften wie Farbe, Rand und Deckkraft drucken. Alle Messungen können über Tastenkombinationen aufgerufen werden.

7. Dynamische Taste

Dynamische Schaltfläche hilft Ihnen beim Erstellen von Tasten mit festen Füllungen. Der Abstand wird automatisch an den Wert angepasst, den Sie eingeben, unabhängig von der Länge Ihres Textes. Wenn das Plugin installiert ist, kann ein Text mit der Tastenkombination Befehl + J in eine Struktur umgewandelt werden. Die erforderliche Auffüllung kann dann in die Textebene (0: 0: 0: 0) (unter der Flex-Button-Gruppe) eingefügt werden..

8. Typografische Skala

Typografische Skala ist ein Plugin, um ausgewählte Textebene in eine typografische Skala umzuwandeln. Um dieses Plugin zu verwenden, wählen Sie einfach eine Textebene (einzelne oder mehrere) oder eine gemischte Ebene aus, die mindestens eine Textebene enthält, und wählen Sie dann aus Plugin> Typografische Skala und passen Sie den Wert im Dialog an. Das Ergebnis ist ein Satz von skaliertem Text, der den Regeln der typografischen Skala folgt.

9. Modulator

Mit Modulator Sie können die Auffüllungen für Schaltflächen, Module oder Bereiche in Ihrem Design mit der Tastenkombination Umschalt + Befehlstaste + M steuern. Sie können alle Ebenen kombinieren, gruppieren und dann die Auffüllfunktion verwenden, um die Auffüllung automatisch an den gewünschten Auffüllwert anzupassen . Sehen Sie sich die Video-Demo an, um dies in Aktion zu sehen.

10. Klinge

Haben Sie jemals darüber nachgedacht, Ihr Design von der Skizze in HTML umzuwandeln? Wenn ja, sollten Sie es wahrscheinlich bekommen Klinge, ein Sketch-Plugin, das automatisch HTML-Dateien aus Ihrem Design generiert. Es wird Gruppe in konvertieren div, Text in p und so weiter.

Wenn Sie Blade verwenden, können Sie dem Plugin mitteilen, welches DOM-Element erzeugt werden soll, indem Sie der Ebene einen speziellen Namen hinzufügen, wie [btn] oder input [text], damit Blade weiß, was es tun soll. Schauen Sie sich diese Video-Demo für einen Einblick an.

Jetzt lesen: 12 nützliche Plugins für WordPress-Entwickler