Design Tokens kerää jokaisen sivun käyttämän CSS muuttujan, värin, kirjasinpinon, säteen ja varjon, lajittelee ne tokens, teematiloihin ja komponenttien laajuuksiin ja lataa ne W3C design-token JSON muodossa Figma tai CSS tiedostona.
Suunnittelujärjestelmä on harvoin kirjoitettu niin täydellisesti kuin se on toteutettu. Todellinen paletti, välimittakaava ja tyyppiramppi ovat tyylitaulukoissa – hajallaan mukautetuille ominaisuuksille, teeman ohituksille ja kovakoodatuille arvoille – ja niiden uudelleen rakentaminen käsin DevTools tarkoittaa satojen sääntöjen läpi napsauttamista ja arvojen kopioimista yksi kerrallaan.
Tämä työkalu lukee ne kaikki kerralla. Se käy läpi kaikki sivun tyylisivut, mukaan lukien eri alkuperät, joita sivu ei saa tarkastaa, ja kerää kaikki mukautetut ominaisuudet sekä muuttujat, jotka asetetaan ajon aikana upotetuissa tyyleissä. Muuttujat:root muuttuvat tokens; samat nimet, jotka määritetään uudelleen teemavalitsimella, kuten.dark, [data-theme="dark"] tai prefers-color-scheme muuttuvat erillisiksi tiloiksi; yksittäisille komponenteille määritellyt muuttujat luetellaan suojattuina. Jokainen arvo ratkaistaan sen var() -ketjun kautta, joten näet värin, joka todella hahmonnetaan, ei vain viittausta toiseen muuttujaan.
Jokainen token luokitellaan sen arvon ja nimen mukaan – väri, kirjasinperhe, kirjasinkoko, paino, rivin korkeus, väli, säde, varjo, liukuväri, kesto, helpotus tai z-indeksi – ja värit normalisoidaan hex-muotoon, mukaan lukien vain kanavamuodot Tailwind ja shadcn use ( 222 47% 11%) ja Bootstrap -rgb. Ilmoitettujen muuttujien lisäksi työkalunäytteet hahmontivat elementtejä, jotka raportoivat todellisuudessa käytetyt värit, kirjasinpinot, koot, säteet ja varjot sekä käyttömäärät – juuri sitä, mitä tarvitset sivustolla, joka ei koskaan ottanut muuttujia käyttöön.
Vienti kestää yhdellä napsautuksella. Download tokens JSON tallentaa W3C Design Tokens -muodon ( $value ja $type), jonka Tokens Studio -laajennus tuo Figma ja Style Dictionary muuntaa koodiksi mille tahansa alustalle; teematilat ja havaitut arvot pidetään omissa ryhmissään, joten mikään ei mene sekaisin. Download CSS kirjoittaa muuttujat takaisin ulos tyylisivuna, ja jokainen tila on alkuperäisen valitsimen alla.
Muokatut ominaisuudet jokaisesta tyylitaulukosta, mukaan lukien ristiin lähtevät taulukot, joita sivu ei voi lukea, sekä muuttujat, jotka asetetaan ajon aikana upotetuissa tyyleissä.
Ohituksista.dark, [data-theme] tai prefers-color-scheme alla tulee erillisiä tiloja, jotka näytetään perusarvon vieressä.
Jokainen var() -ketju on ratkaistu, ja jokainen token kirjoitetaan värinä, fonttina, kokona, välinä, säteenä, varjona, kestona, helpotuksena tai z-indeksinä.
Hex, rgb, hsl, oklch, nimetyt värit ja vain kanavan arvot Tailwind, shadcn ja Bootstrap use, kaikki normalisoitu heksaan.
Värit, kirjasinpinot, koot, painot, säteet ja varjot, jotka on otettu renderöidyistä elementeistä ja kuinka usein kukin esiintyy.
W3C design-token JSON Tokens Studio ja Style Dictionary tai CSS tiedosto, jonka kaikki tilat ovat alkuperäisen valitsimen alla.
Tuo todellinen paletti, kirjoita ja välit Tokens Studio sen sijaan, että poimiisit värejä kuvakaappauksista.
Katso, kuinka monta väriä ja fonttikokoa sivusto todella käyttää ja mitkä arvot ohittavat sen määrittelemät tokens.
Vertaa jokaista pimeän tilan ohittamaa muuttujaa sen valoarvoon vierekkäin ja huomaa ne, joita ei koskaan ohitettu.
Vie tokens kerran ja syötä ne Style Dictionary tai Tailwind -konfiguraatioon sen sijaan, että kopioit arvoja käsin.
Vedä ihailemasi sivuston värijärjestelmä, tyyppiasteikko ja säteet tiedostoon, josta voit työskennellä.
Napsauta Design Tokens -kuvaketta DevSuite Pro Dockissa. Poiminta suoritetaan heti ja yhteenveto laskee muuttujat, tilat, värit ja fonttipinot.
Värit-välilehti näyttää jokaisen token näytelmänä, jaettuna näyttämään kunkin teematilan, jonka jälkeen sivun hahmontamat värit ja käyttömäärät.
Typografia esikatselee jokaisen kirjasinpinon ja luettelee koot, painot, rivien korkeudet ja @font-face säännöt; viimeinen välilehti kattaa välit, säteet, varjot ja liikkeet.
Muuttujat-välilehti luettelee kaikki mukautetut ominaisuudet ja niiden kirjoittama ja ratkaistu arvo. Vaihda perus-, kunkin teematilan ja komponenttitason muuttujien välillä.
Valitse Download tokens JSON Figmaa varten (Tokens Studion kautta) tai Download CSS tyylitiedostoa varten. Valitse valintaruutu, jos haluat sisällyttää myös komponenttilaajuiset muuttujat.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 74 kehittäjätyökalua selaimellesi.
