figma-library-variables について
figma-library-variables は、現在の Figma ファイルが購読しているチームライブラリの変数を検索・インポートするスキルです。インポートした変数には、バインドや参照に使えるローカル ID が付与されます。
主な機能
- 01購読中ライブラリの変数一覧
- 02ライブラリ・コレクション・型で絞り込み
- 03変数のインポートとローカル ID の取得
- 04再インポート時の冪等性
活用シーン
- 01チームライブラリのデザイン変数検索
- 02ライブラリ変数の現在のファイルへの取り込み
- 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
ワークフロー
- 検出。
scripts/list-library-variables.jsをuse_figma経由で実行します(skillNames: "figma-library-variables")。必要に応じてLIBRARY_NAME/COLLECTION_NAME/TYPEフィルターを設定します。各登録済みコレクションと、その中のすべての変数のkeyが返されます。 - インポート。 変数の
keyをscripts/import-library-variable.jsに入力して実行します。それぞれに新しいlocalIdが返されます。再インポートしても、同じローカル ID が使われます。 - 使用。 インポートした変数をノードのプロパティにバインドするか、ローカルのセマンティックトークンから参照します(バインドについては
figma-use/figma-manage-variablesを参照)。
注意事項
- 表示されるのは登録済みのライブラリのみです。コレクションが見つからない場合は、先にファイルのライブラリ設定でライブラリを有効にしてください(Figma での手動操作が必要です)。
getVariablesInLibraryCollectionAsyncが受け取るのは、ID ではなくコレクションのキーです。- ライブラリ変数はソースへの読み取り専用の参照です。値はここではなく、ライブラリファイルで編集してください。
コメント
Markdown 対応