figma-official-skills

figma-official-skills

カタログの簡易情報 — 完全なパッケージ：figma/mcp-server-guide

判断フロー

1. 完全なスキルはすでにインストールされていますか？ このパッケージは16個のスキル（figma-use、figma-design-to-code、figma-generate-design、figma-generate-library、figma-code-connect、figma-create-new-file、figma-generate-diagram、figma-use-figjam、figma-use-slides、figma-use-motion、figma-implement-motion、figma-swiftui、figma-code-workflows、figma-generative-plugins、figma-shaders、figma-spec）をインストールします。最初のスキルを確認します。

   • グローバル：f=~/.agents/skills/figma-use/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • プロジェクト：f=.agents/skills/figma-use/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • installed → スキルは figma-use としてインストール済みです。これを呼び出して続行します
   • pointer → 手順2に進みます

2. 適用範囲を検出してから、インストールします：

   [ -e ~/.agents/skills/figma-official-skills ] && echo "global" || echo "project"
   

   グローバル：

   npx skills add figma/mcp-server-guide --skill figma-use figma-design-to-code figma-generate-design figma-generate-library figma-code-connect figma-create-new-file figma-generate-diagram figma-use-figjam figma-use-slides figma-use-motion figma-implement-motion figma-swiftui figma-code-workflows figma-generative-plugins figma-shaders figma-spec -g -y
   

   プロジェクト：

   npx skills add figma/mcp-server-guide --skill figma-use figma-design-to-code figma-generate-design figma-generate-library figma-code-connect figma-create-new-file figma-generate-diagram figma-use-figjam figma-use-slides figma-use-motion figma-implement-motion figma-swiftui figma-code-workflows figma-generative-plugins figma-shaders figma-spec -y
   

   Claude Code： 会話を離れずにコマンドを実行するには、チャットメッセージの先頭に ! を付けて送信します。

Claude Code プラグインを使う方法：

claude plugin install figma@claude-plugins-official

注意事項

• 必要なもの： Figma アカウント、Figma MCP サーバー（https://mcp.figma.com/mcp）。これは Claude Code プラグインが設定しますが、skills CLI では設定されません。通常の利用には有料 Figma プランの Dev または Full シートが必要です（Starter プラン、View および Collab シートでは、MCP ツールの呼び出しは月6回までに制限されます）
• ライセンス： LICENSE ファイルはありません

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

スキル	呼び出し方
figma-use	「Figma Plugin API を実行」「Figma スクリプト」
figma-design-to-code	「この Figma デザインを実装」「Figma からコードへ」
figma-generate-design	「Figma デザインを生成」「コードから Figma へ」
figma-generate-library	「Figma ライブラリを構築」「Figma のデザインシステム」
figma-code-connect	「コード接続」「Figma とコードを連携」
figma-create-new-file	「Figma ファイルを作成」「新しい FigJam」
figma-generate-diagram	「FigJam で図を作成」
figma-use-figjam、figma-use-slides、figma-use-motion	FigJam、Slides、アニメーション作業では use_figma を使用
figma-implement-motion	「このモーションを実装」「Figma からアニメーションを作成」
figma-swiftui	SwiftUI ↔ Figma のどちらの方向にも対応

以下もインストールされます：figma-code-workflows、figma-generative-plugins、figma-shaders、figma-spec。

概要

デザインとコードの橋渡しを網羅する、Figma 公式のスキルスイートです。Figma のデザインを本番環境向けのコードに変換し、コード変更から Figma の画面を生成または更新し、デザインシステムのライブラリを構築します。また、Code Connect を介して Figma のコンポーネントとコードのコンポーネントを接続し、カスタム自動化のために Figma Plugin API をスクリプト化します。さらに FigJam、Slides、モーション、シェーダー、SwiftUI にも対応します。それぞれのスキルは、対応する Figma MCP ツールを呼び出す前に必ず必要です。

これらのスキルは Figma MCP サーバーを使用するため、サーバーへの接続と Figma アカウントが必要です。Claude Code では、公式プラグインが MCP サーバーとスキルをまとめて設定します。skills CLI を使う場合はスキルのみがインストールされるため、サーバーは自分で追加します（claude mcp add --transport http figma https://mcp.figma.com/mcp）。

使用しないケース

• 既存のデザインシステムに対して、Figma へのすべての書き込みでデザイントークンへの準拠を確認する場合 — claude2figma を使用してください
• Figma の外部でトークンアーキテクチャを扱う場合 — design-tokens-skill を使用してください
• Figma MCP サーバーを使わずに静的なデザインからコードへの変換を行う場合（このスキルはサーバーのツールを前提としています）