Paddy ... μια πραγματικά απλή λύση σε ένα πρόβλημα που έχουμε όλοι ενώ σχεδιάζουμε κουμπιά ...

Όλοι κάνουμε κουμπιά. Είναι παντού στην ιστοσελίδα μας και τα σχέδια εφαρμογών. Στο Sketch, δεν υπάρχει πραγματικά εύκολος τρόπος χειρισμού κουμπιών. Μόλις το κάνετε, είστε καλός μέχρι να κάνετε την επόμενη, τότε πρέπει να αλλάξετε το μέγεθος αυτού του ορθογωνίου έτσι ώστε να ταιριάζει με τη νέα σας ετικέτα, ελέγχοντας συνεχώς τις αποστάσεις για να βεβαιωθείτε ότι όλες είναι σωστά τοποθετημένες σε απόσταση.

Η δημιουργία ενός δυναμικού κουμπιού στο Sketch με τον Paddy είναι εύκολη. Θα σας καθοδηγήσω μέσα από τη ρύθμιση του κουμπιού σας, υπολογίζοντας τις τιμές γεμίσματος και χρησιμοποιώντας σύμβολα για να δείτε την πραγματική αξία αυτού του plugin. Θα δημιουργήσουμε επίσης ένα κουμπί με ένα εικονίδιο. Πριν ξεκινήσουμε, βεβαιωθείτε ότι έχετε κατεβάσει το plugin εδώ: https://github.com/DWilliames/paddy-sketch-plugin ή χρησιμοποιήστε το SketchRunner για να το εγκαταστήσετε.

Θα χρησιμοποιήσουμε τη δυνατότητα επίστρωσης Layer για αυτά τα κουμπιά. Εκπαιδευτικά σχετικά με τα άλλα χαρακτηριστικά θα έρθουν αργότερα.

ΒΗΜΑ 01: Δημιουργήστε το κουμπί σας και δώστε του μια απλή ετικέτα.

τίποτα δεν φαντάζει εδώ ... ακόμα ...

ΒΗΜΑ 02: Καταγραφή των τιμών σας.

Μόλις η ετικέτα σας είναι εκεί που θέλετε, απλά επιλέξτε το κείμενο και κρατήστε πατημένο το πλήκτρο επιλογής, ενώ τοποθετείτε το δείκτη του ποντικιού μέσα στο κουμπί. Το Σκίτσο θα σας δείξει την απόσταση της ετικέτας από τις άκρες του κουμπιού σας.

η απόσταση υπολογίζεται από τις άκρες του κουμπιού στο πλαίσιο οριοθέτησης του κειμένου.

ΒΗΜΑ 03: Ομαδοποιήστε τα στοιχεία του κουμπιού σας.

Επιλέξτε το κείμενό σας και το κουμπί και κάντε κλικ στο κουμπί Ομάδας στη γραμμή εργαλείων ή χρησιμοποιήστε τη συντόμευση CMD + G.

ΒΗΜΑ 04: Μόλις ομαδοποιηθούν, μπορούμε να χρησιμοποιήσουμε τον Paddy.

Αρχικά, επιλέξτε το ομαδοποιημένο κουμπί. Στη συνέχεια επιλέξτε Paddy από το μενού plugins ή χρησιμοποιήστε το SketchRunner. Βεβαιωθείτε ότι έχετε επιλέξει "Συμπλήρωση για επιλογή"

ΒΗΜΑ 05: Προσθέστε τις τιμές γεμίσματος.

Το παράθυρο διαλόγου για τον Paddy είναι αρκετά απλό. Το μόνο που χρειάζεται να κάνετε είναι να εισαγάγετε τις τιμές που βρήκαμε νωρίτερα, 12 16 12 16. Ο Paddy ορίζει αυτές τις τιμές με αυτή τη σειρά, επάνω δεξιά αριστερά. Αυτό είναι ακριβώς όπως το CSS. Ο Paddy σας επιτρέπει επίσης να συντομεύσετε αυτές τις τιμές όπως το CSS. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε μια μοναδική τιμή όπως 20, η οποία θα εφαρμοζόταν 20 και στις 4 πλευρές. Μπορείτε επίσης να χρησιμοποιήσετε δύο τιμές, όπως 20 40, οι οποίες θα εφαρμόσουν 20 στην κορυφή και τη βάση και 40 δεξιά και αριστερά. Για αυτό το παράδειγμα, θα χρησιμοποιήσουμε 12 16 12 16. (Θα μπορούσαμε επίσης να χρησιμοποιήσουμε 12 16) Μόλις το κάνετε, απλά κάντε κλικ στο ok.

ΒΗΜΑ 06: Paddy Magic.

Μετά από αυτό το κουμπί σας δεν θα φαίνεται πολύ διαφορετικό. Αλλά. τώρα μπορούμε να κάνουμε κάποια μαγεία Paddy! Κάντε κλικ στο εσωτερικό του κουμπιού σας στο κείμενο και αλλάξτε το σε κάτι σαν το "Καλοί σχεδιαστές θέλουν να αποδειχθούν λάθος, οι κακοί σχεδιαστές ελπίζουν να αποδειχθούν σωστοί" (αυτό είναι ένα ωραίο απόσπασμα από τον Andy Budd). Μόλις το κάνετε αυτό, μόνο εσείς πρέπει να κάνετε κλικ έξω από την ετικέτα κειμένου και voilà !, το κουμπί σας θα αλλάξει το μέγεθος του padding που ορίσαμε.

Αν κοιτάξετε τις λεπτομέρειες του κουμπιού στο πλαίσιο των επιπέδων, θα δείτε ότι το στρώμα του κουμπιού έχει ένα [12 16] προσαρτημένο σε αυτό. Αυτό είναι το μόνο που κάνει το plugin, προσθέτει αυτές τις τιμές στο πιο κάτω επίπεδο της ομάδας, μπορείτε πραγματικά να αλλάξετε τις τιμές εκεί και θα έχετε εφαρμόσει το πρόσθετο σαν να χρησιμοποιείτε το παράθυρο διαλόγου Paddy.

ΒΗΜΑ 07: Ο Paddy λειτουργεί και με σύμβολα!

Κάνει ευκολότερη την αλλαγή των ετικετών κουμπιών. Ας το δοκιμάσουμε. Αρχικά, δημιουργήστε ένα σύμβολο από το κουμπί μας κάνοντας κλικ στο κουμπί "Δημιουργία συμβόλου" (δεν υπάρχει συντόμευση εκτός αν έχετε κάτι προσαρμοσμένο.) Θα εμφανιστεί το παράθυρο διαλόγου Δημιουργία νέου συμβόλου. Ας ονομάσουμε αυτό το σύμβολο κάτι απλό, "κουμπί κειμένου" και κάντε κλικ στο ok.

ΒΗΜΑ 08: Να παρακάμψετε αυτό το σύμβολο.

Τώρα που το κουμπί μας είναι ένα σύμβολο, είναι πολύ εύκολο να αλλάξουμε την ετικέτα και να επιτρέψουμε στον Paddy να αλλάξει το μέγεθος του κουμπιού μας. Επιλέξτε το νέο σύμβολο του κουμπιού σας. Ένα από τα δεξιά θα εμφανιστεί το πλαίσιο Overrides. Πληκτρολογήστε τη νέα ετικέτα και πατήστε enter / return. Αυτό είναι! το κουμπί σας είναι πρόσφατα Paddy'ed.

ΒΗΜΑ 09: Αφήνει ένα κουμπί κομψό και προσθέστε ένα εικονίδιο.

Δημιουργήστε ένα νέο κουμπί με το εικονίδιο σας. Όπως κάναμε στο Βήμα 2, θα βρούμε το padding που πρέπει να ρυθμίσουμε. Ωστόσο, αντί να μετρήσουμε την απόσταση από το κείμενο, θα επιλέξουμε και το εικονίδιο και την ετικέτα και θα μετρήσουμε από εκεί. Για να το κάνετε αυτό, επιλέξτε το εικονίδιο και την ετικέτα κρατώντας το πλήκτρο επιλογής ενώ τοποθετείτε το δρομέα του ποντικιού μέσα στο κουμπί για να δείτε τις μετρήσεις.

ΒΗΜΑ 10: Επαναλάβετε

Το υπόλοιπο είναι απλό. Ομαδοποιήστε τα τρία στοιχεία όπως ακριβώς κάναμε στο βήμα 3. Εκτελέστε Paddy και χρησιμοποιήστε τις τιμές που βρήκαμε στο βήμα 9, 8 16 7 8. Ας πηδήσουμε μπροστά και το κάνουμε σύμβολο και το αποκαλούμε "κουμπί εικονιδίων"

Τώρα, υπάρχει ένα ιδιαίτερο πράγμα που πρέπει να κάνετε για να βεβαιωθείτε ότι το εικονίδιο μας δεν πρόκειται να τεντωθεί όλοι όταν αλλάξουμε την ετικέτα μας. Κάντε κλικ στη σελίδα Σύμβολα στον πίνακα Σελίδες στην αριστερή πλευρά της διεπαφής Σκίτσο. Στη συνέχεια, κάντε κλικ στο εικονίδιο έτσι ώστε να είναι επιλεγμένο. Στη δεξιά πλευρά της διεπαφής Σκίτσο θα δείτε τον πίνακα "Περιορισμοί". Εδώ μπορούμε να πούμε στο εικονίδιο πώς να συμπεριφέρεται όταν αλλάζει το μέγεθος του κουμπιού. Βεβαιωθείτε ότι έχετε επιλέξει "Fix Width" και "Fix Height". Επίσης, επιλέξτε την επάνω και την αριστερή λαβή, λέγοντας ότι το εικονίδιο θα παραμείνει καρφωμένο στην επάνω και αριστερή πλευρά του κουμπιού.

ΒΗΜΑ 11: Ορίστε κάποιους περιορισμούς

Με τους περιορισμούς του εικονιδίου, μπορούμε τώρα να αλλάξουμε την ετικέτα μας. Επιστρέψτε στην εμφάνιση συμβόλου του κουμπιού μας και χρησιμοποιήστε τον πίνακα αντικατάστασης για να αλλάξετε την ετικέτα.

Αν θέλετε το εικονίδιο στη δεξιά πλευρά, μπορείτε να κάνετε το ίδιο πράγμα όπως αναφέρθηκε παραπάνω, απλά αναστρέψτε το σημείο όπου ετικέτα και το εικονίδιο είναι.

Συμπέρασμα: Αυτό είναι! Τώρα μπορείτε να κάνετε κουμπιά που θα διατηρούν πάντα το σχήμα τους. Σκεφτείτε όλη την ώρα που θα εξοικονομήσετε δεν χρειάζεται να αλλάξετε το μέγεθος κουμπιά όλη την ημέρα!

Αν σας αρέσει αυτό το plugin, γιατί να μην φωνάξετε τον David Williams (ο δημιουργός του Paddy) έναν καφέ ️ μέσω PayPal για να μοιραστείτε την αγάπη! Σίγουρα θα τον βοηθήσει να μπορέσει να υποστηρίξει περαιτέρω αυτό το plugin. Μπορείτε επίσης να τον ακολουθήσετε στο twitter @davidwilliames

** Σημείωση ** Δεδομένου ότι έχω δημοσιεύσει αυτό, ο David είπε ότι το ένθετο υποστήριξη συμβόλων έχει ζητηθεί για πολλά και ότι εργάζεται πάνω σε αυτό. Μείνετε συντονισμένοι!

Αυτή είναι η πρώτη σε μια σειρά άρθρων που σύντομα θα έρθουν στο sketchtools.co. Δεν υπάρχει τίποτα ακόμα, αλλά ακολουθήστε με στο twitter ή εδώ στο Medium για να μάθετε πότε υπάρχει.