Design Tokens sammelt jede CSS Variable, Farbe, jeden Schriftstapel, jeden Radius und jeden Schatten, die eine Seite verwendet, sortiert sie in tokens, Designmodi und Komponentenbereiche und lädt sie als W3C design-token JSON für Figma oder als CSS Datei herunter.
Ein Designsystem wird selten so vollständig niedergeschrieben, wie es umgesetzt wird. Die tatsächliche Palette, die Abstandsskala und der Typverlauf sind in Stylesheets enthalten – verteilt auf benutzerdefinierte Eigenschaften, Designüberschreibungen und fest codierte Werte – und um sie von Hand aus DevTools neu zu erstellen, muss man sich durch Hunderte von Regeln klicken und Werte einzeln kopieren.
Dieses Tool liest sie alle auf einmal. Es durchläuft jedes Stylesheet auf der Seite, einschließlich Cross-Origin-Stylesheets, die die Seite selbst nicht prüfen darf, und sammelt alle benutzerdefinierten Eigenschaften sowie Variablen, die zur Laufzeit in Inline-Stilen festgelegt werden. Variablen auf:root werden zu Basis tokens; Dieselben Namen, die unter einem Theme-Selektor wie.dark, [data-theme="dark"] oder prefers-color-scheme neu definiert wurden, werden zu separaten Modi; Variablen, die für einzelne Komponenten definiert sind, werden als bereichsbezogen aufgeführt. Jeder Wert wird über seine var() Kette aufgelöst, sodass Sie die Farbe sehen, die tatsächlich gerendert wird, und nicht nur einen Verweis auf eine andere Variable.
Jedes token wird anhand seines Werts und Namens klassifiziert – Farbe, Schriftfamilie, Schriftgröße, Stärke, Zeilenhöhe, Abstand, Radius, Schatten, Farbverlauf, Dauer, Beschleunigung oder Z-Index – und die Farben werden auf Hex normalisiert, einschließlich der Nur-Kanal-Formate Tailwind und shadcn use ( 222 47% 11%) und Bootstrap -rgb Triplets. Neben den deklarierten Variablen tastet das Tool gerenderte Elemente ab, um die tatsächlich verwendeten Farben, Schriftstapel, Größen, Radien und Schatten mit Nutzungszählungen zu melden – genau das, was Sie auf einer Website benötigen, die überhaupt keine Variablen verwendet hat.
Der Export erfolgt mit einem Klick. Download tokens JSON speichert das W3C Design Tokens Format ( $value und $type), das das Tokens Studio Plugin in Figma importiert und Style Dictionary in Code für jede Plattform umwandelt; Themenmodi und beobachtete Werte werden in eigenen Gruppen gehalten, sodass nichts durcheinander kommt. Download CSS schreibt die Variablen als Stylesheet zurück, wobei sich jeder Modus unter seinem ursprünglichen Selektor befindet.
Benutzerdefinierte Eigenschaften aus jedem Stylesheet, einschließlich Cross-Origin-Sheets, die die Seite nicht lesen kann, sowie Variablen, die zur Laufzeit in Inline-Stilen festgelegt werden.
Überschreibungen unter.dark, [data-theme] oder prefers-color-scheme werden zu separaten Modi, die neben dem Basiswert angezeigt werden.
Jede var() -Kette wird aufgelöst und jedes token wird als Farbe, Schriftart, Größe, Abstand, Radius, Schatten, Dauer, Beschleunigung oder Z-Index eingegeben.
Hex, rgb, hsl, oklch, benannte Farben und die nur für den Kanal verwendeten Werte Tailwind, shadcn und Bootstrap, alle auf Hex normalisiert.
Aus gerenderten Elementen entnommene Farben, Schriftstapel, Größen, Gewichte, Radien und Schatten sowie die Häufigkeit, mit der die einzelnen Elemente erscheinen.
W3C design-token JSON für Tokens Studio und Style Dictionary oder eine CSS Datei mit jedem Modus unter seinem ursprünglichen Selektor.
Importieren Sie die echte Palette, den Typ und die Abstände in Tokens Studio, anstatt Farben aus Screenshots auszuwählen.
Sehen Sie, wie viele Farben und Schriftgrößen eine Website tatsächlich verwendet und welche Werte die von ihr definierten tokens umgehen.
Vergleichen Sie jede Variable, die der Dunkelmodus überschreibt, nebeneinander mit ihrem Hellwert und erkennen Sie diejenigen, die nie überschrieben wurden.
Exportieren Sie die tokens einmal und geben Sie sie an Style Dictionary oder eine Tailwind -Konfiguration weiter, anstatt Werte manuell zu kopieren.
Übertragen Sie das Farbsystem, den Schriftmaßstab und die Radien einer Website, die Sie bewundern, in eine Datei, mit der Sie arbeiten können.
Klicken Sie im DevSuite Pro Dock auf das Symbol Design Tokens. Die Extraktion läuft sofort und die Zusammenfassung zählt Variablen, Modi, Farben und Schriftstapel.
Auf der Registerkarte „Farben“ wird jedes token als Farbfeld angezeigt, aufgeteilt, um jeden Themenmodus anzuzeigen, gefolgt von den Farben, die die Seite rendert, einschließlich der Anzahl der Verwendungen.
Typography zeigt eine Vorschau jedes Schriftstapels an und listet Größen, Strichstärken, Zeilenhöhen und @font-face -Regeln auf. Die letzte Registerkarte behandelt Abstände, Radien, Schatten und Bewegung.
Auf der Registerkarte „Variablen“ werden alle benutzerdefinierten Eigenschaften mit ihrem erstellten und aufgelösten Wert aufgeführt. Wechseln Sie zwischen Basis, jedem Themenmodus und komponentenbezogenen Variablen.
Download tokens JSON für Figma über Tokens Studio herunter oder Download CSS. Aktivieren Sie das Kontrollkästchen, um auch komponentenbezogene Variablen einzubeziehen.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 74+ Entwickler-Tools für Ihren Browser frei.
