Figma Skills は、AI デザインエージェントが特定のコンテキストでどのように動作するかを指導するmarkdownベースの指示書です。これらは再利用可能なカスタムプロンプトと考えてください。一度記述すれば、チームの規約、コンポーネントルール、品質基準をエンコードし、エージェントが毎回自動的にそれらに従うようになります。
誰でもスキルを書くことができます。コードは不要。プラグイン開発も不要。API統合も不要。エージェントが何をすべきか、どのように行うべきかを記述するmarkdownテキストだけです。スキルは、汎用的なUIを生成するエージェントと、あなたのチーム専用のUIを生成するエージェントとの違いを生み出します。
重要なポイント
スキルは、デザインエージェントを汎用的なAIからあなたのチーム専用のAIに変えます。スキルがなければ、エージェントはデフォルトの規約を使用し、あなたの好みを推測します。スキルがあれば、スペーシングシステム、コンポーネントの命名規則、アクセシビリティ要件、ブランドガイドラインを自動的に遵守します。3〜4つのスキルを書く30分の作業で、数週間のエージェント使用における何時間もの修正作業を節約できます。
Figma Skillの構成要素とは？
| スキル要素 | 機能 | 例 |
|---|---|---|
| 名前（/付き） | 呼び出し方 | /create-settings-page |
| 目的 | スキルが行うこと（一文で） | 「チームの規約に従って設定ページを生成する」 |
| ステップ | エージェントが従う順序付けられた指示 | 「1. 各グループにSection Headerを使用する...」 |
| 規約 | エージェントが従わなければならないルール | 「常に8pxグリッドを使用し、絶対配置は使用しない」 |
| コンポーネント | 使用すべき公開コンポーネント | 「ブール値設定にはToggle/Switchを使用」 |
| 変数 | 適用すべきデザイントークン | 「背景にはcolor-surface-primaryを使用」 |
| 禁止事項 | エージェントが避けるべきこと | 「1ページに3つ以上の見出しレベルは使用しない」 |
Figmaは9つのサンプルスキルとともにローンチしました。これらはコンポーネントライブラリの構築、ブリーフからの新しいデザイン生成、アクセシビリティ仕様の作成、マルチエージェントワークフローの調整、デザイントークンとコードの同期をカバーしています。figma.com/community/skillsで探索してください。基礎的なスキル/use-figmaは、エージェントにFigmaの構造的な動作方法についての共通理解を与えます。チームはそこからカスタマイズしていきます。
初めてのスキルを書く（例付き）
最も繰り返し行うデザインタスクから始めましょう。毎週フォームレイアウトを作成するなら、/form-layoutスキルを書きます。以下は完全な実世界の例です：
このスキルは、あなたのチームがフォームをどのように構築するかをエージェントに正確に伝えます。これがなければ、エージェントはFigmaのデフォルト規約を使用します。これがあれば、エージェントが生成するすべてのフォームがあなたの特定の基準に従います — チームメンバー間で一貫し、プロジェクト間で一貫しています。
スキルと他のAIカスタム指示の比較
スキルは、他のAIツールのカスタム指示システムと概念的に似ています：
| ツール | カスタム指示 | 作成者 | 共有可能？ |
|---|---|---|---|
| Figma Skills | デザインエージェントを指導するmarkdownファイル | チームによる手動作成 | はい（コミュニティライブラリ） |
| ChatGPTカスタム指示 | すべてのChatGPT応答を形作るテキスト | ユーザーによる手動作成 | いいえ（個人のみ） |
| Claude Code CLAUDE.md | コーディングエージェント用のプロジェクトレベル指示 | チームによる手動作成 | はい（リポジトリ経由） |
| Hermes Agent Skills | 自動生成される再利用可能なタスクパターン | 使用状況から自動生成 | はい（スキルライブラリ） |
重要な違い：Hermes Agentは完了したタスクから自動的にスキルを作成し、作業しながら学習します。Figmaは手動でのスキル作成が必要で、明示的に教える必要があります。Hermesのアプローチは使用とともにスケールし、Figmaのアプローチはより多くのコントロールを提供しますが、事前の投資が必要です。両方とも、カスタム指示なしでツールを使用するよりも優れたAI出力を生成します。
これらすべてのシステムに共通する根本的な原理は同じです：AIは、あなたの好み、規約、基準についての明示的なコンテキストがあるとより良いパフォーマンスを発揮します。Figma Skill、ChatGPTカスタム指示、Claude CLAUDE.mdファイルのいずれを書く場合でも、ICCSSEフレームワークがより良い指示を生成します。無料のPrompt Optimizerはこの構造を自動的に適用します — スキルの下書きを貼り付けて、より明確なバージョンを取得してください。
すべてのデザインチームに必要な4つの必須スキル
1. /form-layout — チーム全体でフォームデザインを標準化します。（上記の例を参照。）
2. /page-layout — ページ構造の規約を定義します：ヘッダー配置、サイドバー幅、コンテンツ最大幅、フッター構造、ナビゲーションパターン、レスポンシブブレークポイント。
3. /component-variant — 既存システムに合致する新しいコンポーネントバリアントの作成方法をエージェントに伝えます：命名規約、状態定義（default、hover、active、disabled、error）、サイズスケール（sm、md、lg）、ドキュメント要件。
4. /accessibility-check — アクセシビリティ基準を定義します：WCAGレベル（AA vs AAA）、最小タッチターゲットサイズ、コントラスト比、見出し階層ルール、必須ARIAラベル、スクリーンリーダー注釈フォーマット。詳細はアクセシビリティ仕様ガイドをご覧ください。
よくある質問
いくつのスキルを作成すべきですか？
最も一般的なデザインタスクをカバーする3〜4つから始めましょう：フォームスキル、ページレイアウトスキル、コンポーネントバリアントスキル、アクセシビリティチェックスキル。これらは日常のデザイン作業の80%をカバーします。エージェントが一貫性なく処理する繰り返しパターンを特定したら、さらにスキルを追加してください。
スキルは他のスキルを呼び出すことができますか？
はい — スキルは他のスキルを参照でき、チェーン化されたワークフローを作成できます。/new-featureスキルは、入力セクションに/form-layoutを呼び出し、次にコンプライアンスレビューに/accessibility-checkを呼び出すことができます。これにより、単一の呼び出しから複雑な複数ステップのワークフローが可能になります。
スキルはクレジットを消費しますか？
スキル自体（markdown指示）はクレジットを消費しません。スキルが引き起こすエージェントアクション（デザイン生成、コンポーネント編集）は通常レートでクレジットを消費します。よく書かれたスキルは、最初の試行でより良い出力を生成することで実際にクレジットを節約する可能性があります — 反復回数が少ないということは、クレジットを消費する再生成が少ないということです。
スキルをFigmaコミュニティと共有できますか？
はい — Figmaのコミュニティスキルライブラリでスキルを公開・閲覧できます。これにより、一般的なパターン（ダッシュボードレイアウト、オンボーディングフロー、設定ページ）について他のデザインチームが書いたスキルを、ゼロから書くことなく使用できます。
スキルはどこに保存されますか？
スキルはFigma組織または個人アカウントに関連付けられます。チームレベルのスキルはすべてのチームメンバーがアクセス可能で、個人スキルはあなたのみがアクセス可能です。すべてのデザイナーが同じ規約の恩恵を受けられるよう、最も重要なスキルはチームレベルで保存してください。
開示：この記事の一部のリンクはアフィリエイトリンクです。私たちは個人的にテストし、定期的に使用しているツールのみを推奨しています。完全な開示ポリシーをご覧ください。