Design Tokens renka kiekvieną puslapio naudojamą CSS kintamąjį, spalvą, šrifto krūvą, spindulį ir šešėlį, surūšiuoja juos į pagrindinius prieigos tokens, temos režimus ir komponentų apimtis ir atsisiunčia juos kaip W3C design-token JSON skirtą Figma, arba kaip CSS failą.
Projektavimo sistema retai užrašoma taip iki galo, kaip ji yra įgyvendinta. Tikroji paletė, tarpų skalė ir tipo rampa yra stiliaus lapuose – paskirstytuose tinkintose ypatybėse, temų nepaisymuose ir sunkiai užkoduotose reikšmėse, o jas atkuriant rankiniu būdu naudojant DevTools, reikia spustelėti šimtus taisyklių ir kopijuoti vertes po vieną.
Šis įrankis nuskaito juos visus iš karto. Jis peržiūri kiekvieną puslapio stilių lapą, įskaitant skirtingų šaltinių tuos, kurių pačiam puslapiui neleidžiama tikrinti, ir renka kiekvieną tinkintą ypatybę, taip pat kintamuosius, nustatytus vykdymo metu eilutiniuose stiliuose. Kintamieji:root tampa baziniais tokens; tie patys pavadinimai, iš naujo apibrėžti naudojant temos parinkiklį, pvz.,.dark, [data-theme="dark"] arba prefers-color-scheme tampa atskirais režimais; kintamieji, apibrėžti atskiruose komponentuose, yra išvardyti kaip apimtis. Kiekviena reikšmė išsprendžiama naudojant var() grandinę, todėl matote spalvą, kuri iš tikrųjų pateikiama, o ne tik nuorodą į kitą kintamąjį.
Kiekvienas token klasifikuojamas pagal jo vertę ir pavadinimą – spalvą, šriftų šeimą, šrifto dydį, svorį, eilutės aukštį, tarpą, spindulį, šešėlį, gradientą, trukmę, lengvumą arba z indeksą – ir spalvos normalizuojamos iki šešioliktadienio, -rgb tik kanalo formatus Tailwind ir shadcn use ( 222 47% 11%) ir Bootstrap. Kartu su deklaruotais kintamaisiais, įrankių pavyzdžiai pateikė elementus, kad praneštų apie faktiškai naudojamas spalvas, šriftų krūvas, dydžius, spindulius ir šešėlius su naudojimo skaičiais – būtent tai, ko jums reikia svetainėje, kurioje kintamųjų apskritai nebuvo.
Eksportuoti reikia vienu paspaudimu. Download tokens JSON išsaugo W3C Design Tokens formatą ( $value ir $type), kurį Tokens Studio įskiepis importuoja į Figma ir Style Dictionary paverčia bet kurios platformos kodu; teminiai režimai ir stebimos reikšmės laikomos savo grupėse, todėl niekas nesusimaišo. Download CSS kintamieji įrašomi atgal kaip stiliaus lapas, o kiekvienas režimas yra pradiniame parinkiklyje.
Tinkintos ypatybės iš kiekvieno stiliaus lapo, įskaitant skirtingų šaltinių lapus, kurių puslapis negali nuskaityti, ir kintamuosius, nustatytus vykdymo metu įterptiniuose stiliuose.
Nepaisymas pagal.dark, [data-theme] arba prefers-color-scheme tampa atskirais režimais, rodomais greta bazinės vertės.
Kiekviena var() grandinė yra išspręsta ir kiekvienas token įvedamas kaip spalva, šriftas, dydis, tarpai, spindulys, šešėlis, trukmė, palengvinimas arba z indeksas.
Hex, rgb, hsl, oklch, pavadintos spalvos ir tik kanalo reikšmės Tailwind, shadcn ir Bootstrap use, visos normalizuotos į hex.
Spalvos, šriftų krūvos, dydžiai, svoris, spinduliai ir šešėliai, paimti iš pateiktų elementų, nurodant, kaip dažnai kiekvienas iš jų rodomas.
W3C design-token JSON, skirtas Tokens Studio ir Style Dictionary, arba CSS failas su kiekvienu režimu pagal pradinį parinkiklį.
Užuot rinkę spalvas iš ekrano kopijų, importuokite tikrą paletę, įveskite tekstą ir tarpus į Tokens Studio.
Pažiūrėkite, kiek spalvų ir šrifto dydžių svetainė iš tikrųjų naudoja ir kurios reikšmės apeina jos apibrėžtus tokens.
Palyginkite kiekvieną kintamąjį, kurį tamsus režimas nepaiso, su jo šviesos reikšme, šalia ir pastebėkite tuos, kurie niekada nebuvo nepaisyti.
Vieną kartą eksportuokite tokens ir pateikite juos į Style Dictionary arba Tailwind konfigūraciją, o ne nukopijuokite vertes ranka.
Ištraukite svetainės, kuria žavitės, spalvų sistemą, tipo skalę ir spindulius į failą, iš kurio galite dirbti.
DevSuite Pro doke spustelėkite piktogramą Design Tokens. Ištraukimas paleidžiamas iš karto, o suvestinėje skaičiuojami kintamieji, režimai, spalvos ir šriftų krūvos.
Skirtuke „Spalvos“ kiekvienas spalvų token rodomas kaip pavyzdys, padalintas, kad būtų rodomas kiekvienas temos režimas, o po to pateikiamos spalvos, kurias pateikia puslapis, su naudojimo skaičiais.
Tipografija peržiūri kiekvieną šrifto krūvą ir išvardija dydžius, svorį, eilučių aukštį ir @font-face taisykles; paskutinis skirtukas apima tarpus, spindulius, šešėlius ir judesį.
Skirtuke Kintamieji pateikiami visų tinkintų ypatybių sąrašai su jos sukurta ir nustatyta verte. Perjunkite pagrindinį, kiekvienos temos režimą ir komponentų apimties kintamuosius.
Download tokens JSON Figma “ skirtus JSON prieigos raktus per Tokens Studio arba Download CSS kad gautumėte stiliaus lapą. Pažymėkite žymimąjį laukelį, kad įtrauktumėte ir komponentų apimties kintamuosius.
Įdiekite „DevSuite Pro“ nemokamai ir atrakinkite 74+ kūrėjų įrankius savo naršyklei.
