Figma Flutter MCP

🚀 Figma to Flutter MCP Server

🌐 このプロジェクトは、Figmaの豊富なデータをコーディングエージェントで活用し、Flutterでデザインを実装するためのサーバーです。

Cursor や他のAIパワードツールを使用して、MCPサーバー を介してFigmaの豊富なファイル、データ、コンポーネントなどにアクセスできます。

🚀 クイックスタート

このセクションでは、Figma to Flutter MCP Serverを素早く始める方法を説明します。

📋 目次

• 🎥 ビデオデモ
• 📝 始める前に
• 📚 仕組み
• 🛠️ 使用方法
  • 🔑 Figma APIキー
  • 🏹 CursorでのMCPの設定
  • 🚀 ローカルテストのクイックスタート
• 🧱 基本的なワークフロー
  • 🤖 AIコーディングエージェントの支援
  • ⚠️ SVGアセットが画面生成で機能しない理由
• ⚠️ 免責事項
• 🙌🏼 謝辞
• 🧱 他のフレームワーク
• 🔑 ライセンス
• 🙋‍♂️ 作者
  • Muhammad Hamza

🎥 ビデオデモ

Figma Flutter MCPのほぼすべての機能を実際のFigmaデザインで紹介しています。

• 英語版: https://youtu.be/o_GezwAlXlU
• ウルドゥー語/ヒンディー語版: https://youtu.be/mepPWpIZ61M

📝 始める前に

詳細な 始める前に のドキュメントや デモビデオ を参照して、素早く始めることができます。これは最初のリリースなので、改善の余地がたくさんあります。問題 をチェックして、他に何を改善すべきかを確認することができます。

📚 仕組み | 詳細はこちら

1. コンポーネント/ウィジェット

• ✅ Figmaノードデータの抽出: レイアウト、スタイリング、寸法、色、テキストコンテンツなど
• ✅ 構造の分析: 子要素、ネストされたコンポーネント、視覚的な重要性
• ✅ ガイダンスの提供: Flutterウィジェットと実装パターンの提案
• ❌ 実際のFlutterコードファイルの生成は行わない

2. 画面

• ✅ 画面メタデータの抽出: デバイスタイプ、向き、寸法
• ✅ セクションの識別: ヘッダー、フッター、ナビゲーション、コンテンツエリア
• ✅ ナビゲーションの分析: タブバー、アプリバー、ドロワー、ナビゲーション要素
• ✅ Scaffoldガイダンスの提供: Flutter画面構造の提案
• ❌ 実際のFlutter画面の生成は行わない

これはAIがFlutterコードを書くのを支援するだけなので、プロンプトが良ければ良い結果が得られます。

🛠️ 使用方法

以下の手順で、最小限の使用方法と設定手順を説明します。

🔑 Figma APIキー

このサーバーを使用するには、Figmaアクセストークンを作成する必要があります。Figma APIアクセストークンの作成方法については、こちら を参照してください。

🏹 CursorでのMCPの設定

FIGMA APIキーを取得したら、CursorでMCPを以下のように設定できます。

1. CMD + Shift + P (WindowsではCtrl) を押す
2. "Open MCP Settings" と入力する
3. "Add new MCP" をクリックする
4. 以下のJSONオブジェクトを貼り付ける

MacOS/Linux

{
  "mcpServers": {
    "Figma Flutter MCP": {
      "command": "npx",
      "args": ["-y", "figma-flutter-mcp", "--figma-api-key=YOUR-API-KEY", "--stdio"]
    }
  }
}

Windows

{
  "mcpServers": {
    "Figma Flutter MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-flutter-mcp", "--figma-api-key=YOUR-API-KEY", "--stdio"]
    }
  }
}

⚠️ 重要提示

このMCPを npm パッケージとしてインストールした場合は、最新バージョンに更新してください。時々、古いバージョンがキャッシュされ、「ツール呼び出しができない」や「Figma APIキーの設定が機能しない」などのエラーが表示されることがあります。

🚀 ローカルテストのクイックスタート

前提条件

• Node.js 18+
• Figma APIキー (アクセストークン)
• MCPをサポートするCursor AI IDE
• Flutter SDK

ローカルでのクイックテストでは、stdioではなくHTTPを介してサーバーを実行できます。

# クローンしてセットアップ
git clone <your-repo-url> figma-flutter-mcp
cd figma-flutter-mcp
npm install

# Figma APIキーを含む.envファイルを作成
echo "FIGMA_API_KEY=your-figma-api-key-here" > .env

# ローカルテスト用のHTTPサーバーを起動
npm run dev

次に、これをMCPクライアント構成に追加します。

{
  "mcpServers": {
    "local-figma-flutter": {
      "url": "http://localhost:3333/mcp"
    }
  }
}

詳細な手順については、CONTRIBUTING.md を参照してください。

🧱 基本的なワークフロー

🤖 AIコーディングエージェントの支援

より良い結果を得るために、AIコーディングエージェントに応じて以下のファイルにいくつかの指示を設定できます。

• Cursor: .cursor/rules/fluttering.mdc
• Claude: CLAUDE.md
• Gemini CLI: GEMINI.md

このようにすることで、AIエージェントがMCPの出力を使用し、Flutterコードがプロジェクトの要件と構造に沿ったものになります。Cursorルール の例をチェックして、テストに使用したものを確認できます。

1. テーマとタイポグラフィの設定: 最も効率的な方法は、Figmaにテーマカラーとタイポグラフィサンプルを含む2つのフレームを配置することです。例えば:

• Figmaデスクトップ: フレームを選択してCMD + LまたはCtrl + Lを押す
• Figmaウェブ: フレームを選択してURLをコピーする

💡 ヒント: 有効なURLにはFILE IDとNODE IDのパラメータが含まれます

"Setup flutter theme from <figma_link> including Colors and Typography.

2. ウィジェットの生成: 最も効率的な方法は、FigmaでCOMPONENTSを使用することです。例えば:

これには8つのバリエーションがあり、バリエーションを持つかどうかをプロンプトすることができます。

"Create this widget in flutter <figma_link>, setup only 2 variants for now and break the files in smaller parts for code readability.

FigmaにCOMPONENTSがない場合は、FRAMEを使用して、これをウィジェットにするようにAIに指示することができます。

3. 全画面の生成: 画像アセットがある場合は、それらをエクスポートして assets/ に配置し、pubspec.yaml を更新します。

"Create full screen from this figma link <figma_link>, ensure the code is readable by having smaller files

4. アセットのエクスポート:

• 画像アセット: 画面生成時に自動的に機能します

"Export this image asset from figma <figma_link>

• SVGアセット: 自動的には機能しません。以下で説明します。

"Export this as an SVG asset from Figma: <figma_link>

⚠️ SVGアセットが画面生成で機能しない理由

Figmaのベクターにはアイコンやペンツールの形状が含まれるため、一括エクスポートでは意図しないノードが取得される可能性があります。SVGsを個別にエクスポートすることをお勧めします。このプロセスでは、assets/svg/ ディレクトリにエクスポートし、pubspec.yaml を更新することで、多くの時間を節約できます。

⚠️ 免責事項

• Figmaデザイン: FigmaのAPIを使用してノードとその詳細を取得しているため、デザインが良ければ、AIが消費するためにより良く解釈できます。つまり、自動レイアウト、グループの代わりのフレームの使用、全体的な一貫した配置です。
• ユースケース: 現段階では、スケーラブルなアプリを開発するために使用することはお勧めしません。むしろ、MVP、小規模な説明的なタスクで試してみることをお勧めします。
• レート制限: 大量の使用でFigmaのレート制限 (例: HTTP 429) がトリガーされることがあります。サーバーにはバックオフ付きのリトライが含まれていますが、Figmaの制限を回避することはできません。レート制限に遭遇した場合は、数分待ってからリクエスト量を減らしてください。

🙌🏼 謝辞

Graham Lipsman による Figma Context MCP に出会い、以下のような機能を持つFigma to Flutterを開発する動機付けとなりました。

• アセットのエクスポート
• 色とテーマの設定
• ウィジェットツリーと全画面の構築

他の機能も近日公開予定です...

🧱 他のフレームワーク

React、Angular、React Native、Vueまたは他のフレームワークでこれを開発したい場合は、Figma Framework MCP の詳細なドキュメントを参照して、始めることができます。同時に、誰かがすでに特定のフレームワーク用のFigmaのMCPサーバーを開発している場合は、ここにリストを維持します。

• ...
• ...

🔑 ライセンス

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

🙋‍♂️ 作者

Muhammad Hamza

最新のプロジェクトについての最新情報を得るために、GitHubプロファイルをフォローすることもできます。

このリポジトリが気に入った場合は、スターを付けてサポートしてください⭐！

Copyright (c) 2025 MUHAMMAD HAMZA

デザインとコードのギャップを埋めたいデザイナーと開発者のために❤️ で作られました。