Η έκδοση 47 του Sketch είδε την πολυαναμενόμενη εισαγωγή των Βιβλιοθηκών, η οποία σας επιτρέπει να συγχρονίζετε τα σύμβολά σας παγκοσμίως σε όλα τα αρχεία Sketch. Τα συστήματα σχεδιασμού κερδίζουν ιδιαίτερα από ένα τέτοιο χαρακτηριστικό - είναι σε θέση να αποκτήσουν έναν προσπελάσιμο τρόπο να φέρνουν τα περιουσιακά στοιχεία του συστήματος σχεδιασμού εξασφαλίζοντας παράλληλα ότι είναι ενημερωμένοι για όλους είναι το όνειρο ενός σχεδιαστή να γίνει πραγματικότητα. Αφού δοκιμάσαμε τα πάντα από το InVision's Craft για να δημιουργήσουμε το δικό μας Plug Sketch, ήμασταν στην ευχάριστη θέση να το έχουμε τελικά στο Sketch ως εγγενές χαρακτηριστικό. Εδώ είναι μερικές από τις αποφάσεις στις οποίες φτάσαμε και μαθήματα που μάθαμε καθώς βάζουμε το σύστημα σχεδιασμού μας σε μια Βιβλιοθήκη.

Στόχοι της βιβλιοθήκης μας

Για να κατανοήσουμε κάποιες από τις σκέψεις που πήραμε στις αποφάσεις μας, εδώ είναι μια σύντομη επισκόπηση των στόχων με τη Βιβλιοθήκη μας:

  1. Μια one-stop shop για τους σχεδιαστές μας. Μόνο ένα αρχείο θα μπορούσαν να τραβήξουν και να έχουν τα τελευταία που το σχεδιαστικό σύστημα μας έχει να προσφέρει.
  2. Όσο πλησιάζει η αντιστοιχία 1: 1 όσο το δυνατόν με τα κωδικοποιημένα στοιχεία μας, ανεξάρτητα από την πλατφόρμα, τόσο οπτικά όσο και δομικά.
  3. Εύκολο στη συντήρηση. Οι ενημερώσεις ή οι προσθήκες εξαρτημάτων θα πρέπει να είναι απλές, ώστε οι σχεδιαστές να έχουν το τελευταίο χωρίς μεγάλη αναμονή.

Ένθετο εναντίον ενιαίου

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

Η άλλη επιλογή είναι να βάλετε τα πάντα σε ένα αρχείο. Δεν παίρνετε τον καθαρό διαχωρισμό ότι έχετε ξεχωριστά αρχεία Sketch που σας δίνουν, αλλά για τους σκοπούς μας, αυτό τελικά κατέληξε να λειτουργεί καλύτερα γιατί:

  • Η συντήρηση είναι πιο εύκολη, αφού χρειάζεται να έχουμε μόνο ένα αρχείο ανοιχτό όταν πραγματοποιούμε ενημερώσεις στη Βιβλιοθήκη (Στόχος # 3).
  • Απαιτεί από τους σχεδιαστές μας να προσθέσουν μία Βιβλιοθήκη (Στόχος # 1).

Χρήση σελίδων για την οργάνωση

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

Η διατήρηση των διαχωρισμένων από σελίδες σελίδων καθιστά εύκολη τη συντήρηση μιας μεγάλης Βιβλιοθήκης.

Τα βασικά μέρη του συστήματος σχεδιασμού (Χρώμα, Τύπος, Εικόνες) βρίσκονται στην κορυφή και στη συνέχεια παρατίθενται απλά τα στοιχεία μας αλφαβητικά. Θα δείτε στο κάτω μέρος δύο πρόσθετες σελίδες. Η δοκιμαστική σελίδα, εάν δεν το είχατε μαντέψει, είναι μια σελίδα όπου μπορούμε γρήγορα να δοκιμάσουμε τυχόν νέα σύμβολα που προσθέτουμε. Η προβολή βιβλιοθήκης χρησιμοποιεί το freebie του Sketch Hunt για να δώσει στη βιβλιοθήκη μας μια προσαρμοσμένη εικόνα προεπισκόπησης όταν προσθέτετε τη βιβλιοθήκη στις προτιμήσεις του Sketch (αυτό υποστηρίζεται τώρα από προεπιλογή στο Sketch από v48).

Ονομασία συμβόλων

Τα στοιχεία στο μενού Σύμβολα μπορούν να ομαδοποιηθούν ανάλογα με το πώς θα ονομάσετε σύμβολα. Διαχωρίζοντας τα πράγματα με / τοποθετεί σε μια νέα ομάδα μενού. Χρησιμοποιώντας τον οργανισμό που περιγράψαμε παραπάνω και γνωρίζοντας πώς τα πράγματα ομαδοποιούνται στην πλευρά των συστατικών, πήγαμε με αυτό που αισθανόταν πιο λογικό. για κάτι σαν κουμπιά, που μοιάζει με αυτό:

Το οποίο δημιουργεί ένα μενού που μοιάζει με αυτό (επεξεργασμένο λίγο για να είναι πιο εύκολο να το δει):

Προσθήκη χρώματος

Προς το παρόν, το Sketch δεν έχει τρόπο να μοιράζονται χρώματα με τη λειτουργία Βιβλιοθήκες. Σίγουρα, υπάρχουν plugins που σας επιτρέπουν να δημιουργήσετε κοινόχρηστες παλέτες, αλλά αυτό έρχεται σε αντίθεση με τους στόχους μας για μια one-stop shop και εύκολη συντηρησιμότητα. Αντ 'αυτού δημιουργήσαμε τα χρώματα χρησιμοποιώντας απλά παλιά ορθογώνια.

Χρησιμοποιούμε τα σύμβολα χρώματος ως το κύριο δομικό στοιχείο για τα άλλα συστατικά μας.

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

Τα χρώματα του κύριου επιπέδου (όπως μάρκα, βοηθητικά προγράμματα, χρώματα φόντου) περιέχονται στη σελίδα Χρώματα και ομαδοποιούνται ανάλογα. Τα χρώματα που είναι ειδικά για ένα στοιχείο πηγαίνουν στη σελίδα αυτού του εξαρτήματος για να διατηρήσουν αυτή την ευκολία συντήρησης. Μπορούμε ακόμα να δημιουργήσουμε σύμβολα ορθογωνίου που αναφέρουν τα χρώματα κύριου επιπέδου εάν είναι απαραίτητο, γεγονός που καθιστά τις ενημερώσεις αργότερα πολύ πιο γρήγορα.

Αυτά τα χρώματα χρησιμότητας μπορούν να μεταφερθούν σε οποιαδήποτε άλλη σελίδα συνιστωσών ανάλογα με τις ανάγκες - κουμπιά, τοστ, εικονίδια κ.λπ.

Το τελευταίο κομμάτι του καθαρισμού του σπιτιού που έπρεπε να κάνουμε ήταν να σιγουρευτούμε όταν ανοίξατε μια υπερχρήση χρώματος, δεν τραβήξατε με μια τεράστια λίστα χρωμάτων. Για να το διορθώσουμε, απλά διαχωρίζαμε αυτά τα ορθογώνια χρώματα σε βήματα των 10, αφού η ομαδοποίηση των αντικαταστάσεων συμβόλων βασίζεται στο μέγεθος. Για παράδειγμα, τα χρώματα μάρκας είναι 20px σε 20px, τα χρώματα χρησιμότητας είναι 30px by 30px, και ούτω καθεξής. Τώρα, όταν ένας σχεδιαστής θέλει να αλλάξει σε διαφορετικό χρώμα εικονιδίων, βλέπει μόνο τα χρώματα των εικονιδίων και όχι κάθε άλλο χρώμα στη Βιβλιοθήκη.

Προσθήκη εικονιδίων

Τα εικονίδια αντιμετωπίστηκαν με τρόπο παρόμοιο με τα χρώματα κατά το ότι τα ομαδοποιήσαμε λογικά από τη χρήση τους (πλοήγηση, αθλητισμός, τύποι αρχείων κ.λπ.). Για να επιτρέψουμε στους σχεδιαστές να αλλάζουν μεταξύ των διαφόρων χρωμάτων που έχουμε για τα εικονίδια, προσθέσαμε απλά αυτά τα χρώματα ως μάσκες.

Κάθε εικονίδιο περιλαμβάνει ένα χρώμα από τη λίστα χρωμάτων των εικονιδίων μας.

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

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

Το ίδιο σύμβολο, απλά αναπροσαρμόστηκε.

Προσθήκη τύπου

Αυτός είναι ένας άλλος τομέας όπου η λειτουργία των Βιβλιοθηκών δεν ανταποκρίνεται στις ανάγκες μας. Η επεξεργασία του κειμένου στον πίνακα "Παράκαμψη" μπορεί να είναι λίγο πόνο, λαμβάνοντας υπόψη πόσο μικρό είναι το πλαίσιο κειμένου. Απλά κάντε τα αρχικά σας Όπως τα χρώματα, υπάρχουν Sketch Plugins που μπορούν να χειριστούν την εισαγωγή του τύπου στα έγγραφα σκίτσων σας ως Στυλ κειμένου, αλλά αντιβαίνουν στους εύκολους στη συντήρησή μας στόχους μας.

Τελικά αποφασίσαμε να δημιουργήσουμε σύμβολα ούτως ή άλλως. Οι σχεδιαστές μπορούν είτε να χρησιμοποιήσουν το πλαίσιο κειμένου στον πίνακα "Απαλοιφές" ή απλά να αποσπάσουν από το σύμβολο και να επεξεργαστούν το κείμενο όπως συνήθως. Και, όπως στο Sketch v48, μπορείτε να μεγεθύνετε το πλαίσιο κειμένου στον πίνακα Overrides, αυξάνοντας την ποσότητα του κειμένου στο σύμβολο από προεπιλογή.

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

Υπάρχει ένα τελευταίο πράγμα που πρέπει να αντιμετωπίσουμε με το κείμενο και αυτά είναι τα χρώματα. Με το κείμενό μας, έχει ήδη ρυθμιστεί σωστά στο στοιχείο. Αλλά τι γίνεται με ένα διαφορετικό περιβάλλον, θέμα, ή πράγματα όπως σφάλματα; Γι 'αυτό, βασίζουμε και πάλι το μέγεθος του συμβόλου για να καθορίσουμε τι εμφανίζεται στις επικρίσεις. Για κάτι σαν ετικέτα φόρμας, εξασφαλίζουμε ότι τα συγκεκριμένα σύμβολα κειμένου έχουν το ίδιο μέγεθος.

Διαφορετικές έγχρωμες ετικέτες με το ίδιο μέγεθος, διευκολύνουν τους σχεδιαστές μας να επιλέξουν μεταξύ των επιτρεπόμενων χρωμάτων για κάτι σαν ετικέτες μορφών.

Προσθήκη στοιχείων

Αφού δημιούργησε όλα τα σκληρά πράγματα, κάνοντας κουμπιά, modals, τοστ κλπ., Ήταν πραγματικά πολύ απλό. Για κάτι σαν Modals, φέρουμε ακριβώς το σωστό χρώμα φόντου, προσθέτουμε ένα σύμβολο τύπου με ένα καλό προεπιλεγμένο μήνυμα και τελικά πέφτουμε στο εικονίδιο Κλείσιμο. Σε αυτό το σημείο, παίρνουμε πολύ κοντά στο να κάνουμε σύμβολα όπως το πώς θα κάναμε με το React.

Και αυτό είναι σκόπιμο, αφού θέλουμε τα σύμβολά μας να είναι όσο το δυνατόν πιο κοντά σε ένα αγώνα 1: 1 των συνιστωσών μας. Για το σκοπό αυτό, ονομάζουμε το σύμβολο παρακάμπτοντας ακριβώς τον τρόπο με τον οποίο ονομάζουμε τα στηρίγματα των συστατικών μας στον κώδικα. Για να καταστήσουμε ακόμη πιο ξεκάθαρο στους σχεδιαστές μας αυτά τα στηρίγματα εξαρτημάτων, διατηρούμε τα ονόματα με πεζά. Οτιδήποτε δεν είναι μέρος του κώδικα του εξαρτήματος (όπως μπλοκ padding που θα συζητήσουμε παρακάτω), εμείς τίτλο υπόθεση. Η διατήρηση της αντιστοίχισης συμβόλων που ονομάζεται με τον ίδιο τρόπο με τα στηρίγματα συνιστωσών είναι ένας πολύ καλός τρόπος για να γεφυρωθεί αυτή η συζήτηση σχεδιαστή / προγραμματιστή όταν έρχεται χρόνος να οικοδομηθούν οι διεπαφές.

Όταν οι σχεδιαστές και οι προγραμματιστές μιλούν, θα πρέπει να χρησιμοποιούν την ίδια γλώσσα. Η αντιστοίχιση επικάλυψης σκίτσων ταιριάζει με την ονομασία στα πραγματικά κωδικοποιημένα στοιχεία.

ΣΥΜΒΟΥΛΕΣ

Ακολουθούν μερικά άλλα πράγματα που μάθαμε καθώς δημιουργούσαμε εξαρτήματα που μπορεί να σας βοηθήσουν:

  • Κάνε τα πράγματα ευκολότερα για τον εαυτό σου και κατεβάστε το plugin του Organizer Symbol Sketch. Μπορείτε να οργανώσετε τα σύμβονά σας αλφαβητικά και να ομαδοποιήσετε τα πράγματα με βάση το όνομα. Επιπλέον, θα διασκεδάσει ακόμη και τα πράγματα όπως θέλετε. Ένα μεγάλο χρονικό διάστημα.
  • Η σειρά των στρωμάτων σας στα σύμβολά σας έχει σημασία. Ο τρόπος με τον οποίο έχουν παραγγελθεί στο σύμβολο είναι ο τρόπος με τον οποίο θα παραγγελθούν στον πίνακα "Απαγορεύεται".
  • Αξίζει να επαναλάβετε εδώ για την εκατομμυριακή φορά που το μέγεθος των στρωμάτων σας έχει σημασία. Θυμηθείτε: έτσι μπορούν να ομαδοποιηθούν πράγματα όπως φόντο, τύπος, εικονίδια κ.λπ.
  • Πιθανότατα θα έχετε σύμβολα που οι σχεδιαστές σας δεν χρειάζονται πραγματικά, αλλά είναι σημαντικοί για το μακιγιάζ των εξαρτημάτων σας. Αποφασίσαμε να δημιουργήσουμε ένα στοιχείο μενού _Building Blocks (η υπογράμμιση το κρατά αγκυρωμένο στο κάτω μέρος) που λειτουργεί λίγο ως συρτάρι σκουπιδιών. Αυτά τα στοιχεία παραμένουν στη σελίδα του αντίστοιχου στοιχείου, αλλά ονομάζονται με το πρόθεμα _Building Blocks για να διασφαλιστεί ότι όλα θα πάνε κάτω από αυτό το στοιχείο του μενού.
Τα προρυθμιστικά στοιχεία που δεν θέλετε να εμφανίζονται, όπως συμβαίνει με τα
  • Το Σκίτσο δεν χειρίζεται σήμερα το ένθετο σύμβολο αλλάζει το μέγεθος του. Για να το πετύχουμε αυτό, συνήθως δημιουργούμε αυτό που ονομάζουμε "τετράγωνα αποστάσεως". Ένα παράδειγμα όπου αυτό μπορεί να είναι απαραίτητο είναι κουμπιά. ρίχνετε σε ένα κουμπί, δώστε περισσότερο κείμενο από την προεπιλογή και ξαφνικά το μαξιλάρι είναι από το χτύπημα. Για αυτό, έχουμε ένα σύμβολο αποκωδικοποιήσεως εμφάνισης / απόκρυψης που πέφτει σε ημιδιαφανή "μπλοκ". Ο σχεδιαστής πρέπει τώρα απλώς να αλλάξει το μέγεθος του κουμπιού μέχρι να ευθυγραμμιστούν τα μπλοκ.
Αυτά τα μπλοκ μπορούν να προστεθούν σε οποιοδήποτε στοιχείο για να μειώσουν την εικασία όταν πρόκειται για αλλαγή μεγέθους.

Κάνοντας αυτό διαθέσιμο

Αφού ολοκληρώθηκε η βιβλιοθήκη, χρειαζόμασταν έναν τρόπο να σιγουρευτούμε ότι θα παρέμενε πάντα ενημερωμένος για τους σχεδιαστές μας. Χρησιμοποιούμε το Google Drive, γι 'αυτό ήταν το προφανές μέρος για να το θέσουμε. Έχουμε κλειδώσει την πρόσβαση στο αρχείο της ίδιας της βιβλιοθήκης για να διασφαλίσουμε ότι δεν έγιναν περιττές διαγραφές ή προσθήκες και στη συνέχεια έγραψα έναν οδηγό Getting Started.

Ένα χαρακτηριστικό των οδηγιών μας για Ξεκινώντας είναι οδηγίες για την προετοιμασία με το Runner Sketch. Ενώ αυτό συμβαίνει λίγο ενάντια στο στόχο μας να είμαστε ένα one-stop shop, διαπιστώνουμε ότι τα πλεονεκτήματα από τη χρήση αυτού του plugin πηγαίνουν πολύ πέρα ​​από τη χρήση του μόνο με τη βιβλιοθήκη μας - είναι ένα πραγματικά ανεκτίμητο εργαλείο.

Με το Sketch Runner, μπορείτε να εισάγετε γρήγορα σύμβολα πληκτρολογώντας το όνομά τους, το οποίο για πολλούς ανθρώπους είναι αρκετά πιο γρήγορα από το να περάσετε από τα μενού. Σας συνιστούσαμε στους σχεδιαστές να απενεργοποιήσουν την ασαφή αναζήτηση στις επιλογές και να προσθέσουν τα "Blocks Building" στο παραμελημένο πρόθεμα στις Ρυθμίσεις.

Ακολουθούν οι συνιστώμενες ρυθμίσεις για το Runner.

Από την κυκλοφορία, έχουμε λάβει πολλά σχόλια σχετικά με το χρόνο που έχει αποθηκευτεί με τη χρήση της βιβλιοθήκης. Προσβλέπουμε στο Sketch να συνεχίσει να κάνει βελτιώσεις στο μέλλον για να το κάνει ακόμα πιο εντυπωσιακό εργαλείο.