本記事では、Figma Skillsの基礎知識をはじめ、代表的なSkillsの特徴や導入方法、基本的な使い方までを解説します。

• Figma Skillsは、デザイン制作やコーディングなどのタスクをAIエージェントに実行させるための手順やルールをまとめた指示書です。主にマークダウン形式のドキュメントとして提供され、AIエージェントに読み込ませて使用します。
• Claude CodeなどのAIエージェントは、Skillsに定められた手順に従い、Figma MCPサーバーを介してデザイン情報の取得やFigma上の編集を行います。これにより、指示の抜け漏れやアウトプットのばらつきを抑えながら、コード化やデザイン編集を進めやすくなります。
• Figma Design、FigJam、Figma Slidesなどの用途に応じた公式Skillsに加え、ユーザーコミュニティーからもさまざまなSkillsが提供されています。タスクに合ったSkillsを活用することで、繰り返しの指示や確認・修正の負担を減らし、作業の効率化が期待できます。

Figma Skillsとは？

Figma上でAIエージェントと作業を進めるための手順やガイドラインを記述したドキュメントです。

このファイルには、ファイルの作成やデザインシステムに沿ったUI構築、独自の基準に基づくデザインレビューなど、特定のタスクをAIエージェントに正確に実行させるためのルールがまとめられています。

Skillsを活用することで、タスクのたびに長文のプロンプトを入力する手間が省けます。また、指示の抜け漏れによるエラーや複雑な処理の中断を防ぎ、安定してAIを活用できる環境を構築できます。

さらにFigma Skillsは、Figma内のAIエージェントからスラッシュコマンドで直接呼び出せるほか、MCPサーバーを経由してClaude Codeなどの外部AIツールとも連携可能です。

Figma内で自社ルールのUIを生成させたり、Claude Codeにデザインを渡してコード化させたりと、チームごとのワークフローに合わせて活用できます。

■関連記事
Figma AIの基本機能や料金プランについては、こちらの記事で詳しく解説しています。

AIエージェントにおける「Skills」とは？

AIエージェントにおける「Skills」とは、タスクを完了するための手順やルールをまとめた指示書です。Skillsを読み込ませておくことで、「自社の制作ガイドラインに沿ったデザイン制作やコーディング」といった定型的なタスクを、あらかじめ定めた手順に沿って進められます。アウトプットのばらつきを抑えながら、効率的に作業を進められる点が特徴です。タスクのたびに手順や完了条件をプロンプトで指示しなくても、同じ手順を再利用できることが、Skillsを活用するメリットです。

通常、Skillsは、再利用可能なマークダウン形式の指示と、スクリプトやアセット、その他のデータなどのサポートファイルで構成されています。

従来のFigma MCPサーバーを利用した作業との違い

Figma MCPサーバーでは、従来からAIエージェントとFigmaを連携し、デザインをもとにコードを生成したり、コードで実装したUIを編集可能なFigmaのデザインとして取り込んだりすることが可能でした。

Skillsを使った場合の違いは、Figma MCPサーバーを介してAIエージェントが行う作業を、あらかじめ用意した指示書によって、より厳密にコントロールできる点にあります。作業の手順や守るべきルール、使用するコンポーネント、完了時の確認項目などをSkillsに定義しておくことで、AIエージェントにその内容を参照させながらタスクを進められます。

Skillsを活用すれば、これまでタスクごとにプロンプトで伝えていた指示を再利用し、デザインシステムやプロジェクト固有のルールに沿って作業を進めやすくなります。これにより、指示の抜け漏れや生成結果のばらつきを抑え、AIエージェントと連携する作業の一貫性と効率を高める効果が期待できます。

Figmaが提供するSkillsの代表例

Figma公式が提供するSkills（2026年8月時点）の代表例とその効果について解説します。

Figma Design連携 Skills

figma-use

FigmaにAIエージェントが書き込みやデザイン作成をするための基礎的なSkillsです。

「ファイルにデザインを作成する」「デザインを編集する」といった基本的な作業を行ってもらうためにも必要なSkillsです。figma-useは他のスキルを使用する際にも必須スキルとなっているので、まずはfigma-useを読み込ませておくとスムーズです。

figma-generate-design

AIエージェントが指定したFigmaキャンバスへアクセスし、新たなデザインを生成するためのSkillsです。

既存のデザインシステムのコンポーネントなどを活用して、要件に合わせたUIデザインをAIエージェントに構築してもらうことができます。例えば、ローカル環境にある実装コードやテキストの要件定義をAIエージェントに読み込ませて、それをソースとしてFigma側にデザインを作ってもらう（Code to Canvas）、といった連携も可能になります。

■関連記事
AIエージェント（Figma MakeやCursorなど）を活用してデザインシステムを運用・実装する具体的なフローについては、こちらの記事で実践事例を交えて紹介しています。

figma-generate-library

コードをベースとしてFigmaにあるデザインシステムの更新や構築をするためのSkillsです。

例えば、フロントエンドのソースコードをAIエージェントに読み込ませることで、コードに沿ったFigma上のコンポーネント作成や更新をスムーズに行うことが可能になります。エンジニアが手作業でデザインシステムを再現する手間を省けるため、実装コードとデザインの乖離リスクを防ぎながら、効率的な運用環境の構築が期待できます。

FigJam連携 Skills

figma-use-figjam

FigJam操作系のSkillsを使用する場合に必須となるSkillsです。

キャンバス上の付箋、図形、表、コードブロックなどの追加や編集を、AIエージェントが直接行えるようになります。

figma-generate-diagram

FigJamでフローチャートやアーキテクチャ図を作成・編集する際に使用するSkillsです。

テキスト指示やドキュメントを基に、フローチャート、シーケンス図、ガントチャートなどを生成できます。生成された図はFigJam上でパーツごとに直接編集できるため、システム設計やアイデア出しの初期作業をスムーズに進められます。

Figma Slides連携 Skills

figma-use-slides

Figma Slides内でAIエージェントを活用したい際に必須となるSkillsです。

新規スライドの作成や、図形・テキストの配置から編集、テーマの適用など、コンテンツ作成に関するさまざまなタスクをAIエージェントに行ってもらうことができます。

コーディング連携 Skills

figma-design-to-code

AIエージェントがFigmaファイルに直接アクセスして、デザインをコード化するためのskillsです。

レイアウトやコンポーネントを正確に理解できるようになり、高品質なコードを生み出してくれます。

figma-code-connect

Figma上に登録された「コンポーネントと実コードの紐付け情報（Code Connect）」をAIエージェントが参照するためのSkillsです。

これにより、Figmaのデザインデータから、プロジェクト独自の既存コンポーネント（Reactなど）やProps（引数）を再利用した正確な実装コードを出力できるようになります。

Figma公式以外にもSkillsが提供されている

Figmaのコミュニティでは、Figma公式以外からもSkillsが提供されています。

Figma MCPサーバーの活用の幅をさらに広げるSkillsが共有されているので、Figmaや連携するAIツールをより効率よく効果的に活用したい方はチェックしてみましょう。

Figma Skillsの取得方法

取得方法は主に下記の2つがあります。

• AIツール側のFigmaプラグインをインストールするFigmaプラグインのインストール
• Figmaから直接ダウンロードする

Claude CodeやCursorなど、Figmaとすでに連携されているAIツールを使用するのであれば、FigmaプラグインをインストールするだけでSkillsが学習されます。Figma MCPサーバーにアクセスできるツールを使う場合は、まずはFigmaプラグインをインストールできないか探してみましょう。

Figmaプラグインがない場合は、Skillsを直接ダウンロードしてインストールすることができます。使用するAIツールにファイルの解凍と適切なフォルダへの設置を指示すれば学習をしてくれるはずです。

よくある質問

Q. Figma Skillsを使うには何が必要ですか？

A. Figmaのアカウントと、Claude CodeやCursorなどの連携対応AIツールを用意したうえで、以下のステップで設定を行います。

1. Figma側でアクセス用トークンを発行する
外部のAIツールがFigmaのデータにアクセスできるよう、トークン（認証キー）を発行します。

• Figma画面左上のアカウントアイコンから設定画面を開き、[セキュリティ] タブを選択します。
• 「個人アクセストークン」セクションの [新規トークンを作成] をクリックします。
• 任意のトークン名を入力し、利用目的に応じた権限にチェックを入れて発行・コピーします。

本記事の公式Skillsを試す場合は、ひとまず以下の3項目へのチェックを推奨します

• ファイル： file_content:read（デザインデータの読み取り）
• デザインシステム： library_assets:read（コンポーネントデータの読み取り）
• 開発： file_code_connect:write（コード情報の書き込み）

※組織アカウント（Enterprise等）をご利用の場合、管理者の設定によってトークンの発行や利用が制限されていることがあります。

2. AIツールにFigma MCPサーバーを設定する
使用するAIツール（Claude Code、Cursor、Claude Desktopなど）のMCP設定画面や設定ファイルを開き、Figma MCPサーバーの接続情報を追加します。このとき、手順1でコピーしたトークンを環境変数（FIGMA_ACCESS_TOKEN など）として登録することで、AIが自動的にFigmaのSkillsを認識して使えるようになります。

※【重要】Skillsごとの動作要件について
Skillsによって必要な権限や依存関係は異なります（例：figma-generate-design を動かすには、土台となる figma-use も同時に読み込ませる必要がある等）。設定の際は、各Skillsをダウンロードした配布元（GitHubのREADMEやFigma Communityの説明欄）の記載を併せて確認してください。
※各AIツールごとの具体的な設定ファイルの書き方や最新のセットアップ手順については、Figma公式の開発者向けドキュメントを参照してください。
Figma Context Server (MCP) – Figma Developers

3. 作業対象を指定し、AIへ指示を出す
Figmaの対象ファイルURLや特定のフレームを指定して、AIツール側で実行したいタスクを指示します。

指示の例:
「このFigma URL（URLを貼り付け）のデザインをReactでコード化して」
「この画面構成を元に、別パターンのUIデザインを生成して」
「このコンポーネントで使われているテキストやカラーの情報を抽出して」
指示を受けると、AIが設定されたSkillsを自動で呼び出し、Figma上のデータを読み取って目的の処理（コード出力、デザイン生成、データ抽出など）を実行します。

Q. 従来のAIによるコード生成との違いは何ですか？

A. 最大の違いは「再現性」と「品質の担保」です。単発のプロンプトで毎回指示を出すのではなく、事前にデザインシステムのルールや手順を学習させておくことで、一貫した高い品質でコード生成やデザイン編集を行わせることができます。

まとめ

本記事では、Figma Skillsの仕組みや活用するメリット、Figma公式が提供する代表的なSkillsについて解説しました。

Figma Skillsを活用すると、Figma MCPサーバーを介してAIエージェントが行う作業を、あらかじめ定めた手順やルールに沿って進めやすくなります。タスクごとに同じ指示を繰り返す負担を減らし、デザイン制作やコーディングなどの作業に一貫性を持たせられる点がメリットです。

導入を検討する際は、まず、社内で繰り返し発生している作業や、担当者ごとに手順や成果物の品質が異なる業務を整理してみましょう。守るべきルールや確認項目をSkillsとして定義することで、AIエージェントを業務に組み込みやすくなります。

AIツールの導入を個別の業務効率化で終わらせず、事業成果や業務全体の改善につなげたい方に向けて、ニジボックスの支援内容をまとめた資料をご用意しています。自社でAIをどのように活用できるか検討する際にお役立てください。

自社に適したAIの活用方法を具体化したい方や、デザイン・開発プロセスへの導入、運用ルールの整備を検討されている方は、以下よりお気軽にご相談ください。現在の業務や課題を伺い、AIを活用できる領域や導入の進め方をご提案します。