de.hideout-lastation.com
Paradies Für Designer Und Entwickler


10 kostenlose Sketch-Plugins für Web-Entwickler

Sketch gewinnt bei Webdesignern und -entwicklern eine große Anziehungskraft. Dies liegt wahrscheinlich daran, dass es intuitiv, leicht zu erlernen und mit vielen Funktionen ausgestattet ist, die es viel einfacher machen, einen Website-Prototyp zu erstellen. Es kann auch sein, dass diese Anwendung erweiterbar ist, dh Sie können der Anwendung einfach neue Funktionen mit Hilfe von Plugins hinzufügen.

Hier sind 10 Plugins, mit denen Sie Ihre Produktivität bei der Arbeit mit Sketch steigern können. Es gibt verschiedene Möglichkeiten, die von Inhaltsgeneratoren bis hin zu Farbpaletten-Selektoren reichen. Sie können Ihnen dabei helfen, Ebenenmessungen anzuzeigen oder einer Ebene automatisch Padding hinzuzufügen.

1. CSS Buddy

Mit CSS-Buddy können Sie das CSS zu Ihrer Ebene im Arbeitsbereich "Skizze" hinzufügen. Im Grunde können Sie Breite, Höhe, Deckkraft, Box-Schatten, Rahmen und Hintergrund mit CSS auf den Layer anwenden.

Wenn dieses Plugin installiert ist, wähle einfach eine Ebene aus und wähle dann " An 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 Farbpalette

Wenn Sie dem Trend des Material Designs folgen, werden Sie bemerkenswerte Farben bemerken. Material Design hat eine tolle Farbpalette. Jetzt können Sie das mit Material Design Color Palette Plugin in Ihren Arbeitsbereich bringen.

Dieses Plugin erzeugt Farbpaletten in Sekunden, ohne dass Sie Ihren Arbeitsbereich schließen müssen. Wählen Sie "Farbton", "Wert" oder "Farbfeld", um eine für Ihr Projekt geeignete Farbpalette zu erstellen.

3. Skizzennotizbuch

Manchmal müssen wir zeigen, was wir in einem Kommentar oder über Dokumentation tun. Wenn Sie an Projekten mit anderen Designern oder der Beteiligung eines Kunden arbeiten, ist dies auch notwendig, damit Sie sicherstellen können, dass das Ergebnis das ist, was alle anstreben.

Sketch Notebook ist ein Plugin, um Ihr Design in Sketch mit Leichtigkeit zu dokumentieren. Es fügt Ihrem Arbeitsbereich eine zusätzliche Seitenleiste hinzu, die Kommentare enthält, die Sie zu einem beliebigen Element in Ihrem Design hinzufügen. Sie können den Kommentar neu anordnen, die Sichtbarkeit von Kommentaren neu ausrichten, löschen und umschalten.

4. Tag Spieler

Bevor wir reale Bilder in einem Design verwenden, verwenden wir häufig Platzhalterbilder, um den Designprozess zu beschleunigen. Für Sketch können Sie mithilfe von Day Player von 6 Platzhalter-Bilddiensten, einschließlich Placehold.it, LoremPixel und Unsplash, benutzerdefinierte Layer für jede Ebene in Ihrem Sketch-Arbeitsbereich hinzufügen. Nach der Aktivierung können Sie die Breite, Höhe und andere Informationen des Bildes festlegen.

5. Inhaltsgenerator

Wir haben bereits ein Plugin, um Platzhalterbilder einzufügen, wie wäre es mit einem für allgemeine Inhalte? Mit dem Content Generator können Sie Dummy-Daten wie Avatare, Namen, Geolocation-Daten und mehr hinzufügen. Funktioniert hervorragend für Mock-up-Designs und um Kopfschmerzen zu vermeiden, indem versucht wird herauszufinden, wie Daten vor Ort generiert werden.

Um die Dummy-Daten hinzuzufügen, wählen Sie einfach eine Ebene aus und wählen dann " Plugin"> "Generator" und dann " Geo", " Persona" oder " Fotos".

6. Skizzenmaß

Sketch Measure ist ein Messwerkzeug für Sketch. Er misst die Länge oder Größe einer Ebene (oder mehrerer Ebenen) in Ihrem Design. Sie erhalten auch die Polsterung und den Rand einer Ebene sowie den Abstand zwischen zwei Ebenen. Skizzenmaß kann auch die Ebeneneigenschaften wie Farbe, Rahmen und Deckkraft drucken. Alle Messungen können über Tastaturkürzel aufgerufen werden.

7. Dynamische Schaltfläche

Die Dynamische Schaltfläche hilft Ihnen, Schaltflächen mit festen Padding-Funktionen einfach zu erstellen. Es passt das Padding automatisch an den von Ihnen angegebenen Wert an, 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 Füllmenge kann dann in die Textschicht (0: 0: 0: 0) (unter der Flex-Schaltflächengruppe) eingefügt werden.

8. Typografische Skala

Typografische Skala ist ein Plugin, um ausgewählte Textebene in typografische Skalierung zu verwandeln. Um dieses Plugin zu verwenden, wählen Sie einfach die Textebene (einzeln oder mehrfach) oder eine gemischte Ebene, die mindestens eine Plugin > Typographic Scale enthält. Plugin > Typographic Scale dann " Plugin > Typographic Scale und passen Sie den Wert im Dialogfeld an. Das Ergebnis ist ein Satz von skaliertem Text, der den Regeln des typografischen Maßstabs folgt.

9. Modulizer

Mit Modulizer können Sie die Padding für Button, Modul oder Bereiche auf Ihrem Design mit der Tastenkombination Shift + Befehl + M steuern. Sie können alle Ihre Ebenen kombinieren, gruppieren und dann die Abkürzung verwenden, um das Padding basierend auf dem Füllwert automatisch anzupassen du brauchst. Sehen Sie sich die Video-Demo an, um dies in Aktion zu sehen.

10. Klinge

Haben Sie jemals daran gedacht, Ihr Design von der Skizze in HTML zu konvertieren? Wenn ja, sollten Sie Blade, ein Sketch-Plugin, das automatisch HTML-Dateien aus Ihrem Design generiert, erhalten. Es konvertiert die Gruppe in div, Text in p und so weiter.

Wenn Sie Blade verwenden, können Sie dem Plugin mitteilen, welches DOM-Element generiert werden soll, indem Sie dem Layer einen speziellen Namen wie [btn] oder Eingabe [text] hinzufügen, damit Blade weiß, was es tun soll. Sehen Sie sich diese Video-Demo an, um einen Einblick zu erhalten.

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

Ultimativer Leitfaden zur Einrichtung Ihres ersten Online-Shops

Ultimativer Leitfaden zur Einrichtung Ihres ersten Online-Shops

E-Commerce ist der beliebteste Geschäftstrend in unserer futuristischen Gesellschaft, da die meisten modernen Städte mit Internet ausgestattet sind und es so einfach ist, Zahlungen überall auf der Welt per Internetverbindung zu senden. Zusammen mit diesen Technologien sind Hunderttausende neuer digitaler Webshops entstanden, die sowohl physische als auch digitale Produkte an einen globalen Marktplatz verkaufen.Ge

(Tech- und Design-Tipps)

WordPress Speed ​​Optimierung mit benutzerdefinierten Social Sharing Icons

WordPress Speed ​​Optimierung mit benutzerdefinierten Social Sharing Icons

Es scheint eine einfache Aufgabe zu sein, aber das Hinzufügen von Social-Sharing-Buttons zu einer WordPress-Website kann mühsam sein. Wenn ich "brav" sage, dann meine ich einfach, leicht, ressourcenfreundlich, schnell - die meisten Social-Sharing-Plugins sind nicht so. Sie neigen dazu, Ressourcen wie verrückt aufzufressen, und warum sollte jemand die Ladezeit des Plugins um 25-35% erhöhen wollen, nur um einige Icons auf seiner Site anzuzeigen ?Die

(Tech- und Design-Tipps)