Skip to main content
Glama
enesjakozh

Figma MCP Server

by xxflux
npmGitHub
JavaScript
997
2
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

Figma MCP（モデルコンテキストプロトコル）

モデル コンテキスト プロトコルを使用して、カーソル エージェントを通じて Figma デザインを作成および変更するための完全なソリューションです。

ブログ: https://xflux.us/2025/04/06/ai-powered-design-automation-building-a-figma-mcp-with-cursor/

概要

このプロジェクトは、Cursor Agent を介した自然言語プロンプトを用いて、Figma で AI を活用したデザイン作成を可能にします。このプロジェクトは、主に以下の 2 つのコンポーネントで構成されています。

  1. MCP サーバー: モデル コンテキスト プロトコルを実装し、WebSocket 経由で Figma プラグインと通信する Bun + TypeScript サーバー。
  2. Figma プラグイン：Figma 内で動作し、MCP サーバーからの指示に基づいてデザイン操作を実行するプラグイン。

この統合により、自然言語を使用して次のことが可能になります。

  • 基本的なデザイン要素（図形、テキストなど）を作成する
  • 複数のセクションを含む完全なページレイアウトを設計する
  • 既存のデザインを変更する

リ���ジトリ構造

  • figma-mcp-server/ : MCPサーバーの実装
  • figma-plugin/ : デザイン操作を実行するためのFigmaプラグイン

クイックスタート

1. MCPサーバーをセットアップする

cd figma-mcp-server cp .env.example .env # Edit this file to add your Figma token bun install bun run index.ts

2. Figmaプラグインを設定する

cd figma-plugin npm install npm run build

次に、プラグインを Figma にインポートします。

  1. Figmaを開く
  2. プラグイン > 開発 > マニフェストからプラグインをインポートに移動します
  3. figma-plugin/manifest.jsonファイルを選択する

3. カーソルエージェントに接続する

カーソル内:

  1. 設定 > エージェント > MCP サーバーに移動します
  2. URL: http://localhost:3000/api/mcp/schemaで新しいサーバーを追加します。

詳細なドキュメント

詳細な手順については、以下を参照してください。

使用例

すべての設定が完了したら、Cursor Agent を使用して次のようなプロンプトを含むデザインを作成できます。

Create a landing page with a header, hero section with heading "Our Product" and subheading "The best solution for your needs", 3 features in the features section, and a footer with contact information.

仕組み

  1. カーソルエージェントは自然言語プロンプトを受け取ります
  2. 構造化されたMCPリクエストをMCPサーバーに送信する
  3. MCPサーバーはリクエストを処理し、WebSocket経由でFigmaプラグインに指示を送信します。
  4. FigmaプラグインはFigmaのデザイン操作を実行します

ライセンス

マサチューセッツ工科大学

Install Server
A
security – no known vulnerabilities
F
license - not found
A
quality - confirmed to work

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

モデル コンテキスト プロトコルを実装する TypeScript サーバー。Cursor Agent を通じて自然言語プロンプトを使用して、Figma で AI を活用したデザイン作成を可能にします。

  1. 概要
    1. リ���ジトリ構造
      1. クイックスタート
        1. MCPサーバーをセットアップする
        2. Figmaプラグインを設定する
        3. カーソルエージェントに接続する
      2. 詳細なドキュメント
        1. 使用例
          1. 仕組み
            1. ライセンス

              Related MCP Servers

              • Talk to Figma MCP

                sonnylazuardi
                A
                security
                A
                license
                A
                quality
                An MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.
                Last updated -
                19
                2,514
                3,528
                JavaScript
                MIT License
                • Apple
                • Linux

              • Cursor Talk To Figma MCP

                toiletmadarchut
                A
                security
                F
                license
                A
                quality
                Enables users to control the cursor in Figma through verbal commands using an agentic AI agent, streamlining the design process with a new interaction method.
                Last updated -
                19
                2,514
                1
                JavaScript

              • Talk to Figma MCP

                yhc984
                -
                security
                F
                license
                -
                quality
                Enables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.
                Last updated -
                TypeScript

              • Figma MCP Server

                1yhy
                -
                security
                A
                license
                -
                quality
                A Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.
                Last updated -
                124
                6
                TypeScript
                MIT License
                • Linux
                • Apple

              View all related MCP servers

              Appeared in Searches

              New MCP Servers

              MCP directory API

              We provide all the information about MCP servers via our MCP API.

              curl -X GET 'https://glama.ai/api/mcp/v1/servers/xxflux/figma_MCP'

              If you have feedback or need assistance with the MCP directory API, please join our Discord server