Design Tokens összegyűjti az oldal által használt minden CSS változót, színt, betűkészletet, sugarat és árnyékot, tokens, témamódokba és összetevők hatókörébe rendezi őket, majd letölti őket W3C design-token JSON ként Figma számára vagy CSS fájlként.
Egy tervezési rendszert ritkán írnak le olyan teljes mértékben, ahogyan megvalósítják. A valódi paletta, a térköz léptéke és a típusrámpa stíluslapokban él – egyéni tulajdonságok, témafelülírások és merev kódolt értékek között elosztva –, és ezek kézzel történő újraépítése DevTools azt jelenti, hogy több száz szabályon kell átkattintani és egyenként másolni az értékeket.
Ez az eszköz egyszerre olvassa be őket. Az oldal minden stíluslapját végigjárja, beleértve a több eredetűeket is, amelyeket maga az oldal nem vizsgálhat, és összegyűjti az összes egyéni tulajdonságot, valamint a soron belüli stílusokban futás közben beállított változókat. A:root változói alap tokens válnak; a témaválasztóval újradefiniált nevek, például.dark, [data-theme="dark"] vagy prefers-color-scheme külön módokká válnak; Az egyes összetevőkre meghatározott változók hatókörként szerepelnek. Minden érték var() láncon keresztül van feloldva, így a ténylegesen megjelenített színt látja, nem csak egy másik változóra való hivatkozást.
Minden token értéke és neve alapján van besorolva – szín, betűcsalád, betűméret, súly, sormagasság, térköz, sugár, árnyék, színátmenet, időtartam, könnyítés vagy z-index –, a színek pedig hexadecimálisra vannak normalizálva, beleértve a csak csatornaformátumot: Tailwind és shadcn use ( 222 47% 11%) és Bootstrap -rgb. A deklarált változók mellett az eszközminták olyan elemeket jelenítettek meg, amelyek a ténylegesen használt színek, betűkészletek, méretek, sugarak és árnyékok jelentésére szolgálnak, használati számlálással – pontosan arra, amire szüksége van egy olyan webhelyen, amely egyáltalán nem használt változókat.
Az exportálás egyetlen kattintással történik. Download tokens JSON elmenti a W3C Design Tokens formátumot ( $value és $type), amelyet a Tokens Studio beépülő modul importál Figma, és Style Dictionary bármilyen platformra kódot alakít. A témamódokat és a megfigyelt értékeket saját csoportjukban tartják, így semmi sem keveredik össze. Download CSS a változókat stíluslapként írja vissza, minden mód az eredeti választó alatt.
Egyéni tulajdonságok minden stíluslapról, beleértve a több eredetű lapokat is, amelyeket az oldal nem tud elolvasni, valamint a futásidőben beállított változókat a soron belüli stílusokban.
.dark, [data-theme] vagy prefers-color-scheme alatti felülírások külön módokká válnak, amelyek az alapérték mellett jelennek meg.
Minden var() lánc feloldásra kerül, és minden token színként, betűtípusként, méretként, térközként, sugárként, árnyékként, időtartamként, könnyítésként vagy z-indexként van beírva.
Hex, rgb, hsl, oklch, megnevezett színek és a csak csatornára vonatkozó értékek: Tailwind, shadcn és Bootstrap use, mind hexadecimálisra normalizálva.
Színek, betűkészletek, méretek, súlyok, sugarak és árnyékok a renderelt elemekből mintavétellel, az egyes megjelenési gyakorisággal.
W3C design-token JSON Tokens Studio és Style Dictionary számára, vagy egy CSS fájl, amely minden módot az eredeti választó alatt tartalmaz.
Importálja a valódi palettát, írja be és térközt Tokens Studio, ahelyett, hogy képernyőképekből választana színeket.
Tekintse meg, hogy egy webhely ténylegesen hány színt és betűméretet használ, és mely értékek kerülik ki az általa meghatározott tokens.
Hasonlítsa össze a sötét mód felülírt változóit a világos értékével egymás mellett, és keresse meg azokat, amelyeket soha nem bíráltak felül.
Exportálja a tokens egyszer, és töltse be őket Style Dictionary vagy a Tailwind konfigurációba, ahelyett, hogy kézzel másolná az értékeket.
Húzza ki a csodált webhely színrendszerét, típusskáláját és sugarait egy fájlba, amelyből dolgozhat.
Kattintson a Design Tokens ikonra a DevSuite Pro dokkban. A kinyerés azonnal lefut, és az összefoglaló számolja a változókat, módokat, színeket és betűkészleteket.
A Színek lapon minden színjelző token jelenik meg, felosztva az egyes témamódok megjelenítéséhez, majd az oldal által megjelenített színeket a felhasználási számokkal együtt.
A tipográfia megtekinti az egyes betűkészletek előnézetét, és felsorolja a méreteket, súlyokat, sormagasságokat és @font-face szabályokat; az utolsó fül a térközt, a sugarakat, az árnyékokat és a mozgást tartalmazza.
A Változók lap felsorol minden egyéni tulajdonságot a szerzői és feloldott értékkel együtt. Váltás az alap, az egyes témamódok és a komponens-hatókörű változók között.
Töltse le Figma számára készült Download tokens JSON Tokens Studio segítségével, vagy Download CSS stíluslaphoz. Jelölje be a jelölőnégyzetet, ha az összetevőkre vonatkozó hatókörű változókat is bele kívánja venni.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 74+ fejlesztői eszközt böngészőjéhez.
