GLips/Figma-Context-MCP

これは何？

主な機能

• 01貼り付けたリンクから、Figmaファイル、フレーム、グループのレイアウトやスタイルのメタデータを取得します。
• 02Figma APIのレスポンスを簡素化し、モデルに重要なデザイン情報だけを渡します。
• 03JSONファイルで設定し、npxで起動するMCPサーバーとして動作します。
• 04Figmaのアクセストークンは、コマンドラインフラグまたはFIGMA_API_KEY環境変数で指定できます。

ユースケース

• スクリーンショットではなくレイアウト情報を使い、CursorでFigmaデザインをフロントエンドコードとして実装する。
• あらゆるフレームワークでUIを構築する際に、AIエージェントがコンポーネント構造や余白を読み取れるようにする。
• 既存のFigmaフレームをエージェントのワークフローに取り込み、画面をすばやくプロトタイピングする。

クイックスタート

1. 1

   READMEに記載された手順に従ってFigmaアクセストークンを作成します

2. 2

   APIキーを使って、エディターのMCP設定ファイル（macOS/Linux）にMCP serverの設定を追加します

   npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio
3. 3

   AI clientを再起動し、Figmaファイル、フレーム、またはグループのリンクをチャットに貼り付けます

使う前に知っておきたいこと

• !サーバーがデザインデータを取得するには、事前にFigmaアクセストークンが必要です。
• !Cursor専用に設計されているため、他のAI clientでは追加の設定が必要になる場合があります。

トピック

よくある質問

Figma-Context-MCP とは？

CursorなどのAIコーディングエージェントがFigmaのレイアウトやスタイル情報を参照し、デザインを実装できるMCPサーバー。 Framelink MCP for Figmaは、CursorなどのAIコーディングツールをFigma APIに接続するModel Context Protocolサーバーです。Figmaファイル、フレーム、グループへのリンクをチャットに貼り付けると、エージェントが関連するレイアウトやスタイルのメタデータを取得し、それに対応するコードを作成します。

Figma-Context-MCP は無料で使えますか？ライセンスは？

Figma-Context-MCP は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

Figma-Context-MCP は今もメンテナンスされていますか？

活発にメンテナンス中。Figma-Context-MCP の最終コミットは 2026年10月16日 です。

Figma-Context-MCP は何に使えますか？

スクリーンショットではなくレイアウト情報を使い、CursorでFigmaデザインをフロントエンドコードとして実装する。 あらゆるフレームワークでUIを構築する際に、AIエージェントがコンポーネント構造や余白を読み取れるようにする。 既存のFigmaフレームをエージェントのワークフローに取り込み、画面をすばやくプロトタイピングする。

Figma-Context-MCP のインストール方法は？

READMEに記載された手順に従ってFigmaアクセストークンを作成します APIキーを使って、エディターのMCP設定ファイル（macOS/Linux）にMCP serverの設定を追加します: npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio AI clientを再起動し、Figmaファイル、フレーム、またはグループのリンクをチャットに貼り付けます

Figma-Context-MCP はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/GLips/Figma-Context-MCP