mcpField
F
figma-variables-tokens-generator

figma-variables-tokens-generator

github.com/podoデザイン・UI29161 回インストール1 日前に更新
リポジトリ

figma-variables-tokens-generator について

figma-variables-tokens-generatorは、構造化された質問に基づいてデザイントークンのZIPを生成するスキルです。DTCG準拠のJSONを階層別に整理し、Figma Variablesへ読み込むプラグインも提供します。

主な機能

  1. 01質問に基づくトークン生成
  2. 02DTCG準拠のJSONファイル
  3. 03プリミティブ・セマンティック・コンポーネントの階層
  4. 04ZIPアーカイブ出力
  5. 05Figmaインポート用プラグイン

活用シーン

  1. 01デザインシステム用トークンセットの作成
  2. 02階層別のトークン整理
  3. 03生成したJSONのFigma Variablesへの読み込み

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/podo/design-agent-skills --skill figma-variables-tokens-generator

インストール後、Claude Code で/figma-variables-tokens-generatorを入力して読み込まれたか確認します。

同梱ファイルstub.yaml

詳細

figma-variables-tokens-generator

カタログの概要 — パッケージ全体はこちら：Shanmus4/figma-variables-tokens-generator

判断フロー

  1. スキルはすでにインストールされていますか？ ~/.design-agent-skills/skills/ に figma-variables-tokens-generator または関連ディレクトリがあるか確認します。

    • はい → 呼び出して続行します
    • いいえ → 手順 2 に進みます

  2. シェルにアクセスできますか？ はい → 以下のコマンドでインストールします。いいえ → コマンドをユーザーに提示します（Claude Code：チャットメッセージとして ! を付けて送信します。グローバルにインストールする場合は -g を追加し、プロジェクトのみにインストールする場合は省略します）。

インストールコマンド

npx skills add Shanmus4/figma-variables-tokens-generator

インストール後の呼び出し

  • スキル名：figma-variables-tokens-generator
  • トリガー：「Figma variables」、「token generator」、「W3C token ZIP」、「Shanmus4」

機能

構造化された質問票でデザインシステムのニーズを把握し、W3C Design Token Community Group（DTCG）に準拠した ZIP アーカイブを生成します。ZIP には、コレクション階層（プリミティブ（生の値）、セマンティック（コンテキストに応じたエイリアス）、コンポーネント（コンポーネント固有のトークン））ごとに整理された JSON トークンファイルが含まれます。また、階層間の依存関係の順序を尊重しながら、これらの JSON ファイルを Figma Variables にインポートする、対応する Figma プラグインも提供します。

使用しないケース

  • コード側でのトークン管理やパイプラインには、design-tokens-skill を使用します
  • Figma をベースとしていない既存のデザインシステム
  • トークンに関連しない Figma のデザイン操作には、Figma MCP（figma-official-skills）を使用します

コメント

Markdown 対応