Design Tokens collecte toutes les variables CSS, couleurs, piles de polices, rayons et ombres utilisés par une page, les trie en tokens de base, modes de thème et étendues de composants, et les télécharge sous forme design-token JSON W3C pour Figma ou sous forme de fichier CSS.
Un système de conception est rarement écrit aussi complètement qu’il est mis en œuvre. La vraie palette, l'échelle d'espacement et la rampe de type se trouvent dans des feuilles de style - réparties sur des propriétés personnalisées, des remplacements de thème et des valeurs codées en dur - et les reconstruire manuellement à partir de DevTools signifie cliquer sur des centaines de règles et copier les valeurs une par une.
Cet outil les lit tous en même temps. Il parcourt chaque feuille de style de la page, y compris celles d'origine croisée que la page elle-même n'est pas autorisée à inspecter, et collecte chaque propriété personnalisée, ainsi que les variables définies au moment de l'exécution dans les styles en ligne. Les variables sur:root deviennent tokens de base; les mêmes noms redéfinis sous un sélecteur de thème tel que.dark, [data-theme="dark"] ou prefers-color-scheme deviennent des modes distincts; les variables définies sur des composants individuels sont répertoriées comme étant étendues. Chaque valeur est résolue via sa chaîne var(), vous voyez donc la couleur réellement restituée, pas seulement une référence à une autre variable.
Chaque token est classé à partir de sa valeur et de son nom — couleur, famille de police, taille de police, épaisseur, hauteur de ligne, espacement, rayon, ombre, dégradé, durée, assouplissement ou z-index — et les couleurs sont normalisées en hexadécimal, y compris les formats de canal uniquement Tailwind et shadcn utilisent ( 222 47% 11%) et les triplets -rgb de Bootstrap. Parallèlement aux variables déclarées, l'outil échantillonne les éléments rendus pour signaler les couleurs, les piles de polices, les tailles, les rayons et les ombres réellement utilisés, avec le nombre d'utilisations – exactement ce dont vous avez besoin sur un site qui n'a jamais adopté de variables.
L'exportation se fait en un seul clic. Download tokens JSON enregistre le format W3C Design Tokens ( $value et $type), que le plugin Tokens Studio importe dans Figma et Style Dictionary transforme en code pour n'importe quelle plate-forme; les modes thématiques et les valeurs observées sont conservés dans leurs propres groupes, donc rien ne se mélange. Download CSS réécrit les variables sous forme de feuille de style, chaque mode étant sous son sélecteur d'origine.
Propriétés personnalisées de chaque feuille de style, y compris les feuilles d'origine croisée que la page ne peut pas lire, ainsi que les variables définies au moment de l'exécution dans les styles en ligne.
Les remplacements sous.dark, [data-theme] ou prefers-color-scheme deviennent des modes distincts, affichés côte à côte avec la valeur de base.
Chaque chaîne var() est résolue et chaque token est saisi sous forme de couleur, police, taille, espacement, rayon, ombre, durée, assouplissement ou z-index.
Hex, rgb, hsl, oklch, les couleurs nommées et les valeurs de canal uniquement utilisées par Tailwind, shadcn et Bootstrap, toutes normalisées en hexadécimal.
Couleurs, piles de polices, tailles, épaisseurs, rayons et ombres échantillonnés à partir des éléments rendus, avec la fréquence d'apparition de chacun.
design-token JSON W3C pour Tokens Studio et Style Dictionary, ou un fichier CSS avec chaque mode sous son sélecteur d'origine.
Importez la vraie palette, le type et l'espacement dans Tokens Studio au lieu de choisir les couleurs à partir des captures d'écran.
Découvrez combien de couleurs et de tailles de police un site utilise réellement et quelles valeurs contournent les tokens qu'il définit.
Comparez chaque variable remplacée par le mode sombre avec sa valeur claire, côte à côte, et repérez celles qui n'ont jamais été remplacées.
Exportez les tokens une fois et introduisez-les dans Style Dictionary ou dans une configuration Tailwind plutôt que de copier les valeurs à la main.
Intégrez le système de couleurs, l'échelle de caractères et les rayons d'un site que vous admirez dans un fichier à partir duquel vous pouvez travailler.
Cliquez sur l'icône Design Tokens dans le dock DevSuite Pro. L'extraction s'exécute immédiatement et le récapitulatif compte les variables, les modes, les couleurs et les piles de polices.
L'onglet Couleurs affiche chaque token de couleur sous forme d'échantillon, divisé pour afficher chaque mode de thème, suivi des couleurs rendues par la page, avec le nombre d'utilisations.
La typographie affiche un aperçu de chaque pile de polices et répertorie les tailles, les épaisseurs, les hauteurs de ligne et les règles @font-face; le dernier onglet couvre l'espacement, les rayons, les ombres et le mouvement.
L'onglet Variables répertorie chaque propriété personnalisée avec sa valeur créée et résolue. Basculez entre la base, chaque mode de thème et les variables à l'échelle des composants.
Download tokens JSON pour Figma via Tokens Studio, ou Download CSS pour une feuille de style. Cochez la case pour inclure également les variables étendues aux composants.
Installez DevSuite Pro gratuitement et débloquez plus de 74 outils de développement pour votre navigateur.
