Σχεδιαστικά Συστήματα στο GitHub

Τα συστήματα σχεδιασμού έχουν γίνει πυρήνα στον τρόπο με τον οποίο σχεδιάζουμε και κατασκευάζουμε στο GitHub. Από το 2011, οι σχεδιαστές της GitHub έχουν τεκμηριώσει τα μοτίβα του UI και κοινό κοινό στυλ. Το 2012, το CSS και άλλα περιουσιακά στοιχεία συσκευάστηκαν σε Ruby Gem για χρήση στις ιστοσελίδες GitHub - το πακέτο αυτό ονομάστηκε Primer. Ο Primer συνέχισε να χρησιμοποιείται εσωτερικά για χρόνια πριν τελικά έχει το CSS και τα συνοδευτικά του έγγραφα ανοιχτά ως Primer CSS. Το 2016 δημιουργήθηκε η ομάδα συστημάτων σχεδιασμού με τους πρώτους υπαλλήλους πλήρους απασχόλησης. Αυτή η ανάρτηση μοιράζεται ένα σύντομο ιστορικό για το πώς αυξήθηκε η ομάδα, για το τι δουλεύουμε και για το επόμενο.

Ξεκινώντας από χλόη-ρίζες

Οι σχεδιαστές προϊόντων και οι σχεδιαστές ιστοσελίδων στο GitHub συνεισφέρουν τον κώδικα παραγωγής και συχνά βοηθούν στην υλοποίηση των δικών τους σχεδίων. Μερικοί σχεδιαστές μπαίνουν βαθύτερα στη στοίβα, αλλά κάθε σχεδιαστής προϊόντων και web γράφει το CSS. Αυτό σημαίνει ότι οι σχεδιαστές είναι οι κύριοι χρήστες του Primer, του συστήματος σχεδιασμού μας, και είναι συχνά οι πρώτοι που παρατηρούν πότε υπάρχουν προβλήματα με τα στυλ ή τα κενά στην τεκμηρίωση.

Αρχική ιστοσελίδα τεκμηρίωσης το 2015.

Όταν άρχισα να δουλεύω στο GitHub στα τέλη του 2015, παρατήρησα ότι υπήρχαν πολλά μη καταγεγραμμένα σχέδια, έπρεπε να γράψω πολλά νέα CSS για την υλοποίηση σχεδίων και ότι δεν υπήρχαν προφανή υποκείμενα συστήματα που να συνδέουν όλα τα κομμάτια μαζί. Ήξερα ότι τα πράγματα θα μπορούσαν να είναι καλύτερα και ήμουν ενθουσιασμένος για την πραγματοποίηση βελτιώσεων - γρήγορα διαπίστωσα ότι δεν ήμουν ο μόνος που αισθάνθηκε αυτόν τον τρόπο. Υπήρχαν πολλοί λαοί που εργάζονταν στις προσπάθειες βελτίωσης των πραγμάτων, αλλά δεν συνεργάζονταν. Με την υποστήριξη από τους σχεδιαστές, μια ομάδα από εμάς άρχισε να συναντάμε τακτικά για να συζητάμε για τις βελτιώσεις στο Primer και να δίνουμε προτεραιότητα στο έργο - αυτό ήταν οι αρχές της ομάδας συστημάτων σχεδιασμού.

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

Εμφάνιση της αξίας μας

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

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

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

Πρόωρη έκδοση του νέου εσωτερικού οδηγού στυλ το 2016.

Αντιμετωπίζοντας τα μεγαλύτερα σημεία πόνου μας και εργαζόμενοι σε καθήκοντα που προσέφεραν υψηλή αξία στους σχεδιαστές και προγραμματιστές του GitHub, μας βοήθησε να αρχίσουμε να αναγνωρίζουμε και να αποδείξουμε την αξία των συστημάτων σχεδιασμού. Μέχρι το τέλος του 2016 είχαμε μια νέα εσωτερική περιοχή τεκμηρίωση με πολύ περισσότερη κάλυψη, θα είχε βελτιωθεί Primer ώστε να είναι πιο εύκολο να πρωτότυπο και να εφαρμόσουν σχέδια χωρίς να γράψετε έναν τόνο των νέων CSS, και είχαμε την πρώτη πλήρη απασχόληση ομάδα συστήματα σχεδιασμού μας μέλη-τον εαυτό μου και τον Jon Rohan.

Αυξάνοντας τους πόνους

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

Αποφασίσαμε να δημιουργήσουμε πολλές νέες διαδικασίες:

  1. Κοινοποιήστε τις ενημερώσεις ευρύτερα μέσω των δημοσιεύσεων της ομάδας: διαθέτουμε ένα εσωτερικό εργαλείο που ονομάζεται "Ομάδα" το οποίο το προσωπικό του GitHub συνήθως χρησιμοποιεί για να ανακοινώσει σημαντικές εσωτερικές ενημερώσεις, νέα πλοία χαρακτηριστικών και νέες προσλήψεις. Ξεκινήσαμε να χρησιμοποιούμε τις αναρτήσεις σε ομάδες για να ενημερώσουμε τα άτομα σχετικά με τις νέες ενημερώσεις του Primer και του οδηγού στυλ, για να δώσουμε στους ανθρώπους ένα heads up όταν έστειλα μεγάλες αλλαγές κώδικα και μοιραστείτε περισσότερες πληροφορίες πίσω από τις αποφάσεις μας.
  2. Κάντε πιο προφανής την κατάσταση των στυλ: με τον επαναπροσδιορισμό πολλών από τα στυλ μας τα πράγματα αλλάζονταν διαρκώς, έπρεπε να επικοινωνούμε σαφώς έτσι ώστε οι άνθρωποι να γνωρίζουν τι είναι ασφαλές στη χρήση. Για να καταστήσουμε σαφή την κατάσταση, προσθέσαμε ένα Changelog που ενημερώνεται με κάθε έκδοση και προσθέσαμε ετικέτες κατάστασης σε μια σελίδα τεκμηρίωσης ενοτήτων. Παρόμοια με τις ετικέτες κατάστασης στο σύστημα Lightning Design System, οι δικές μας είναι: σταθερές, νέες κυκλοφορίες, αναθεωρήσεις, πειραματικές και απόρριψη.
  3. Εισαγωγή περιστροφής εφημερίας: Οι περισσότερες ομάδες στο GitHub έχουν μια εφημερία εφημερίας που καλούμε First Responder. Όποιος είναι σε εφημερία είναι υπεύθυνος για θέματα κατηγοριοποίησης και απάντηση σε αιτήματα για βοήθεια ή αναθεώρηση κώδικα. Έχοντας κάποιον σε επαφή σημαίνει ότι η υπόλοιπη ομάδα μπορεί να μείνει επικεντρωμένη σε βαθιά δουλειά.
Ένα εύχρηστο σενάριο Hubot στο Slack μας επιτρέπει να τυπώσουμε μια λίστα με στοιχεία που χρειάζονται προσοχή από τον πρώτο ανταποκριτή.

Μεγιστοποίηση των επιπτώσεών μας

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

Βελτίωση της ροής εργασίας απελευθέρωσης

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

Η λύση μας ήταν να μεταφέρουμε όλες τις αποθήκες μονάδων μας σε ένα μονοπώλιο και να χρησιμοποιήσουμε τη Lerna για να μας βοηθήσετε να διαχειριστούμε τις ενημερώσεις έκδοσης και να δημοσιεύσουμε νέες κυκλοφορίες. Μετά τις αρχικές ενημερώσεις, θα επαναληφθεί στις δημοσιεύουν σενάρια μας χρησιμοποιώντας Travis CI για τη δημοσίευση αυτόματα εκδόσεις άλφα στην έλξη των αιτήσεων, αυτό σημαίνει ότι κάθε φορά που κάποιος ανοίγει ένα αίτημα έλξης ή ωθεί προς τα πάνω τις αλλαγές, μπορούν να δοκιμάσουν τις αλλαγές τους, με την εγκατάσταση της απελευθέρωσης άλφα τους έργο. Αυτό είναι χρήσιμο για τη δοκιμή των αλλαγών στο GitHub.com πριν από την αποστολή της νέας έκδοσης.

Χρησιμοποιώντας το Travis CI, οι νέες εκδόσεις άλφα δημοσιεύονται σε npm όταν κάποιος κάνει νέα αιτήματα έλξης ή ωθεί τις αλλαγές.

Να πάρει ρομπότ για να κάνει τη δουλειά

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

Servbot σχολιάζοντας ένα αίτημα έλξης.

Συνεχίζουμε να προσέχουμε επαναλαμβανόμενες διαδικασίες και πώς μπορούμε να τις βελτιώσουμε και να αυτοματοποιήσουμε. Φέτος ενημερώσαμε τη δουλειά μας για τη δημοσίευση του Octicons και χρησιμοποιούσαμε το ανοιχτό προφίλ του GitHub, Probot, με το API του Figma και το Travis CI για την αυτοματοποίηση τμημάτων της ροής εργασίας. Μπορείτε να διαβάσετε περισσότερα σχετικά με αυτό στο blog του GitHub.

Ωρες γραφείου

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

Κάνουμε τηλεφωνικές κλήσεις μέσω του Slack έτσι ώστε να είναι ορατό σε οποιονδήποτε στο κανάλι. Αν ξεχάσουμε, το slackbot μας θυμίζει!

Κλιμάκωση της ομάδας

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

Το 2017 προσλήφθηκε ένας νέος Σχεδιαστής Συστημάτων, Shawn. Ο Shawn ήρθε σε μας από τα αμερικανικά πρότυπα ιστού. Έχοντας εμπειρία στο σχεδιασμό σχετικών ρόλων και συστημάτων σχεδιασμού στο παρελθόν, είναι σε θέση να λάβει αποφάσεις ανάπτυξης με σχεδιασμό.

Φέτος (2018) προσλάβαμε τον πρώτο μας μηχανικό πλήρους απασχόλησης, Emily. Προηγουμένως εργάστηκε στο front-end στο Buffer και συνέβαλε στη βιβλιοθήκη συστατικών τους. Η Emily έχει εμπειρία με το React.js και την προσβασιμότητα που είναι σημαντική για την ομάδα μας και τα τρέχοντα έργα.

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

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

Κλιμάκωση

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

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

Εξέλιξη της κλίμακας

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

Μερικές φορές οι συναντήσεις ομάδας είναι ακόμα πιο διασκεδαστικές όταν ενταχθούν γάτες και χορευτικοί συνάδελφοι!

Τι έπεται

Κάθε χρόνο θέτουμε στόχους, η ακόλουθη λίστα δεν καλύπτει τα πάντα, αλλά εδώ είναι τα κύρια έργα στα οποία εστιάζουμε το 2018:

Εκσυγχρονισμός της στοίβας στο μπροστινό μέρος

Το GitHub.com είναι μια εφαρμογή Ruby on Rails και η πηγή της αλήθειας για το σύστημα σχεδιασμού μας μέχρι στιγμής ήταν ο Sass. Αυτό σημαίνει ότι οι άνθρωποι πρέπει να κάνουν πολλές αποφάσεις σχεδιασμού κατά την κατασκευή του UI και να γράψουν πολλά σημάδια.

Αντί να διαχωρίζουμε τις ανησυχίες από τις γλώσσες (όπως HTML, CSS και JavaScript), εργαζόμαστε για ένα μοντέλο διαχωρισμού ανησυχιών σε επίπεδο συνιστωσών. Για να το επιτύχουμε, το μεγαλύτερο έργο μας φέτος είναι η οικοδόμηση μιας βιβλιοθήκης συστατικών στοιχείων με το React.js. Είμαστε βήτα αυτή τη στιγμή, αλλά θα ανοίξουμε το έργο μόλις δημιουργήσουμε μια σταθερή έκδοση v1. Πολλές ομάδες στο GitHub χρησιμοποιούν ήδη το React. θα επικεντρωθούμε στην κατοχή των εν λόγω εφαρμογών που καταναλώνουν τη βιβλιοθήκη των συνιστωσών μας καθώς και στην εξεύρεση τρόπων συνεργασίας με τα στοιχεία της εφαρμογής GitHub.com Rails. Αυτή η εργασία πραγματοποιείται σε συνεργασία με την εκπληκτική ομάδα εφαρμογών μας App Systems, η οποία έχει ήδη προσθέσει προσαρμοσμένα στοιχεία για να διευκολύνει την εφαρμογή κοινών συμπεριφορών JavaScript.

Το sandbox από τη βιβλιοθήκη των συνιστωσών αντιδραστήρων εκκινητών.

Δημιουργία ενός ζωντανού διανομέα για συνεργασία

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

Φέτος έχουμε μετακινήσει τα UI Kits μας στο Figma για τους σχεδιαστές να δημιουργήσουν mockups και πρωτότυπα με. Το Figma βασίζεται στην τεχνολογία ιστού, πράγμα που σημαίνει ότι μπορούμε να χρησιμοποιήσουμε τα εργαλεία που χρησιμοποιούμε για άλλες ροές εργασίας των συστημάτων σχεδιασμού και να αποφύγουμε να δουλέψουμε σε λογισμικό ειδικά για το macOS. Η νέα λειτουργία Στύλων του Figma μας επιτρέπει να χαρτογραφήσουμε τα πρωτόνια του συστήματος, όπως τα χρώματα και την τυπογραφία στα εξαρτήματα, παρόμοια με τον τρόπο που κάνουμε στον κώδικα. Το API του Figma διευκολύνει την ενσωμάτωσή μας σε άλλα μέρη της ροής εργασίας μας και την αυτοματοποίηση εργασιών, όπως τον έλεγχο των εξαρτημάτων στο Figma έναντι των συστατικών μας στον κώδικα.

Χρώμα στυλ primer στο Σχ

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

Πρόγραμμα Primer στο Codepen

Γνωρίζουμε ότι και οι δύο προσεγγίσεις δεν είναι ιδανικές για όλες τις περιπτώσεις χρήσης. Οι σχεδιαστές συχνά μπερδεύουν σελίδες και ροές. Πρέπει να είναι σε θέση να ταιριάζουν και να προσαρμόζουν τα σχέδια και να δουν γρήγορα τα αποτελέσματα όπως ακριβώς κάνουμε στα εργαλεία οπτικού σχεδιασμού. Αυτό μπορεί να είναι δύσκολο στην παραγωγή, αλλά αν ξεκινήσουν με ένα πρότυπο Codepen, ίσως χρειαστεί να χτίσουν πολλά υπάρχοντα UI προτού να επικεντρωθούν στο χαρακτηριστικό στο οποίο εργάζονται. Σε έναν ιδανικό κόσμο, οι σχεδιαστές θέλουν να δουλέψουν με δεδομένα παραγωγής ή κάτι που το αντιπροσωπεύει στενά και θα ήταν υπέροχο αν δεν έπρεπε να ξεκινήσουν από το μηδέν και να χτίσουν όλο το χρώμιο γύρω από το χαρακτηριστικό τους. Γνωρίζουμε ότι αυτό είναι μια πρόκληση για πολλές εταιρείες, και ελπίζω να βρούμε μια ρύθμιση που να λειτουργεί.

Εργασία στο ύπαιθρο

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

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

Τεκμηρίωση από τον δημόσιο οδηγό στυλ μας https://styleguide.github.com/primer/

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

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

Πίνακας έργου για τον σχεδιασμό απελευθερώσεων του Primer.

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

Σας ευχαριστώ ❤

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

Στο ελάχιστο, θέλω να δώσω φωνητικές προτάσεις σε μερικούς ειδικούς που βοήθησαν άμεσα στη δημιουργία και υποστήριξη συστημάτων σχεδιασμού στο GitHub τα τελευταία χρόνια: Sophie Shepherd, Mark Otto, Patrick Marsciell, Mu-An Chiou, Caleb Winters, Brandon Rosage και Max Schoening.