claude2figma について
claude2figmaは、Figmaキャンバスへの書き込みをデザインシステムに準拠させる4つのスキルです。トークンベースのデザインシステムを使うユーザー向けで、コンポーネントインスタンスや変数に紐づくスタイルを確認し、キャンバス操作後に準拠状況を検証します。
主な機能
- 01デザインシステム準拠を徹底する4つのスキル
- 02マスターコンポーネントのインスタンスを確認
- 03Figmaの変数とスタイルを必須化
- 04色、書体、間隔、角丸を検証
- 05キャンバス操作後に確認
活用シーン
- 01キャンバスのコンポーネントをマスターに紐付ける
- 02デザインシステムの変数でスタイルを適用
- 03キャンバスへの書き込みのトークン準拠を確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/claude2figmaを入力して読み込まれたか確認します。
同梱ファイルstub.yaml
詳細
claude2figma
カタログ用スタブ — 完全版パッケージ：senlindesign/claude2figma
判断フロー
-
スキルはすでにインストールされていますか？
~/.design-agent-skills/skills/にclaude2figmaまたは関連するスキルディレクトリがあるか確認してください。- はい → 実行して続行します
- いいえ → ステップ 2 に進みます
-
シェルにアクセスできますか？ はい → 以下からインストールしてください。いいえ → コマンドをユーザーに提示してください（Claude Code の場合：チャットメッセージとして
!を付けて送信します。グローバルにインストールするには-gを追加し、プロジェクトのみにインストールするには省略します）。
インストールコマンド
npx skills add senlindesign/claude2figma
インストール後の実行
- スキル名：
claude2figma - トリガー：「claude2figma」、「Figma token compliance」、「Figma variables enforcement」、「design system Figma」
機能
4 つのスキルで構成される強制適用レイヤーです。Figma キャンバスへの書き込みがすべてデザインシステムに準拠するようにします。配置されたコンポーネントがマスターコンポーネントのインスタンス（分離されたものではない）であること、また色、タイポグラフィ、スペーシング、角丸の値が生の値ではなく Figma の変数とスタイルにバインドされていることを確認します。キャンバス上での操作後に、準拠状況を自動で検証します。
使用しない場合
- 既存の Figma デザインの閲覧や監査 —
figma-official-skills（Figma MCP）を使用してください - トークンベースのデザインシステムがない場合のコードからデザインへの変換
- Figma 外部でのトークンアーキテクチャ —
design-tokens-skillを使用してください
コメント
Markdown 対応