Paddy Hinzufügen automatisierter Füllungen und Abstände in der Skizze

In diesem kurzen Tipp zeige ich Ihnen eine wirklich einfache Möglichkeit, Ihren Entwürfen in Sketch Abstand und Abstand hinzuzufügen.

Schauen Sie sich den Screencast an

 

Ein allgemeines UI-Designproblem in der Skizze

Lassen Sie mich zunächst ein Problem aufzeigen, mit dem Sie bei der Arbeit in Sketch oft konfrontiert waren. Angenommen, Sie möchten eine einfache Schaltfläche erstellen. Sie beginnen mit einer Rechteckform auf der Zeichenfläche, geben eine entsprechende Farbe und fügen dann Text auf einer anderen Ebene hinzu. Zum Schluss würden Sie die Objekte ausrichten, sie gruppieren und fertig sein.

Stellen wir uns jetzt vor, Sie möchten eine weitere Schaltfläche erstellen. ähnlich, aber mit unterschiedlichem Text. Sie würden wahrscheinlich den bereits erstellten kopieren und dann den Text ändern.

Angenommen, Sie möchten die gleiche seitliche Polsterung beibehalten, ändern Sie dann die Breite der Rechtecke, je nachdem, wie sie angezeigt werden sollen. Ein manueller Prozess:

Dies mag wie eine einfache Aufgabe erscheinen, aber wenn Sie dies immer wieder tun müssen, kann dies sehr zeitaufwändig sein. 

Die Lösung: Paddy

Lassen Sie mich Paddy vorstellen. ein Plugin für Sketch, das Ihnen viel Zeit spart.

Polsterung einstellen

Beginnen Sie mit der Installation des Plugins. Gehen Sie dann zu Text, der auf Ihrer Zeichenfläche ausgewählt ist Plugins> Paddy> Padding zur Auswahl eingeben. In dem sich öffnenden Dialog können Sie die Auffüllung wie in CSS einstellen. Geben Sie beispielsweise einen Wert von ein 10 20 erhalten Sie 10px auf der Oberseite und Unterseite, mit 20px rechts und links.

Paddy erstellt dann automatisch ein Hintergrundrechteck mit der gewünschten Größe. Aber hier ist der coole Teil: Wenn Sie den Text ändern, behält das Hintergrundrechteck die zuvor eingestellten Füllmaße bei.

Bearbeiten des Ebenennamens aus Hintergrund (10 20) sagen, Hintergrund (20 20) ändert den Abstand, um die neuen Werte wiederzugeben.

Abstand einstellen

Dies funktioniert auch beim Hinzufügen von Abständen zwischen Objekten. Stellen Sie sich vor, wir haben zwei Knöpfe und wir wollen 50px Abstand zwischen ihnen hinzufügen. Wir wählen beide Tasten aus und gehen dann zu Plugins> Paddy> Abstand zur Auswahl und wir können dann den gewünschten Wert eingeben. Wir würden verwenden v Einheiten, um den vertikalen Abstand zu definieren, oder h Einheiten für horizontal.

In diesem Fall haben wir verwendet 50 v um unsere beiden Knöpfe genau 50px voneinander zu trennen, vertikal.

Wie Sie sehen können, wurden die Schaltflächengruppen in eine andere Gruppe eingefügt, die den Abstandswert enthält. Wenn wir in dieser Gruppe eine weitere Schaltfläche hinzufügen, erbt auch diese den gleichen Abstand. Wenn wir die Auffüllwerte oder die Textlänge innerhalb einer dieser Schaltflächen ändern, wird das Ganze für uns neu berechnet und neu positioniert.

Fazit

Paddy ist ein großartiges Plugin. Ich empfehle Ihnen, es herunterzuladen und einige andere Dinge, die es tun kann, anzusehen. Es wird definitiv Zeit sparen!