Χωρίς σύστημα σχεδίασης, κάθε σχεδιαστής και προγραμματιστής παίρνει μικρές αποφάσεις μόνος του: ένα ελαφρώς διαφορετικό μπλε, ένα νέο στυλ κουμπιών, μια άλλη τιμή απόστασης. Μετά από ένα χρόνο το προϊόν έχει δεκάδες σχεδόν διπλότυπα. Ένα σύστημα σχεδιασμού αντικαθιστά αυτές τις επαναλαμβανόμενες αποφάσεις με κοινές.
Τα περισσότερα συστήματα σχεδιασμού έχουν τρία επίπεδα. Τα διακριτικά σχεδίασης ονομάζονται τιμές, όπως color.primary, space.4 ή motion.duration.short, που αποθηκεύουν τις πρωτογενείς αποφάσεις. Στοιχεία, όπως κουμπιά, είσοδοι, κάρτες και διάλογοι, δημιουργούνται από αυτά τα διακριτικά και περιλαμβάνουν κάθε κατάσταση. Οι οδηγίες τεκμηριώνουν τον τρόπο χρήσης κάθε στοιχείου, τον τρόπο σύνταξης ετικετών και μηνυμάτων και τους κανόνες προσβασιμότητας που ισχύουν.
Ένα σύστημα σχεδίασης ζει σε δύο μέρη: στο εργαλείο σχεδίασης, ως βιβλιοθήκη στοιχείων και στον κώδικα, καθώς εγκαθιστούν οι προγραμματιστές πακέτων. Η διατήρηση αυτών των δύο σε συγχρονισμό είναι το πιο δύσκολο κομμάτι. Όταν το κωδικοποιημένο κουμπί δεν ταιριάζει πλέον με το σχεδιασμένο, οι άνθρωποι σταματούν να εμπιστεύονται το σύστημα.
Η κίνηση ανήκει επίσης στο σύστημα. Οι διάρκειες, οι καμπύλες διευκόλυνσης και οι ρυθμίσεις ελατηρίου μπορεί να είναι διακριτικά και τα διαδραστικά στοιχεία χρειάζονται καθορισμένη συμπεριφορά για την τοποθέτηση, το πάτημα, τη φόρτωση και τις μεταβάσεις. Το ExodeUI, το οποίο φτιάχνουμε, αποθηκεύει αυτή τη συμπεριφορά σε ένα ανοιχτό αρχείο με καταστάσεις και φυσική ελατηρίου, επομένως το ίδιο στοιχείο παίζει στα React, Vue, SwiftUI, Flutter και άλλα πλαίσια.
Τα γνωστά δημόσια παραδείγματα περιλαμβάνουν το Material Design της Google, τις Οδηγίες ανθρώπινης διεπαφής της Apple, το Carbon της IBM και το Polaris της Shopify. Η ανάγνωσή τους είναι ένας καλός τρόπος για να δείτε πώς είναι οργανωμένο ένα ώριμο σύστημα.