Semantic Design Token Architecture: Global, Semantic and Component Tokens

Τα τρία επίπεδα

Το Material Design περιγράφει τρεις κατηγορίες διακριτικών: αναφορά, σύστημα και στοιχείο. Πολλές ομάδες τα αποκαλούν καθολικά, σημασιολογικά και συστατικά. Τα ονόματα διαφέρουν, αλλά η ιδέα είναι η ίδια: διαχωρίστε τις πρωτογενείς τιμές από τις αποφάσεις σχετικά με τον τρόπο χρήσης τους.

• Καθολική (αναφορά): κάθε ακατέργαστη τιμή στο σύστημα, όπως blue-600, space-4, font-size-16, spring-gentle.
• Σημασιολογική (σύστημα): τι σημαίνει μια τιμή, όπως color.text.primary, color.action.primary, motion.enter.
• Στοιχείο: πώς ένα στοιχείο χρησιμοποιεί το σύστημα, όπως button.background ή dialog.motion.open.

Γιατί τα σημασιολογικά διακριτικά έχουν σημασία

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

Θέματα και πολλές μάρκες

Για προϊόντα πολλαπλών επωνυμιών ή λευκών ετικετών, διατηρήστε ένα σύνολο σημασιολογικών και συστατικών διακριτικών και μία παγκόσμια παλέτα ανά επωνυμία. Κάθε θέμα είναι μια αντιστοίχιση από σημασιολογικά διακριτικά σε καθολικές τιμές. Η πρώτη σταθερή έκδοση της προδιαγραφής W3C Design Tokens (2025.10), που κυκλοφόρησε τον Οκτώβριο του 2025, πρόσθεσε υποστήριξη θεμάτων και πολλαπλών επωνυμιών, μοντέρνους χρωματικούς χώρους όπως Display P3 και OKLCH και ψευδώνυμα και αναφορές σε επίπεδο στοιχείων.

Τα διακριτικά κίνησης ανήκουν και εδώ

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

Αποστολή κουπονιών σε κάθε πλατφόρμα

Διατηρήστε τα διακριτικά σε ένα αποθετήριο ως DTCG JSON, τη μοναδική πηγή αλήθειας. Ένα εργαλείο κατασκευής όπως το Style Dictionary τις μετατρέπει σε μεταβλητές CSS, Swift, Kotlin, Flutter ή άλλες μορφές. Τα εργαλεία σχεδίασης που διαβάζουν την ίδια μορφή μπορούν να παραμείνουν συγχρονισμένα και τα εργαλεία κωδικοποίησης AI μπορούν να διαβάσουν απευθείας το JSON.

• Πηγή αλήθειας: DTCG JSON στο Git, αναθεωρημένο όπως ο κώδικας
• Δημιουργία: μετατροπή σε κάθε πλατφόρμα σε κάθε αλλαγή
• Συγχρονισμός εργαλείων σχεδίασης: εισαγωγή ή προσθήκη, τιμές που δεν αντιγράφονται ποτέ με το χέρι
• Linting: απαγορεύστε τις ακατέργαστες τιμές στα εξαρτήματα