Figma MCPサーバーへのビルドエージェントの接続

Figma モデルコンテキストプロトコルサーバーコンソール (MCP) サーバーを ビルドエージェント に接続して、 ServiceNow AI Platform で Figma デザインをエンタープライズ グレードのアプリケーションに変換する速度を加速します。

始める前に

必要なロール：admin

このタスクについて

Figma MCP サーバーを ビルドエージェント に接続すると、 ビルドエージェント は Figma ファイルから設計データにアクセスできるようになります。接続は、 ビルドエージェント が設計とその意図を理解するのに役立ち、設計に一致するアプリケーションを作成できるようにします。

Figma Developer Portalにアクセスして、Figma MCPサーバーを ビルドエージェントに接続します。OAuth アプリを作成して、クライアント ID とクライアントシークレットを取得します。次に、認証情報を使用して OAuth プロセスを処理するように ServiceNow IDE を設定します。

• ビルドエージェントとFigma MCPサーバーの詳細については、「MCP 接続と ビルドエージェント」を参照してください。
• サポートされている他の MCP サーバーへの接続の詳細については、「 サポートされている MCP サーバーへのビルドエージェントの接続」を参照してください。

手順

1. Figma での OAuth アプリの構成
2. ServiceNow IDEでの OAuth プロバイダーの構成
3. Figma MCP サーバーを接続する ビルドエージェント

   図 : 1. Figma と ビルドエージェント

   

Figma での OAuth アプリの構成

Figma で OAuth アプリケーションを作成し、Figma MCP サーバーが OAuth を介してユーザーを認証し、 ビルドエージェント に Figma デザインへのアクセス権を付与できるようにします。

始める前に

Figma Pro、Org、またはEnterpriseプランのDevまたはFullシートが必要です。

必要なロール：admin

このタスクについて

Figma MCP (Model Context Protocol) サーバーは、認証に OAuth を使用し、インストールされている ビルドエージェント が Figma 設計データにアクセスできるようにします。Figma MCP サーバーを ビルドエージェント に接続するには、Figma で OAuth アプリを作成する必要があります。このプロセスでは、クライアント ID とクライアントシークレットが生成されます。 ServiceNow はこれらの認証情報を使用して OAuth プロセスを開始し、Figma アカウントでユーザーを認証します。

手順

ステップ1:FigmaでOAuthアプリケーションを作成し、クライアントIDとクライアントシークレットを取得します。

1. Figma 開発者ページに移動します。
2. [ 新しいアプリを作成] を選択します。
3. フォームに次の情報を入力します。

   フィールド	説明
   名前	アプリケーションの名前。例:ServiceNow 統合。
   アプリのオーナーを選択	アプリを所有する必要があるチームまたは組織。 重要: 入力した値は変更できません。

4. [アプリを作成] を選択します。
   クライアント ID とクライアントシークレットが生成されます。
5. クライアント ID とクライアントシークレットは、 ServiceNow IDE での OAuth セットアップに必要なため、安全に保存します。
   重要:

   このウィンドウを閉じると、クライアントシークレットを再度表示することはできません。

6. [Done (完了)] を選択します。

ステップ2:FigmaでOAuthアプリを構成して公開します。

7. 作成したアプリケーションを開きます。
8. オプション: [ 全般 ] タブで、アプリのロゴをアップロードし、簡単な説明を入力します。
9. [OAuth 認証情報] タブの [リダイレクト URL] フィールドに、https://<instance name>.service-now.com/oauth_redirect.do という URL を追加します。次に、<インスタンス名>を実際のServiceNowインスタンス名に置き換えます。
   OAuth フローは、リダイレクト URL のリストに含まれる ServiceNow インスタンスでのみ機能します。OAuth フローを機能させるすべてのインスタンスをこのリストに追加してください。

   リダイレクト URL はいつでも追加できます。

10. [OAuth スコープ] タブの [MCP] セクションで、[ mcp:connect ] チェックボックスをオンにします。
    重要:

    [MCP] セクションが表示されない場合は、 ServiceNow アカウントマネージャーまたは ServiceNow サポート (ServiceNow サポートにお問い合わせください) に連絡して、MCP コネクトスコープを有効にしてください。MCP 機能を有効にすることができるように、必ずクライアント ID を共有してください。
11. [ 公開] タブで、[ プライベート ] チェック ボックスがオンになっていることを確認し、[ 公開] を選択します。

ServiceNow IDEでの OAuth プロバイダーの構成

OAuth アプリケーションレジストリと認証情報を設定して、 ServiceNow IDE が Figma に接続できるようにします。

始める前に

必要なロール：admin

手順

ステップ 1:アプリケーションレジストリレコードを作成します。

1. ServiceNow インスタンスで、 システム OAuth > アプリケーションレジストリー.
2. [新規] を選択します。
3. インターセプターページで、[ サードパーティ OAuth プロバイダーに接続] を選択します。
4. フォームに次の詳細を入力します。

   フィールド	説明
   名前	一意の名前。例:Figma OAuth プロバイダー。
   クライアント ID	Figma アプリから取得したクライアント ID。
   クライアントシークレット	Figma アプリから取得したクライアントシークレット。
   デフォルトの権限許可タイプ	ドロップダウンリストから [認証コード ] を選択します。
   認証 URL	https://www.figma.com/oauth.
   トークン URL	https://api.figma.com/v1/oauth/token.
   リダイレクト URL	Figma アプリで追加したリダイレクト URL。
   認証情報の送信	基本認証ヘッダーとして選択します。

5. [Submit (送信)] を選択します。

ステップ 2:OAuth スコープを定義する

6. 保存したアプリケーションレジストリレコードで、関連リストまで下にスクロールします。
7. [OAuth エンティティスコープ] タブを選択します。
8. ダブルクリック (またはキーボードショートカットを使用) 新しい 行を挿入 して行を追加します。
9. 新しい行で、次の値を入力します。

   フィールド	説明
   名前	名前;例:Figma MCP Connect
   OAuth スコープ	Figma (mcp:connect) で定義した正確なスコープ名。

10. [Update (更新)] を選択します。
    
    
    

ステップ 3:OAuth エンティティプロファイルを構成します。

11. 同じアプリケーションレジストリレコードで、[ OAuth エンティティプロファイル ] タブを選択します。
    
    
    
    自動的に作成されたデフォルトのプロファイルが表示されます。
12. プロファイル名を選択してレコードを開きます。
13. デフォルトプロファイルの名前を 「figma_profile」に変更します。
14. OAuth エンティティプロファイルレコードの [ OAuth エンティティプロファイルスコープ ] 関連リストで、[ 新しい行の挿入] をダブルクリック (またはキーボードショートカットを使用) します。
15. Figma MCP Connect を検索して選択します。
    
    
    
16. [Save (保存)] を選択します。
    プロファイルレコードにリダイレクトされます。
17. [ 更新] を選択してプロファイルを保存します。
    デフォルトのプロファイルは MCP スコープに接続されます。

Figma MCP サーバーを接続する ビルドエージェント

Figma MCP (Model Context Protocol) サーバーを ビルドエージェント に接続して、Figma デザインにアクセスしてアプリケーションを作成できるようにします。

始める前に

必要なロール：admin

このタスクについて

ServiceNow インスタンスと Figma の間に OAuth 接続を設定すると、ビルドエージェント を Figma アカウントにリンクして、Figma MCP サーバーの使用を開始できます。ServiceNow IDE内のビルドエージェントを使用すると、ServiceNowアプリケーションを自動的に作成および更新できます。

手順

1. OAuth アプリが Figma で構成されていること、およびアプリケーションレジストリを作成していることを確認します。
   ヒント:

   ServiceNow IDEで、次の場所に移動します すべて > システム OAuth > アプリケーションレジストリー OAuth アプリが Figma で作成および構成されているかどうかを確認します。

   構成手順については、「 Figma での OAuth アプリの構成 と ServiceNow IDEでの OAuth プロバイダーの構成」を参照してください。

2. ServiceNow IDEでFigma MCPサーバーを有効にします。
   1. ServiceNow IDEで、左下隅にある歯を選択し、[設定] を選択します。
   2. ビルドエージェント を検索します。
      すべての ビルドエージェント 設定がリストされます。
   3. [ ビルドエージェント:MCP サーバーを有効にする ] チェックボックスをオンにして、Figma MCP サーバーを有効にします。
3. ビルドエージェントチャットパネルを開きます。
4. チャットパネルの右上にある MCP アイコン を見つけて選択し、MCP サーバーページを開きます。
5. [ 接続 ] を選択して、構成した OAuth 認証フローをトリガーします。
   Figma にログインし、 ServiceNow アプリケーションを承認するように求められます。
6. ServiceNow接続要求を承認したら、ビルドエージェントチャットパネルに戻ります。
   Figma MCP サーバーのステータスは緑色で、Figma に接続されていることを示し、利用可能なすべてのツールが一覧表示されます。生成されたトークンは、 ServiceNow IDE の IDE Git 認証情報テーブルに保存されます。

タスクの結果

ビルドエージェントを通じて自然言語を使用してFigma MCPサーバーと対話できるようになりました。

たとえば、「UI ページを作成し、<figma リンクをビルドします>」などのプロンプトを使用できます。ビルドエージェント は Figma からデザインコンテキストを取得し、デザインに一致するアプリケーションを作成します。

重要:

アプリケーションが元の設計とどの程度整合しているかは、設計の複雑さと全体的な構造に大きく影響されます。設計が単純で複雑ではない場合、アプリケーションは意図した設計を忠実に反映する傾向があります。逆に、設計が複雑または多面的である場合、アプリケーションは元の設計から大きく異なる可能性があります。

Figma ファイルをより適切に整理するには、「 コーディングを改善するために Figma ファイルを構造化する」 および「 AI をガイドする効果的なプロンプトを作成する」を参照してください。

表 : 1. トラブルシューティング: ビルドエージェント 問題

問題	説明	ソリューション
無許可のアクセスエラー	MCP サーバーが非アクティブになっている場合があり、不正アクセスエラーが発生する可能性があります。この問題は、OAuth フローの完了後に作成されたトークンを Figma が拒否した場合に発生します。	問題を解決するには、次の手順を実行します。 ServiceNow IDEの [IDE Git 認証情報] テーブルに移動し、関連するトークンを見つけます。[アクティブ] 列で、そのトークンの値を true から false に切り替えます。 ビルドエージェントチャットパネルに戻ります。 チャットパネルの右上にある MCP アイコン を見つけて選択し、MCP サーバーページを開きます。 [ 接続 ] を選択して OAuth 認証フローをトリガーします。