Design Tokens збирає кожну змінну CSS, колір, стек шрифтів, радіус і тінь, які використовує сторінка, сортує їх за базовими tokens, режимами тем і областями компонентів і завантажує їх як design-token W3C JSON для Figma або як файл CSS.
Система проектування рідко записується так повно, як вона реалізована. Справжня палітра, масштаб інтервалів і зміна типів живуть у таблицях стилів — розподілених по користувальницьких властивостях, перевизначеннях тем і жорстко закодованих значеннях — і їх перебудова вручну за допомогою DevTools означає клацання сотнями правил і копіювання значень по одному.
Цей інструмент зчитує їх усі одночасно. Він переглядає кожну таблицю стилів на сторінці, включно з перехресними джерелами, які самій сторінці не дозволено перевіряти, і збирає всі власні властивості, а також змінні, встановлені під час виконання у вбудованих стилях. Змінні на:root стають базовими tokens; ті самі імена, перевизначені в селекторі теми, наприклад.dark, [data-theme="dark"] або prefers-color-scheme стають окремими режимами; змінні, визначені для окремих компонентів, перераховані як обмежені. Кожне значення розпізнається через ланцюжок var(), тож ви бачите колір, який насправді відображається, а не лише посилання на іншу змінну.
Кожен token класифікується за його значенням і назвою — кольором, сімейством шрифтів, розміром шрифту, товщиною, висотою рядка, інтервалом, радіусом, тінню, градієнтом, тривалістю, ослабленням або z-індексом — і кольори нормалізуються до шістнадцяткового, включаючи формати лише для каналів, які використовують Tailwind і shadcn ( 222 47% 11%) і триплети -rgb Bootstrap. Окрім оголошених змінних, інструмент відтворив елементи для звітів про кольори, стеки шрифтів, розміри, радіуси та тіні, які фактично використовуються, із підрахунками використання — саме те, що вам потрібно на сайті, який взагалі ніколи не використовував змінні.
Експорт здійснюється в один клік. Download tokens JSON зберігає формат W3C Design Tokens ( $value і $type), який плагін Tokens Studio імпортує до Figma, а Style Dictionary перетворює на код для будь-якої платформи; режими теми та спостережувані значення зберігаються у власних групах, тому нічого не плутається. Download CSS записує змінні назад у вигляді таблиці стилів із кожним режимом під своїм оригінальним селектором.
Користувацькі властивості з кожної таблиці стилів, включаючи аркуші різних джерел, які сторінка не може прочитати, а також змінні, встановлені під час виконання у вбудованих стилях.
Перевизначення в.dark, [data-theme] або prefers-color-scheme стають окремими режимами, які відображаються поряд із базовим значенням.
Кожен ланцюжок var() розпізнається, і кожен token набирається як колір, шрифт, розмір, інтервал, радіус, тінь, тривалість, easing або z-індекс.
Шістнадцятковий, rgb, hsl, oklch, іменовані кольори та значення каналу, які використовують Tailwind, shadcn і Bootstrap, усі вони нормалізовані до шістнадцяткового.
Кольори, набори шрифтів, розміри, ваги, радіуси та тіні, взяті з візуалізованих елементів, із зазначенням частоти появи кожного з них.
design-token W3C JSON для Tokens Studio та Style Dictionary або файл CSS із кожним режимом під оригінальним селектором.
Імпортуйте справжню палітру, текст і інтервали в Tokens Studio замість вибору кольорів зі знімків екрана.
Подивіться, скільки кольорів і розмірів шрифту фактично використовує сайт і які значення обходять визначені ним tokens.
Порівняйте кожну змінну, яку темний режим замінює, з її світлим значенням поруч і знайдіть ті, які ніколи не замінювалися.
Експортуйте tokens один раз і передайте їх у Style Dictionary або конфігурацію Tailwind, а не копіюйте значення вручну.
Перемістіть систему кольорів, масштаб шрифту та радіуси сайту, яким ви захоплюєтеся, у файл, з яким можна працювати.
Натисніть піктограму Design Tokens у док-станції DevSuite Pro. Видобування запускається одразу, а зведені дані підраховують змінні, режими, кольори та стеки шрифтів.
На вкладці «Кольори» кожен token кольору відображається як зразок, розділений для відображення кожного режиму теми, а потім кольори, які відображає сторінка, із підрахунками використання.
Типографіка попередньо переглядає кожен стек шрифтів і перераховує розміри, товщину, висоту рядків і правила @font-face; остання вкладка охоплює інтервали, радіуси, тіні та рух.
На вкладці «Змінні» перераховано кожну настроювану властивість із авторськими та вирішеними значеннями. Перемикання між базовим режимом, режимом кожної теми та змінними з областю компонента.
Download tokens JSON для Figma через Tokens Studio або Download CSS для таблиці стилів. Поставте прапорець, щоб також включити змінні області дії компонента.
Встановіть DevSuite Pro безкоштовно та отримайте понад 74 інструментів розробника
