Design Tokens verzamelt elke CSS variabele, kleur, lettertypestapel, straal en schaduw die een pagina gebruikt, sorteert ze in tokens, themamodi en componentscopes, en downloadt ze als W3C design-token JSON voor Figma of als een CSS bestand.
Een ontwerpsysteem wordt zelden zo volledig opgeschreven als geïmplementeerd. Het echte palet, de spatiëringsschaal en de type-ramp leven in stylesheets – verspreid over aangepaste eigenschappen, thema-overschrijvingen en hardgecodeerde waarden – en het handmatig opnieuw opbouwen ervan vanuit DevTools betekent dat je door honderden regels moet klikken en waarden één voor één moet kopiëren.
Deze tool leest ze allemaal in één keer. Het doorloopt elk stylesheet op de pagina, inclusief cross-originele stylesheets die de pagina zelf niet mag inspecteren, en verzamelt elke aangepaste eigenschap, plus variabelen die tijdens runtime in inline-stijlen zijn ingesteld. Variabelen op:root worden tokens; dezelfde namen die opnieuw zijn gedefinieerd onder een themakiezer zoals.dark, [data-theme="dark"] of prefers-color-scheme worden afzonderlijke modi; variabelen die voor afzonderlijke componenten zijn gedefinieerd, worden weergegeven als scoped. Elke waarde wordt opgelost via zijn var() keten, zodat u de kleur ziet die daadwerkelijk wordt weergegeven, en niet alleen maar een verwijzing naar een andere variabele.
Elk token wordt geclassificeerd op basis van zijn waarde en naam - kleur, lettertypefamilie, lettergrootte, gewicht, lijnhoogte, spatiëring, straal, schaduw, verloop, duur, versoepeling of z-index - en kleuren worden genormaliseerd naar hex, inclusief de alleen-kanaalformaten Tailwind en shadcn gebruiken ( 222 47% 11%) en Bootstrap 's -rgb triplets. Naast de gedeclareerde variabelen heeft de tool voorbeelden weergegeven van elementen om de kleuren, lettertypestapels, groottes, stralen en schaduwen te rapporteren die daadwerkelijk worden gebruikt, met gebruiksaantallen - precies wat je nodig hebt op een site die helemaal nooit variabelen heeft overgenomen.
Exporteren kost één klik. Download tokens JSON slaat het W3C Design Tokens formaat op ( $value en $type), dat de Tokens Studio -plug-in in Figma importeert en Style Dictionary omzet in code voor elk platform; themamodi en waargenomen waarden worden in hun eigen groepen gehouden, zodat er niets door elkaar raakt. Download CSS schrijft de variabelen terug als een stylesheet, waarbij elke modus onder de oorspronkelijke selector staat.
Aangepaste eigenschappen van elk stylesheet, inclusief cross-origin-bladen die de pagina niet kan lezen, plus variabelen die tijdens runtime zijn ingesteld in inline-stijlen.
Overschrijvingen onder.dark, [data-theme] of prefers-color-scheme worden afzonderlijke modi, naast de basiswaarde weergegeven.
Elke var() -keten wordt opgelost en elk token wordt getypt als kleur, lettertype, grootte, spatiëring, straal, schaduw, duur, versoepeling of z-index.
Hex, rgb, hsl, oklch, benoemde kleuren en de alleen-kanaalwaarden Tailwind, shadcn en Bootstrap gebruiken, allemaal genormaliseerd naar hex.
Kleuren, lettertypestapels, formaten, gewichten, stralen en schaduwen, gesampled uit gerenderde elementen, met hoe vaak ze voorkomen.
W3C design-token JSON voor Tokens Studio en Style Dictionary, of een CSS bestand met elke modus onder de oorspronkelijke selector.
Importeer het echte palet, type en spatiëring in Tokens Studio in plaats van kleuren uit schermafbeeldingen te kiezen.
Bekijk hoeveel kleuren en lettergroottes een site daadwerkelijk gebruikt, en welke waarden de tokens die deze definieert omzeilen.
Vergelijk elke variabele die door de donkere modus wordt overschreven met de lichte waarde, naast elkaar, en zoek de variabelen die nooit zijn overschreven.
Exporteer de tokens één keer en voer ze in in Style Dictionary of een Tailwind -configuratie in plaats van waarden met de hand te kopiëren.
Plaats het kleursysteem, de typeschaal en de radius van een site die u bewondert in een bestand waaruit u kunt werken.
Klik op het pictogram Design Tokens in het DevSuite Pro dock. De extractie wordt meteen uitgevoerd en de samenvatting telt variabelen, modi, kleuren en lettertypestapels.
Op het tabblad Kleuren wordt elk token weergegeven als een staal, opgesplitst om elke themamodus weer te geven, gevolgd door de kleuren die de pagina weergeeft, met gebruiksaantallen.
Typografie geeft een voorbeeld van elke lettertypestapel en vermeldt de grootte, dikte, lijnhoogte en @font-face -regels; het laatste tabblad behandelt de afstand, stralen, schaduwen en beweging.
Op het tabblad Variabelen wordt elke aangepaste eigenschap vermeld met de geschreven en opgeloste waarde ervan. Schakel tussen basis, elke themamodus en componentgerichte variabelen.
Download tokens JSON voor Figma via Tokens Studio, of Download CSS voor een stylesheet. Schakel het selectievakje in om ook componentengerichte variabelen op te nemen.
Installeer DevSuite Pro gratis en ontgrendel 74+ ontwikkelaarstools voor uw browser.
