Design Tokens kogub kõik lehel kasutatavad CSS muutujad, värvid, fondivirnad, raadiused ja varjud, sorteerib need tokens, teemarežiimidesse ja komponentide ulatusse ning laadib need alla W3C design-token JSON vormingus Figma jaoks või CSS failina.
Disainisüsteem on harva nii täielikult kirja pandud, kui seda rakendatakse. Tõeline palett, vaheskaala ja tüübiramp asuvad laaditabelites – jaotatud kohandatud atribuutide, teemaalistuste ja kõvakodeeritud väärtuste vahel – ning nende käsitsi uuesti ülesehitamine DevTools tähendab sadade reeglite klõpsamist ja väärtuste ükshaaval kopeerimist.
See tööriist loeb neid kõiki korraga. See läbib kõik lehel olevad laaditabelid, kaasa arvatud need, mida lehel endal ei ole lubatud kontrollida, ning kogub kõik kohandatud atribuudid ja käitusajal sisestes stiilides määratud muutujad. Muutujatest:root saavad tokens; samad nimed, mis on uuesti määratletud teemavalija all, nagu.dark, [data-theme="dark"] või prefers-color-scheme muutuvad eraldi režiimideks; üksikute komponentide jaoks määratletud muutujad on loetletud ulatusega. Iga väärtus lahendatakse selle var() ahela kaudu, nii et näete tegelikult renderdatavat värvi, mitte ainult viidet teisele muutujale.
Iga token klassifitseeritakse selle väärtuse ja nimetuse järgi – värv, fondiperekond, fondi suurus, kaal, rea kõrgus, vahe, raadius, vari, gradient, kestus, leevendus või z-indeks – ning värvid normaliseeritakse kuueteistkümnendikuks, sealhulgas ainult kanalivormingud Tailwind ja shadcn use ( 222 47% 11%) ja Bootstrap -rgb. Lisaks deklareeritud muutujatele renderdasid tööriistanäidised elemente, et anda teada tegelikult kasutatud värvid, fondivirnad, suurused, raadiused ja varjud koos kasutusloendustega – täpselt see, mida vajate saidil, mis pole muutujaid üldse kasutusele võtnud.
Ekspordiks kulub üks klõps. Download tokens JSON salvestab W3C Design Tokens vormingu ( $value ja $type), mille Tokens Studio importib Figma ja Style Dictionary muudab selle mis tahes platvormi koodiks; teemarežiimid ja vaadeldud väärtused hoitakse oma rühmades, nii et midagi ei lähe segamini. Download CSS kirjutab muutujad tagasi stiilitabelina, kusjuures iga režiim on algse valija all.
Kohandatud atribuudid igast laaditabelist, sealhulgas ristpäritolu lehed, mida leht lugeda ei saa, pluss muutujad, mis on määratud käitusajal tekstisiseste stiilide puhul.
Alistamised all.dark, [data-theme] või prefers-color-scheme muutuvad eraldi režiimideks, mis kuvatakse põhiväärtusega kõrvuti.
Iga var() ahel lahendatakse ja iga token sisestatakse värvi, fondi, suuruse, vahekauguse, raadiuse, varju, kestuse, leevenduse või z-indeksina.
Kuueteistkümnend, rgb, hsl, oklch, nimega värvid ja ainult kanali väärtused Tailwind, shadcn ja Bootstrap use, kõik normaliseeritud kuueteistkümnendikuks.
Renderdatud elementidest võetud värvid, fondivirnad, suurused, kaalud, raadiused ja varjud koos nende ilmumise sagedusega.
W3C design-token JSON Tokens Studio ja Style Dictionary jaoks või CSS fail, mille kõik režiimid on algse valija all.
Ekraanipiltidest värvide valimise asemel importige tegelik palett, tüüp ja vahed Tokens Studio.
Vaadake, kui palju värve ja fondisuurusi sait tegelikult kasutab ning millised väärtused mööduvad selle määratletud tokens.
Võrrelge kõrvuti kõiki muutujaid, mida tume režiim alistab, selle valguse väärtusega ja tuvastage need, mida kunagi ei alistatud.
Eksportige tokens üks kord ja sisestage need Style Dictionary või Tailwind konfiguratsiooni, mitte ei kopeeri väärtusi käsitsi.
Tõmmake imetleva saidi värvisüsteem, tüübiskaala ja raadiused faili, millest saate töötada.
Klõpsake DevSuite Pro dokis ikooni Design Tokens. Ekstraheerimine käivitub kohe ja kokkuvõttes loetakse muutujad, režiimid, värvid ja fondivirnad.
Vahekaardil Värvid kuvatakse kõik token proovina, mis on jagatud iga teemarežiimi kuvamiseks, millele järgneb lehe renderdatavad värvid koos kasutuste arvuga.
Tüpograafia vaatab iga fondivirna eelvaateid ja loetleb suurused, kaalud, joonte kõrgused ja @font-face reeglid; viimane vahekaart hõlmab vahekaugusi, raadiusi, varje ja liikumist.
Vahekaardil Muutujad loetletakse kõik kohandatud atribuudid koos selle autori- ja lahendatud väärtusega. Lülitage põhi-, iga teemarežiimi ja komponendi ulatusega muutujate vahel.
Laadige Tokens Studio kaudu alla Figma jaoks mõeldud Download tokens JSON või laaditabeli jaoks Download CSS. Märkige ruut, et kaasata ka komponendi ulatusega muutujad.
Paigaldage DevSuite Pro tasuta ja avage 74+ arendustööriista oma brauserile.
