Design Tokens、ページが使用するすべてのCSS変数、色、フォント スタック、半径、シャドウを収集し、ベースtokens、テーマ モード、コンポーネント スコープに分類し、Figma用のW3C design-token JSONまたはCSSファイルとしてダウンロードします。
設計システムが実装されるまで完全に文書化されることはほとんどありません。実際のパレット、間隔スケール、タイプ ランプはスタイルシート内に存在し、カスタム プロパティ、テーマのオーバーライド、ハードコードされた値にまたがっています。これらをDevToolsから手動で再構築するには、何百ものルールをクリックして値を 1 つずつコピーする必要があります。
このツールはそれらをすべて一度に読み取ります。これは、ページ自体が検査できないクロスオリジンのものを含む、ページ上のすべてのスタイルシートを調べ、すべてのカスタム プロパティと、インライン スタイルで実行時に設定される変数を収集します。:root変数はベースtokensになります。.dark、[data-theme="dark"]、またはprefers-color-schemeなどのテーマセレクターで再定義された同じ名前は別のモードになります。個々のコンポーネントで定義された変数は、スコープ付きとしてリストされます。すべての値はvar()チェーンを通じて解決されるため、別の変数への参照だけでなく、実際にレンダリングされる色が表示されます。
各tokenは、その値と名前 (色、フォント ファミリー、フォント サイズ、太さ、行の高さ、間隔、半径、影、勾配、継続時間、イージング、または Z インデックス) から分類され、色はTailwindとshadcn使用するチャネル専用形式 ( 222 47% 11%) およびBootstrapの-rgbトリプレットを含む 16 進数に正規化されます。このツールは、宣言された変数に加えて、レンダリングされた要素をサンプリングして、実際に使用されている色、フォント スタック、サイズ、半径、シャドウを使用回数とともにレポートします。これは、変数をまったく採用したことのないサイトでまさに必要なものです。
エクスポートには 1 回のクリックが必要です。Download tokens JSON、W3C Design Tokens形式 ( $valueおよび$type) を保存します。これは、Tokens StudioプラグインによってFigmaおよびStyle Dictionaryにインポートされ、あらゆるプラットフォーム用のコードに変換されます。テーマのモードと観測値はそれぞれ独自のグループに保持されるため、混同されることはありません。Download CSS、各モードが元のセレクターの下にある変数がスタイルシートとして書き戻されます。
ページが読み取れないクロスオリジン シートを含むすべてのスタイルシートのカスタム プロパティと、インライン スタイルで実行時に設定される変数。
.dark、[data-theme]、またはprefers-color-schemeの下のオーバーライドは別個のモードになり、基本値と並べて表示されます。
すべてのvar()チェーンが解決され、各tokenは色、フォント、サイズ、間隔、半径、影、継続時間、イージング、または Z インデックスとして入力されます。
Hex、rgb、hsl、oklch、名前付きカラー、およびTailwind、shadcnおよびBootstrap使用するチャネルのみの値はすべて 16 進数に正規化されています。
レンダリングされた要素からサンプリングされた色、フォント スタック、サイズ、ウェイト、半径、シャドウと、それぞれの出現頻度。
Tokens StudioおよびStyle Dictionary用のW3C design-token JSON、または元のセレクターの下にあるすべてのモードを含むCSSファイル。
スクリーンショットから色を選択する代わりに、実際のパレット、入力、間隔をTokens Studioにインポートします。
サイトが実際に使用している色とフォント サイズの数、および定義されているtokensをバイパスする値を確認します。
ダーク モードでオーバーライドされるすべての変数をライトの値と並べて比較し、オーバーライドされなかった変数を見つけます。
値を手動でコピーするのではなく、tokens一度エクスポートして、Style DictionaryまたはTailwind構成にフィードします。
気に入った場所のカラー システム、タイプ スケール、半径を作業可能なファイルに取り込みます。
DevSuite ProドックでDesign Tokensアイコンをクリックします。抽出はすぐに実行され、要約では変数、モード、色、フォント スタックがカウントされます。
[カラー] タブには、すべてのカラーtokenが見本として表示され、各テーマ モードを表示するために分割され、続いてページがレンダリングするカラーと使用数が表示されます。
タイポグラフィーでは、各フォント スタックをプレビューし、サイズ、太さ、行の高さ、@font-faceルールをリストします。最後のタブでは、間隔、半径、シャドウ、モーションをカバーします。
[変数] タブには、すべてのカスタム プロパティとその作成および解決された値がリストされます。基本モード、各テーマ モード、およびコンポーネント スコープの変数を切り替えます。
Tokens Studio経由でFigmaのDownload tokens JSONか、スタイルシートのDownload CSS。コンポーネントスコープの変数も含めるには、チェックボックスをオンにします。
