mcpField
F
figma-library-variables

figma-library-variables

github.com/southleftデザイン・UI94123 回インストール10 週間前に更新
リポジトリ

figma-library-variables について

figma-library-variables は、現在の Figma ファイルが購読しているチームライブラリの変数を検索・インポートするスキルです。インポートした変数には、バインドや参照に使えるローカル ID が付与されます。

主な機能

  1. 01購読中ライブラリの変数一覧
  2. 02ライブラリ・コレクション・型で絞り込み
  3. 03変数のインポートとローカル ID の取得
  4. 04再インポート時の冪等性

活用シーン

  1. 01チームライブラリのデザイン変数検索
  2. 02ライブラリ変数の現在のファイルへの取り込み
  3. 03インポート変数のノードプロパティへのバインド

インストール

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

$npx skills add https://github.com/southleft/figma-console-mcp-skills --skill figma-library-variables

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

同梱ファイルscripts/import-library-variable.jsscripts/list-library-variables.js

詳細

figma-library-variables — チームライブラリの変数を検出してインポートする

現在のファイルが登録しているライブラリで公開されている変数を参照し、必要なものをインポートします。インポートした変数には、ローカル変数と同じように動作するローカル ID が割り当てられます(バインド、読み取り、参照ができます)。

スキルの適用範囲

  • use_figma のルール — まず公式の figma-use スキルを読み込みます。これは Figma Plugin API の包括的なリファレンスです。このスクリプトで必要となる基本事項:トップレベルの await と return を使ったプレーンな JS(IIFE や figma.closePlugin() は使用しません。console.log は返されません)、各スクリプトの先頭で入力を const としてインラインで定義、色は 0~1 の範囲、テキスト操作の前にフォントを読み込み、await figma.getNodeByIdAsync(...) を使用し、エラーはアトミックに処理します(スクリプトが失敗すると何も適用されません。エラーを読み、修正して再試行してください)。
  • ローカル(ライブラリ以外の)変数 → figma-export-tokens、figma-manage-variables

ワークフロー

  1. 検出。 scripts/list-library-variables.js を use_figma 経由で実行します(skillNames: "figma-library-variables")。必要に応じて LIBRARY_NAME / COLLECTION_NAME / TYPE フィルターを設定します。各登録済みコレクションと、その中のすべての変数の key が返されます。
  2. インポート。 変数の key を scripts/import-library-variable.js に入力して実行します。それぞれに新しい localId が返されます。再インポートしても、同じローカル ID が使われます。
  3. 使用。 インポートした変数をノードのプロパティにバインドするか、ローカルのセマンティックトークンから参照します(バインドについては figma-use / figma-manage-variables を参照)。

注意事項

  • 表示されるのは登録済みのライブラリのみです。コレクションが見つからない場合は、先にファイルのライブラリ設定でライブラリを有効にしてください(Figma での手動操作が必要です)。
  • getVariablesInLibraryCollectionAsync が受け取るのは、ID ではなくコレクションのキーです。
  • ライブラリ変数はソースへの読み取り専用の参照です。値はここではなく、ライブラリファイルで編集してください。

コメント