朝っぱらから、こもりです。おはようございます。
公開後に連日のアップデートで申し訳ないです。Figma版「figma-tokenize」「figma-componentize」のスキルを更新しました。キャンバス内で適用されている色を変数化する際、アルファ値(不透明度)がある色に透明度を設定せずに視覚的に問題ないように反映するFigma側での挙動をClaude Code用スキルと同じ設定方法に変更しました。
- figma-tokenize / figma-componentize:色変数の透明度(alpha)バインド方式を修正・簡素化
そういえば、Figma Design Agentのチャットウィンドウのコンテキストはそんなに大きくはないようで、 figma-layer-rename → figma-tokenize → figma-componentize とひとつのウィンドウで連続実行するのはお薦めしません。ひとつのスキルを実行する毎にチャットは新しくした方が良いかもです。連続実行すると最後はおばかちゃんになるかも。
双方の講座のスキル一覧、使い方など、以下の公開中のREADME.mdでご確認ください。
以下、アップデートの詳細です。
更新スキル
figma-tokenize (Figma版のみ)
※本スキルは KMRVID Figma Skills 限定です
色変数の透明度(alpha)バインド方式を、より確実な単一パスの方式に簡素化しました。
-
setBoundVariableForPaintはバインド時にpaintのopacityを変数のa値へ自動同期することを、Claude Code(MCP)環境・Figma Design Agent環境の両方で確認 - これに伴い、従来行っていた「まずopacityフルで一旦バインドしてから、paintのopacityを個別に設定し直す」という2パス方式のワークアラウンドが不要になったため撤去
- 実ファイルで82件のfill/strokeをバインドし、全サンプルでalphaの自動同期が正しく機能することを確認済み
- この修正はfigma-componentize側の不具合(下記)とも根本原因が共通しています
figma-componentize
※本スキルは KMRVID Figma Skills 限定です
バリアントの色を変数化する際の透明度(alpha)バインドの不具合を修正しました。
- これまでは変数名の
-aNNサフィックス(例:base/black-a30)から透明度を逆算してpaintのopacityに設定し直すロジックが入っていたが、setBoundVariableForPaintはバインド時に変数のa値へ自動で同期するため、このロジックが逆に有害だった -
-aNNを含まない命名の新規変数(半透明のオーバーレイ色など)が、透明度未設定のまま作られてフルオパシティになり、画像の上に不透明な黒が乗ってしまう事故が起きていた - 修正後は、既存変数へのバインドは
setBoundVariableForPaintのみでよく、新規に半透明の変数を作る場合は値作成時に必ずaへ不透明度を入れる運用に変更
入手・更新方法
KMRVID Claude Skills をお持ちの方は kmrvid-skills 圧縮ファイルの最新版を再ダウンロードして、更新されたフォルダを ~/.claude/skills/ に上書きコピーしてください。(Figma版をお使いの方は、Figmaエージェント側に登録し最新化してご利用ください)。
KMRVID Figma Skills 単体パッケージをお持ちの方は、kmrvid-skills-figma 圧縮ファイルの最新版を再ダウンロードしてFigmaエージェント側に登録し最新化してご利用ください(新規スキルの追加もこちらの手順で反映されます)。
それでは、よい一日を。