12 Βασικά δωρεάν πρόσθετα σκίτσων
Καθώς το Sketch 44 εξέρχεται από τη beta, εξετάζουμε ένα από τα καλύτερα χαρακτηριστικά του Sketch: την τεράστια επιλογή των plug-ins ανοιχτού κώδικα.
Η κοινότητα Sketch υποστηρίζει άγρια και μπορείτε να βρείτε τόνους εκπληκτικών plug-ins που θα βελτιώσουν ριζικά τη ροή εργασίας σας. Σε αυτή την ανάρτηση θα καλύψω τα 12 καλύτερα σκετς σκίτσων που πρέπει να έχει κάθε σχεδιαστής.
1. Μέτρο σκίτσου
Μέτρο σκίτσου βοηθά τους σχεδιαστές να οργανώνουν και να περιγράφουν το έργο τους για τους προγραμματιστές, τους υπεύθυνους έργων και άλλα μέλη της ομάδας.
Αλλά αυτό είναι επίσης εξαιρετικά χρήσιμο για τους μοναχούς που σχεδιάζουν και κωδικοποιούν όλα τα έργα τους. Με το plugin "Μέτρο" μπορείτε να περιγράψετε στοιχεία που εμφανίζουν συγκεκριμένες διαστάσεις πλάτους / ύψους για να δείτε τις σωστές μετρήσεις με μια ματιά.
Αυτό περιλαμβάνει όλα τα στοιχεία σελίδας όπως τα κουμπιά, το κείμενο, τα εικονίδια και ακόμη και τα μεγάλα τμήματα του artboard.
Με το εργαλείο Sketch Measure μπορείτε να εξάγετε σελίδες σε HTML / CSS με στυλ σελίδας in-tact. Χορηγούνται υπάρχουν Εργαλεία της Adobe που μπορεί να το κάνει αυτό. Αλλά έχοντας όλες αυτές τις λειτουργίες στο Sketch κάνει τη δουλειά σας πολύ πιο εύκολη.
2. InVision Craft
Μια στιγμή πίσω η ομάδα InVision ανακοίνωσε μια νέα προσθήκη Σκάφος . Αλλά αυτό μοιάζει περισσότερο με μια σουίτα plugins όπου μπορείτε να πάρετε τους τόνους των πρόσθετων χαρακτηριστικών και συντομεύσεων.
Ένα παράδειγμα είναι το Προσθήκη δεδομένων που επιτρέπει στους σχεδιαστές να τραβούν κείμενο / δεδομένα απευθείας από δημόσια API στον ιστό. Με αυτόν τον τρόπο μπορείτε να συμπληρώσετε αυτόματα την εφαρμογή σας με πραγματικό περιεχόμενο και εικόνες εν κινήσει.
Οι προγραμματιστές της InVision ενημερώνουν συνεχώς το Craft με νέες δυνατότητες plugin για να το κάνουν ακόμα πιο πολύτιμο για τους σχεδιαστές. Και είπα ότι αυτό είναι εντελώς δωρεάν;
Μέχρι στιγμής η Craft έχει 6 βασικά χαρακτηριστικά προσθήκης, τα οποία αξίζει να προστεθούν στη ροή εργασίας του σχεδιασμού σας.
- Ελεύθερο χέρι - συνεργασία σε πραγματικό χρόνο στο Sketch
- Πρωτότυπο - δυναμικά πρωτότυπα υψηλής πιστότητας
- Συγχρονισμός - άμεσο συγχρονισμό μεταξύ πρωτοτύπων InVision & Sketch
- Δεδομένα - τραβήξτε πραγματικά δεδομένα από τον ιστό στο mockup σκίτσο σας
- Βιβλιοθήκη - Σχεδιασμός περιουσιακών στοιχείων στο σύννεφο που μοιράζονται με ολόκληρη την ομάδα σας
- Αντίγραφο - κλωνοποίηση UI με αστραπιαία ταχύτητα
Ρίξτε μια ματιά στο Ιστοσελίδα Craft και δείτε τι σκέφτεστε. Μόλις το δοκιμάσετε, δεν θα θελήσετε ποτέ να πάτε πίσω.
3. Εργαλείο εργαλείων σκίτσου
Κάθε χρήστης Sketch πρέπει να γνωρίζει το Εργαλείο σκίτσου . Είναι ένας εξαιρετικός διαχειριστής plugin που απλά κάνει ευκολότερη την εγκατάσταση / προσαρμογή των plugins.
Με αυτήν την εργαλειοθήκη μπορείτε να περιηγηθείτε σε εκατοντάδες plugins σκίτσου και να επιλέξετε ποια θέλετε να εγκαταστήσετε. Απλά κάντε κλικ σε αυτό που θέλετε και θα μεταφορτωθεί αυτόματα στον υπολογιστή σας, έτοιμο για χρήση.
Και η εργαλειοθήκη σκίτσων ενημερώνει αυτόματα τις προσθήκες για να τις διατηρεί ομαλά.
Από τεχνική άποψη, αυτό εξακολουθεί να είναι σε έκδοση beta και πάντα λαμβάνει νέες ενημερώσεις στο GitHub . Αλλά νομίζω ότι είναι αρκετά στερεό για να χρησιμοποιηθεί σε μια ροή εργασίας παραγωγής. Στην πραγματικότητα, θα υποστήριζα ότι μια καλή ροή εργασίας του Sketch δεν θα ήταν πλήρης χωρίς αυτόν τον απίστευτο διαχειριστή plugin.
4. Εξαγωγή στοιχείων ενεργητικού
Ένα από τα πιο λεπτομερή καθήκοντα ενός σχεδιαστή είναι η διάθεση πόρων και η ανταλλαγή τους με τους προγραμματιστές. Όλα τα μικρά εικονίδια, τα γραφικά, τα μοτίβα υποβάθρου, όλα αυτά πρέπει να εξάγονται (συνήθως με το χέρι).
ο Εξαγωγή στοιχείων περιουσιακών στοιχείων εξαγωγής κάνει αυτή τη διαδικασία μια αύρα. Απλώς σημειώστε ότι αυτό το βύσμα είναι ειδικά σχεδιασμένο για εφαρμογές για κινητά όπου οι σχεδιαστές πρέπει να εξάγουν στοιχεία περιήγησης Android / iOS. Αυτό περιλαμβάνει στοιχεία αμφιβληστροειδούς για μεγέθη οθόνης @ 2x και @ 3x.
Δεν έχω δει κάποια χαρακτηριστικά που σχετίζονται με το σχεδιασμό ιστοσελίδων αμφιβληστροειδούς, αλλά μπορείτε να δείτε το Sketch Exportor plugin επίσης. Αυτή τη στιγμή βρίσκεται σε έκδοση beta και πρόκειται να είναι μια βελτιωμένη έκδοση του πρωτοτύπου.
5. Γεννήτρια Περιεχομένου
Το plugin Craft που ανέφερα προηγουμένως προσφέρει γενιά περιεχομένου. Αλλά ίσως θέλετε κάτι πιο απλό σαν αυτό Γεννήτρια Περιεχομένου από τον Timur Carpeev.
Με αυτήν την εγκατάσταση μπορείτε να συμπληρώσετε αυτόματα πολλά στοιχεία Σκίτσο ταυτόχρονα με σχετικά δεδομένα όπως:
- Χρήστες του avatar
- Τα πρώτα και επώνυμα
- Εικονικό κείμενο παραγράφου
- Προσαρμοσμένες χορδές (geos, τιμές, αριθμοί κάρτας CC κ.λπ.)
Όλο το περιεχόμενο τραβιέται από βάσεις δεδομένων ανοιχτού κώδικα, όπως το Unsplash και το Uinames ώστε να μπορείτε να το χρησιμοποιήσετε σε πολλαπλά έργα, εμπορικά ή άλλως.
6. Λυγός
Το Photoshop έχει το δικό του πίνακα ενεργειών όπου μπορείτε να αυτοματοποιήσετε επαναλαμβανόμενες ενέργειες. Το Σκίτσο δεν έχει ένα πάνελ όπως αυτό, αλλά έχει το Λωρίδα plugin που είναι εντελώς δωρεάν και εξαιρετικά εύκολο να μάθει.
Αυτό είναι πολύ χρήσιμο για τη δημιουργία επαναλαμβανόμενων μοτίβων που αναλαμβάνουν ολόκληρη τη σελίδα. Οι σχεδιαστές γραφικών μπορεί να βρουν περισσότερη χρήση για αυτό το πρόσθετο από τους σχεδιαστές ιστοσελίδων, αλλά μπορούν να εξοικονομήσουν πολύ χρόνο με επαναλαμβανόμενα καθήκοντα κλιμάκωσης / διπλασιασμού.
Ρίξτε μια ματιά στο Αρχική σελίδα Looper για να δούμε τι μπορεί να κάνει. Μπορεί να μην είναι χρήσιμο για όλους, αλλά για εκείνους που μπορούν να το χρησιμοποιήσουν θα βρεθείτε εξοικονομώντας πολύ χρόνο.
7. Σκίτσο Iconfont
Σχεδιαστές Ιστού αγαπούν γραμματοσειρές εικονιδίων . Μεγάλα εικονίδια κάνουν το σχεδιασμό του UI πολύ πιο εύκολο και τα αρχεία γραμματοσειρών είναι γενικά μικρότερα από τις εικόνες.
ο Sketch Iconfont plugin είναι μια ολοκληρωμένη σουίτα διαχείρισης για την αποθήκευση, τη διαλογή και την εξαγωγή γραμματοσειρών εικονιδίων δεξιά στο Sketch. Από προεπιλογή, το πρόσθετο έρχεται κενό, επομένως θα χρειαστεί να κάνετε λήψη γραμματοσειρών εικονιδίων τοπικά για να τα χρησιμοποιήσετε.
Αυτό όμως σας δίνει πλήρη πρόσβαση στην εργασία με τυχόν εικονικές γραμματοσειρές που βρίσκετε στο διαδίκτυο. Υπάρχει πραγματικά α πακέτο δέσμης γραμματοσειρών ειδικά για αυτό το plugin αν θέλετε να γεμίσετε γρήγορα το φάκελο iconfont. Και μπορείτε πάντα να καθαρίζετε τον ιστό για περισσότερες όσο περνάει ο καιρός.
Σας προτείνω απολύτως ένα αντίγραφο αυτού του plugin. Οι γραμματοσειρές Icon είναι εδώ για να μείνουν και είναι πολύτιμες για τους σύγχρονους ιστοτόπους.
8. Απογραφή στυλ
Κάθε φορά που ξεκινάτε ένα νέο αρχείο σκίτσων, πρέπει είτε να κάνετε ξανά στυλ από το μηδέν είτε πρέπει να αντιγράψετε / επικολλήσετε στυλ από προηγούμενες μακέτες.
Με την Προσθήκη αποθέματος στυλ μπορείτε να παρακάμψετε όλη αυτή την πρόσθετη εργασία. Μερικά μόνο κλικ εισάγουν όλα τα προηγούμενα σας στυλ απευθείας στο νέο σας έγγραφο σκίτσου για εύκολη πρόσβαση.
Αυτά τα στυλ περιλαμβάνουν χρώματα, στυλ κειμένου και σύμβολα, καθώς και στυλ επιπέδων για ορισμένα στοιχεία.
Αυτό το plugin σπάνια ενημερώνεται, αλλά το συστήνω για τη συγχώνευση παρόμοιων mockups. Μπορεί επίσης να δοκιμάσετε το Εργαλείο παλέτας σκίτσων για την αποθήκευση και εισαγωγή χρωμάτων.
9. Pixel Perfecter
Κάθε ψηφιακός σχεδιαστής υπερηφανεύεται για τέλεια pixel-mockups. Αυτό το έργο δεν είναι δύσκολο, αλλά απαιτεί κάθε στοιχείο σχεδίασης να είναι τέλεια ευθυγραμμισμένο με το πλέγμα, χωρίς να παραμένουν επικαλύψεις ή ατέλειες.
Αν θέλετε ποτέ να ελέγξετε την εργασία σας πριν από την εξαγωγή, μπορείτε να εκτελέσετε Pixel Perfecter . Αυτό το πολύ μικρό plugin ελέγχει όλα τα στοιχεία του αρχείου σας για να δείτε εάν τυχόν pixel υπερχειλίσει τις παραδοσιακές θέσεις συντεταγμένων Χ / Υ δημιουργώντας ατελείωτα εικονοστοιχεία.
Σημειώστε ότι αυτό δεν θα διορθώσει αυτόματα αυτές τις τιμές μετατόπισης εικονοστοιχείων. Θα βρει μόνο το (τα) στρώμα (τα) που προκαλεί ζητήματα και τον επισημαίνει ώστε να μπορείτε να πάτε μέσα και να τα διορθώσετε μόνοι σας. Ακόμα σώζει πολύ χρόνο ελέγχοντας κάθε στρώμα με μη αυτόματο τρόπο.
10. Δυναμικό κουμπί
Το αρχικό δυναμικό πρόσθετο κουμπί εγκαταλείφθηκε κάπως το 2015, αλλά το νεότερο Δυναμικό κουμπί το plugin είναι ακόμη καλύτερο και συμβατό με το Sketch 3.5+.
Προσθέτει αυτόματα τα στυλ πληκτρολόγησης και κουμπιών σε οποιοδήποτε στρώμα κειμένου που δημιουργείτε και το συμπλήρωμα είναι δυναμικό, ώστε να ενημερώνεται ανεξάρτητα από το μέγεθος του κειμένου. Αυτό είναι άκρως χρήσιμο για τους σχεδιαστές του UI που κάνουν συνεχώς αλλαγές στα mockups τους.
Αυτό μπορεί επίσης να χρησιμοποιηθεί για εφαρμογές για κινητά, όπου τα κουμπιά ακολουθούν γενικά ένα σταθερό μέγεθος / λόγο. Δεν είναι το πιο λαμπερό plugin Sketch αλλά το κάνει καλά.
11. Compo
Αν θέλετε μια γεννήτρια κουμπιών μαζί με κάποια επιπλέον χαρακτηριστικά, τότε το Compo plugin αξίζει τον έλεγχο.
Ο δημιουργός της Compo πήρε την ιδέα αφού χρησιμοποίησε το plugin για δυναμικά κουμπιά για λίγο, τελικά θέλοντας κάτι λίγο πιο γρήγορα. Το Compo δημιουργεί αυτόματα το σωστό μέγεθος του κουμπιού και το μέγεθος του κειμένου για να ταιριάζει με τις ακριβείς προδιαγραφές. Ένα κλικ και έχετε ένα λειτουργικό στοιχείο Σκίτσο που έχει αυτόματο μέγεθος και θέση σωστά.
Κανονικά, όταν δημιουργείτε ένα κουμπί και αλλάζετε το κείμενο, αυτό επηρεάζει μόνο το επίπεδο κειμένου. Έτσι, το υποκείμενο κουμπί θα είναι πολύ μικρό. Το Compo αλλάζει αυτόματα το κουμπί και το κείμενο σαν να είναι ένα στοιχείο.
Μπορείτε να βρείτε τόνους demos στο GitHub repo μαζί με ορισμένους οδηγούς χρήσης για να ξεκινήσετε.
12. CSSketch
Τελευταίο αλλά σίγουρα όχι λιγότερο σημαντικό είναι το CSSketch συνδέω. Αυτό είναι πολύ χρήσιμο για συνδυασμούς προγραμματιστών + προγραμματιστών που θέλουν άμεση πρόσβαση στον κώδικα CSS για όλα τα στυλ που δημιουργούν.
Κάθε σελίδα που σχεδιάζετε μπορεί να εκτελεστεί μέσω αυτού του plugin για να εξάγει ένα πλήρες φύλλο στυλ με όλα τα στοιχεία ενεργητικού που υπολογίζονται. Αλλά επειδή αυτό είναι αυτοματοποιημένο, δεν μπορείτε να περιμένετε κωδικό ποιότητας A ++.
Προτιμώ ακόμα να κωδικοποιήσω το CSS με το χέρι, αλλά αυτό το προσθετικό προσφέρει τουλάχιστον ένα σημείο εκκίνησης για μη τεχνικούς σχεδιαστές ή προγραμματιστές που θέλουν να σώσουν λίγο χρόνο.
