Design Tokens συλλέγει κάθε μεταβλητή CSS, χρώμα, στοίβα γραμματοσειρών, ακτίνα και σκιά που χρησιμοποιεί μια σελίδα, τα ταξινομεί σε βασικά tokens, λειτουργίες θεμάτων και πεδία στοιχείων και τα κατεβάζει ως JSON design-token W3C για Figma ή ως αρχείο CSS.
Ένα σύστημα σχεδιασμού σπάνια καταγράφεται τόσο πλήρως όσο εφαρμόζεται. Η πραγματική παλέτα, η κλίμακα διαστημάτων και η ράμπα τύπων ζωντανά σε φύλλα στυλ — κατανεμημένα σε προσαρμοσμένες ιδιότητες, παρακάμψεις θεμάτων και σκληρά κωδικοποιημένες τιμές — και η ανακατασκευή τους με το χέρι από DevTools σημαίνει να κάνετε κλικ σε εκατοντάδες κανόνες και να αντιγράψετε τιμές μία κάθε φορά.
Αυτό το εργαλείο τα διαβάζει όλα ταυτόχρονα. Περπατά κάθε φύλλο στυλ στη σελίδα, συμπεριλαμβανομένων εκείνων που προέρχονται από πολλαπλή προέλευση που δεν επιτρέπεται να επιθεωρήσει η ίδια η σελίδα, και συλλέγει κάθε προσαρμοσμένη ιδιότητα, καθώς και μεταβλητές που έχουν οριστεί κατά το χρόνο εκτέλεσης σε ενσωματωμένα στυλ. Οι μεταβλητές στο:root γίνονται tokens βάσης; Τα ίδια ονόματα που επαναπροσδιορίζονται κάτω από έναν επιλογέα θέματος όπως.dark, [data-theme="dark"] ή prefers-color-scheme γίνονται ξεχωριστές λειτουργίες. Οι μεταβλητές που ορίζονται σε μεμονωμένα στοιχεία παρατίθενται ως εύρος. Κάθε τιμή επιλύεται μέσω της αλυσίδας var(), οπότε βλέπετε το χρώμα που αποδίδει στην πραγματικότητα, όχι απλώς μια αναφορά σε μια άλλη μεταβλητή.
Κάθε token ταξινομείται από την τιμή και το όνομά του — χρώμα, οικογένεια γραμματοσειράς, μέγεθος γραμματοσειράς, βάρος, ύψος γραμμής, απόσταση, ακτίνα, σκιά, διαβάθμιση, διάρκεια, ευκολία ή δείκτης z — και τα χρώματα κανονικοποιούνται σε δεκαεξαδικό, συμπεριλαμβανομένων των μορφών μόνο για κανάλια Tailwind και χρήση shadcn ( 222 47% 11% Bootstrap -rgb % Παράλληλα με τις δηλωμένες μεταβλητές, τα δείγματα του εργαλείου απέδωσε στοιχεία για να αναφέρουν τα χρώματα, τις στοίβες γραμματοσειρών, τα μεγέθη, τις ακτίνες και τις σκιές που χρησιμοποιούνται στην πραγματικότητα, με μετρήσεις χρήσης — ακριβώς αυτό που χρειάζεστε σε έναν ιστότοπο που δεν υιοθέτησε ποτέ μεταβλητές.
Η εξαγωγή διαρκεί ένα κλικ. Download tokens JSON αποθηκεύει τη μορφή W3C Design Tokens ( $value και $type), την οποία η προσθήκη Tokens Studio εισάγει στο Figma και Style Dictionary μετατρέπει σε κώδικα για οποιαδήποτε πλατφόρμα. Οι τρόποι θεμάτων και οι παρατηρούμενες τιμές διατηρούνται στις δικές τους ομάδες, οπότε τίποτα δεν μπερδεύεται. Download CSS εγγράφει τις μεταβλητές πίσω ως φύλλο στυλ, με κάθε λειτουργία κάτω από τον αρχικό επιλογέα.
Προσαρμοσμένες ιδιότητες από κάθε φύλλο στυλ, συμπεριλαμβανομένων των φύλλων διασταυρούμενης προέλευσης που η σελίδα δεν μπορεί να διαβάσει, καθώς και μεταβλητές που ορίζονται κατά το χρόνο εκτέλεσης σε ενσωματωμένα στυλ.
Οι παρακάμψεις στα.dark, [data-theme] ή prefers-color-scheme γίνονται ξεχωριστές λειτουργίες, που εμφανίζονται δίπλα-δίπλα με τη βασική τιμή.
Κάθε αλυσίδα var() επιλύεται και κάθε token πληκτρολογείται ως χρώμα, γραμματοσειρά, μέγεθος, απόσταση, ακτίνα, σκιά, διάρκεια, διευκόλυνση ή δείκτης z.
Hex, rgb, hsl, oklch, τα ονομασμένα χρώματα και οι τιμές μόνο για κανάλια Tailwind, shadcn και Bootstrap χρήση, όλα κανονικοποιημένα σε hex.
Χρώματα, στοίβες γραμματοσειρών, μεγέθη, βάρη, ακτίνες και σκιές δειγματοληπτικά από στοιχεία απόδοσης, με πόσο συχνά εμφανίζεται το καθένα.
W3C design-token JSON for Tokens Studio and Style Dictionary, ή ένα αρχείο CSS με κάθε λειτουργία κάτω από τον αρχικό του επιλογέα.
Εισαγάγετε την πραγματική παλέτα, τον τύπο και το διάστημα στο Tokens Studio αντί να επιλέγετε χρώματα από στιγμιότυπα οθόνης.
Δείτε πόσα χρώματα και μεγέθη γραμματοσειράς χρησιμοποιεί πραγματικά ένας ιστότοπος και ποιες τιμές παρακάμπτουν τα tokens που ορίζει.
Συγκρίνετε κάθε μεταβλητή που παρακάμπτει η σκοτεινή λειτουργία με την τιμή φωτός της, δίπλα-δίπλα, και εντοπίστε αυτές που δεν παρακάμφθηκαν ποτέ.
Εξάγετε τα tokens μία φορά και τροφοδοτήστε τα στο Style Dictionary ή σε μια διαμόρφωση Tailwind αντί να αντιγράψετε τιμές με το χέρι.
Τραβήξτε το σύστημα χρωμάτων, την κλίμακα τύπων και τις ακτίνες ενός ιστότοπου που θαυμάζετε σε ένα αρχείο από το οποίο μπορείτε να εργαστείτε.
Κάντε κλικ στο εικονίδιο Design Tokens στο dock του DevSuite Pro. Η εξαγωγή εκτελείται αμέσως και η σύνοψη μετράει μεταβλητές, λειτουργίες, χρώματα και στοίβες γραμματοσειρών.
Η καρτέλα Χρώματα εμφανίζει κάθε token χρώματος ως δείγμα, χωρισμένο για να εμφανιστεί κάθε λειτουργία θέματος, ακολουθούμενα από τα χρώματα που αποδίδει η σελίδα, με μετρήσεις χρήσης.
Η τυπογραφία κάνει προεπισκόπηση κάθε στοίβας γραμματοσειρών και παραθέτει μεγέθη, βάρη, ύψη γραμμής και κανόνες @font-face. η τελευταία καρτέλα καλύπτει απόσταση, ακτίνες, σκιές και κίνηση.
Η καρτέλα Μεταβλητές παραθέτει κάθε προσαρμοσμένη ιδιότητα με την εγγεγραμμένη και επιλυμένη τιμή της. Εναλλαγή μεταξύ βάσης, κάθε λειτουργίας θέματος και μεταβλητών εύρους στοιχείων.
Download tokens JSON για Figma μέσω Tokens Studio ή Download CSS για φύλλο στυλ. Επιλέξτε το πλαίσιο ελέγχου για να συμπεριλάβετε και μεταβλητές εύρους στοιχείων.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 74+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
