インスピレーションと洞察から生成されました 8 ソースから

img6

img7

img8

img9

img10

img11

はじめに

  • 概要: Figma MCPサーバーは、FigmaデザインとAIツールを統合してデザインファイルの実装を簡素化します。

  • Figma APIトークン取得: Figmaアカウントにログインし、設定ページから個人アクセストークンを生成します。

  • MCPサーバーのインストール: Node.js環境で、コマンドnpx figma-developer-mcp --figma-api-key=取得したトークンを使用してサーバーを設置します。

  • 環境設定: サーバーはデフォルトでポート3333で動作し、SSEエンドポイントhttp://localhost:3333/sseで接続できます。

  • AIツールとの接続: CursorなどのAIツールをFigma MCPサーバーに接続し、デザインの自動実装を行います。

Figma APIトークンの取得 [1]

  • 手順: Figmaアカウントにログインし、設定ページを開きます。

  • セキュリティ: セキュリティタブから個人アクセストークンを生成します。

  • トークン保存: トークンを安全な場所に保存し、サーバー設定で使用します。

img6

img7

img8

MCPサーバーのインストール [2]

  • Node.jsの準備: Version16.0以上をインストールします。

  • コマンド使用: npx figma-developer-mcp --figma-api-key=<your-figma-api-key>を実行し、サーバーを立ち上げます。

  • 起動確認: Figma MCPサーバーが正常に稼働しているか確認します。

img6

環境変数と設定 [2]

  • PORT設定: サーバーはデフォルトでポート3333で動作します。

  • SSEエンドポイント: http://localhost:3333/sseでAIツールと通信します。

  • 環境変数管理: FIGMA_API_KEYを使用してセキュリティ改善を図ります。

img6

AIツールとの統合 [2]

  • Cursorの設定: MCPセクションで新しいサーバーを追加し、SSEオプションを選択します。

  • サーバー接続URL: http://localhost:3333を指定して接続します。

  • 互換性: WindsurfやClaude Desktopなど、他のAIツールとも統合が可能です。

img6

img7

セキュリティとベストプラクティス [2]

  • APIトークンの保護: コードに直接ハードコーディングせず、安全な場所に保存します。

  • アクセス制御: 共有環境での展開時には制御を設定します。

  • 定期変更: APIトークンを定期的に変更し、セキュリティを強化します。

  • ローカル実行推奨: セキュリティのために、インターネットへの直接公開を避けます。

関連動画

<br><br>

<div class="-md-ext-youtube-widget"> { "title": "Creating a UI with Figma to Cursor MCP Server", "link": "https://www.youtube.com/watch?v=6G9yb-LrEqg", "channel": { "name": ""}, "published_date": "1 month ago", "length": "2:01" }</div>

<div class="-md-ext-youtube-widget"> { "title": "\u7d50\u5c40MCP\u30b5\u30fc\u30d0\u30fc\u3063\u3066\u4f55\u3060\uff1f\u4e01\u5be7\u306b\u958b\u8a2d\u3057\u307e\u3059\u3002Cursor\u306b\u3082\u65b0\u3057\u304f ...", "link": "https://www.youtube.com/watch?v=7PA0jKorrjo", "channel": { "name": ""}, "published_date": "Jan 31, 2025", "length": "11:35" }</div>

<div class="-md-ext-youtube-widget"> { "title": "#320 Figma MCP\u3068Sentry\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9 - 2025/3/28\u306eZenn ...", "link": "https://www.youtube.com/watch?v=Lm6RTNId85Q", "channel": { "name": ""}, "published_date": "1 day ago", "length": "8:04" }</div>