Figma MCP Write Server

Figma MCP Write Server

Plugin API を通じて Figma への書き込みアクセスを提供し、AI エージェントが Figma のデザインをプログラムから作成、変更、管理できるようにする Model Context Protocol（MCP）サーバーです。

❤️ 人間が心を込めて設計し、✨ AI エージェント（Claude と Gemini）がコーディングしました。

警告

このプロジェクトはプレリリース開発モード（セマンティック バージョニング < 1.0.0）です。すべてのツール、インターフェイス、定義は変更される可能性があります。

🚀 概要

Figma の REST API は読み取り専用のため、このサーバーでは Plugin API を使用して書き込み操作を可能にし、AI エージェントが自律的なグラフィックデザイナーとして動作できるようにします。

機能	REST API MCP	Plugin API MCP（このプロジェクト）
読み取り操作	✅ フルアクセス	✅ フルアクセス
書き込み操作	❌ 非対応	✅ 完全対応
リアルタイム更新	❌ ポーリングのみ	✅ ライブ接続
レート制限	あり（REST API の制限）	なし（プラグインへの直接アクセス）
セットアップの複雑さ	シンプル	中程度（プラグインが必要）
オフラインでの使用	✅ オフラインで動作	❌ Figma のアクティブなセッションが必要

📋 利用可能なツール

Figma API の薄いラッパーではなく、直感的に使えて見つけやすいようにツールを整理しています。人間は UI と優れた UX を頼りにしますが、MCP ツールはエージェントの視点から設計する必要があります。

ツールのカテゴリ

• コアデザイン： figma_nodes、figma_text、figma_fills、figma_strokes、figma_effects
• レイアウトと配置： figma_auto_layout、figma_constraints、figma_alignment、figma_hierarchy
• デザインシステム： figma_styles、figma_components、figma_instances、figma_variables、figma_fonts
• 高度な操作： figma_boolean_operations、figma_vectors
• 開発者ツール： figma_dev_resources、figma_annotations、figma_measurements、figma_exports
• システム： figma_plugin_status、figma_pages、figma_selection、figma_images

これらの24個のツールで、基本的な図形やテキストの作成から、コンポーネントや変数を使用した複雑なデザインシステムの構築まで、Figma の機能に完全にアクセスできます。高度な機能には、図形を結合するブール演算、カスタムパスを作成するベクター操作、開発者への引き継ぎに役立つ包括的なエクスポートオプションが含まれます。

各ツールの詳細については、完全ガイドをご覧ください。

⚡ クイックスタート

システム要件

• オペレーティングシステム - Windows 10 以降、macOS 10.14 以降、または Linux（Ubuntu 18.04 以降）
• アクティブな Figma セッション - サーバーの動作には、開いている Figma ファイルが必要です
• ネットワーク接続 - フォントデータベースの同期とプラグインとの通信に必要です

1. 📋 前提条件をインストールする

• Node.js 22.x - nodejs.org からダウンロードしてください
• npm - Node.js に付属しています（npm --version で確認してください）
• Figma Desktop - Plugin API へのアクセスに必要です（ブラウザー版には制限があります）
  • ダウンロード：figma.com/downloads（Windows 10 以降、または macOS 11 以降）
• Git - リポジトリのクローンに使用します

node --version  # Should show v22.x.x
npm --version   # Should show 8.0.0 or higher
git --version   # Should show 2.0.0 or higher

注：better-sqlite3 のビルド済みバイナリとの互換性を高めるため、Node.js v22.x が必須です。それ以外の Node バージョンでは手動でのコンパイルが必要になる場合があり、一部のシステムでは失敗する可能性があります。

2. プロジェクトをクローンしてビルドする

git clone [email protected]:oO/figma-mcp-write-server.git
cd figma-mcp-write-server
npm install
npm run build

3. Claude Desktop を設定する

Claude Desktop の MCP 設定ファイルに、次の設定を追加します。

設定：

{
  "mcpServers": {
    "figma-mcp-write-server": {
      "command": "node",
      "args": ["/path/to/figma-mcp-write-server/dist/index.js"],
      "env": {
        "NODE_ENV": "production"
      }
    }
  }
}

4. Figma プラグインをインストールする

1. Figma Desktop を開きます
2. Plugins → Development → Import plugin from manifest に移動します
3. プロジェクトディレクトリから figma-plugin/manifest.json を選択します
4. Plugins → Development → Figma MCP Write Server からプラグインを実行します

任意：config.example.yaml をプラットフォーム固有の設定ディレクトリにコピーし、必要に応じて編集して、サーバー設定をカスタマイズできます。詳しくは設定ガイドをご覧ください。

🎯 作成を始める

Claude Desktop を開き、利用可能な24個のツールを使ってプログラムからデザインしましょう

レイアウトと構造

• 「タイトルとサブタイトルを含むヘッダーフレームを作成する」
• 「このフレームの子要素を、16px の間隔で垂直方向に並べる」
• 「フレーム内でテキストを中央揃えにする」または「円の中心を長方形の左端に揃える」
• 「この長方形に、端を丸くした 2px の赤い線を追加する」

デザインシステム

• 「カラーパレットを作成し、スタイルを一貫して適用する」
• 「色やスタイルの異なるボタンのバリエーションを作成する」
• 「色と間隔のデザイントークンを作成し、コンポーネントにバインドする」

ブーリアン演算

• 「図形を合体で結合し、減算で切り抜きを作成する」
• 「図形を交差・除外して複雑なロゴを作成する」
• 「線から塗りへの変換が一貫したアイコンライブラリを作成する」

ベクター操作

• 「頂点、パス、ベジェ曲線を使ってベクター図形を作成・編集する」
• 「図形、線、テキストを編集可能なベクターパスに変換する」
• 「ベクター要素を抽出または分解して個別の図形にする」
• 「複数のベクターを単一の最適化されたパスに統合する」

開発者への引き継ぎ

• 「注釈と寸法を追加し、開発者向けの CSS を生成する」
• 「選択したコンポーネントを PNG ファイルとしてエクスポートする」
• 「間隔の寸法を含むデザイン仕様を作成する」

画像

• 「このページで使用されているすべての画像と使用情報を一覧表示する」
• 「https://example.com/photo.jpg から画像ノードを作成する」
• 「ローカルファイル ~/Desktop/logo.png から、位置 100,50 に画像を追加する」
• 「既存のハッシュ abc123 から、位置 150,200 に画像ノードを作成する」
• 「画像データを PNG 形式で Downloads フォルダーにエクスポートする」

🚧 現在の制限事項

• アクティブなセッションが必要 - Figma Desktop アプリケーションでファイルを開き、アクティブな状態にしておく必要があります
• プラグインの手動セットアップ - セッションごとにプラグインを手動でインストールして実行する必要があります
• 単一ファイルの範囲 - 操作は現在開いているファイルと選択中のページに限られます
• ネットワークへの依存 - ネットワーク環境が不安定だと、WebSocket 接続も不安定になることがあります
• パターン塗りつぶしの作成 - 既知の Figma Plugin API の検証バグにより、パターン塗りつぶしの読み取りはできますが、作成はできません
• デスクトップ版のみ - Figma のブラウザー版では、Plugin API の利用が制限されています

📚 ドキュメント

• 完全ガイド - セットアップ、ツール、例、開発について
• 例 - 自然言語を使った一般的なデザインタスク
• 設定 - 高度なサーバー設定
• 開発 - コントリビューター向けの技術リファレンス
• 変更履歴 - バージョン履歴と更新内容

📄 ライセンス

このプロジェクトは MIT ライセンスの下でライセンスされています。詳細は LICENSE ファイルをご覧ください。