Design Tokens colectează fiecare variabilă CSS, culoare, stivă de fonturi, rază și umbră pe care o folosește o pagină, le sortează în tokens de bază, moduri de teme și domenii ale componentelor și le descarcă ca JSON design-token W3C pentru Figma sau ca fișier CSS.
Un sistem de proiectare este rareori scris atât de complet pe cât este implementat. Paleta reală, scara de spațiere și rampa de tip sunt prezente în foi de stil – răspândite în proprietăți personalizate, suprascrieri de teme și valori codificate – iar reconstruirea lor manuală din DevTools înseamnă să faceți clic pe sute de reguli și să copiați valorile pe rând.
Acest instrument le citește pe toate deodată. Acesta parcurge fiecare foaie de stil de pe pagină, inclusiv cele cu origini încrucișate pe care pagina în sine nu are voie să le inspecteze și colectează fiecare proprietate personalizată, plus variabilele setate în timpul execuției în stiluri inline. Variabilele de pe:root devin tokens de bază; aceleași nume redefinite sub un selector de teme precum.dark, [data-theme="dark"] sau prefers-color-scheme devin moduri separate; variabilele definite pe componente individuale sunt listate ca scop. Fiecare valoare este rezolvată prin lanțul său var(), astfel încât să vedeți culoarea care redă de fapt, nu doar o referință la o altă variabilă.
Fiecare token este clasificat după valoarea și numele său - culoare, familie de fonturi, dimensiunea fontului, greutatea, înălțimea liniei, spațiere, rază, umbră, gradient, durată, relaxare sau index z - iar culorile sunt normalizate la hexadecimal, inclusiv formatele numai pentru canal Tailwind și shadcn use ( 222 47% 11%) și Bootstrap -rgb. Alături de variabilele declarate, instrumentul eșantionează elementele randate pentru a raporta culorile, stivele de fonturi, dimensiunile, razele și umbrele care sunt utilizate efectiv, cu număr de utilizare - exact ceea ce aveți nevoie pe un site care nu a adoptat niciodată variabile.
Exportul durează un singur clic. Download tokens JSON salvează formatul W3C Design Tokens ( $value și $type), pe care pluginul Tokens Studio îl importă în Figma și Style Dictionary îl transformă în cod pentru orice platformă; modurile tematice și valorile observate sunt păstrate în propriile grupuri, astfel încât nimic nu se amestecă. Download CSS scrie variabilele înapoi ca o foaie de stil, cu fiecare mod sub selectorul său original.
Proprietăți personalizate din fiecare foaie de stil, inclusiv foi cu origini încrucișate pe care pagina nu le poate citi, plus variabile setate în timpul execuției în stiluri inline.
Suprascrierea sub.dark, [data-theme] sau prefers-color-scheme devin moduri separate, afișate alături de valoarea de bază.
Fiecare lanț var() este rezolvat și fiecare token este tastat ca culoare, font, dimensiune, spațiere, rază, umbră, durată, ușurare sau z-index.
Hex, rgb, hsl, oklch, culorile numite și valorile numai pentru canal Tailwind, shadcn și Bootstrap use, toate normalizate la hex.
Culori, stive de fonturi, dimensiuni, greutăți, raze și umbre eșantionate din elementele randate, cu cât de des apare fiecare.
W3C design-token JSON pentru Tokens Studio and Style Dictionary sau un fișier CSS cu fiecare mod sub selectorul său original.
Importați paleta reală, tipul și spațierea în Tokens Studio în loc să alegeți culorile din capturi de ecran.
Vedeți câte culori și dimensiuni de font folosește de fapt un site și ce valori ocolesc tokens pe care le definește.
Comparați fiecare variabilă pe care modul întunecat o înlocuiește cu valoarea sa de lumină, una lângă alta, și identificați-le pe cele care nu au fost niciodată suprascrise.
Exportați tokens o dată și alimentați-le în Style Dictionary sau într-o configurație Tailwind, în loc să copiați valorile manual.
Trageți sistemul de culori, introduceți scara și razele unui site pe care îl admirați într-un fișier din care puteți lucra.
Faceți clic pe pictograma Design Tokens din dock-ul DevSuite Pro. Extragerea rulează imediat, iar rezumatul numără variabile, moduri, culori și stive de fonturi.
Fila Culori afișează fiecare token de culoare ca un eșantion, împărțit pentru a afișa fiecare mod temă, urmat de culorile pe care le redă pagina, cu numărul de utilizare.
Tipografia previzualizează fiecare stivă de fonturi și listează dimensiunile, greutățile, înălțimile liniilor și regulile @font-face; ultima filă acoperă spațierea, razele, umbrele și mișcarea.
Fila Variabile listează fiecare proprietate personalizată cu valoarea sa creată și rezolvată. Comutați între modul de bază, fiecare temă și variabilele din domeniul de aplicare.
Download tokens JSON pentru Figma prin Tokens Studio sau Download CSS pentru o foaie de stil. Bifați caseta de selectare pentru a include și variabilele din domeniul de aplicare al componentelor.
Instalează DevSuite Pro gratuit și deblochează peste 74 de instrumente pentru dezvoltatori în browserul tău.
