火曜日, 7月 22, 2025
火曜日, 7月 22, 2025
- Advertisment -
ホームニューステックニュースMCP Servers (Figma & Github & FileSystem) による 新たな"Figma To Flutter" #AI
テックニュース

MCP Servers (Figma & Github & FileSystem) による 新たな”Figma To Flutter” #AI

インモビ運営局
By インモビ運営局
0
1



MCP Servers (Figma & Github & FileSystem) による 新たな

いきなりですが、
今回の作業で最終的にClaude Desktopにチャットした内容から見ていただきたいです！

Figmaの以下ページにあるUIをベースにFlutterのコードを作成してほしい。
https://www.figma.com/design/Xxx7xXxxxXXxXXx112XxxX/UI-Pockets?node-id=68-179&t=hsgygrZCyk2fq7Wc-0

各要素の細かい仕様は以下のissueを参照
https://github.com/eno-conan/flutter-poc/issues/33

できた実装について、
C:\Users\{username}\flutter\poc\lib\smbc_login_page.dartを更新してほしい
（Git管理しているので、バックアップは不要）

上記文章だけで、以下すべてを勝手にやってくれます。
本当にありがたいです！

  • FigmaからのUI情報取得
  • Github Issueの確認
  • Flutterのコード生成とローカルの対象フォルダへ配置

今回は、
この指示だけで作業できるようになるまでの話をさせていただきます。

MCP（Model Context Protocol）を用いた開発を体験

MCP（Model Context Protocol）を活用することで、
Figma、FileSystem、Githubといった複数のツールを連携させ、より効率的な開発フローを構築することが可能になります。

MCPは、AI アシスタントが外部システムと安全に接続し、データを取得・操作するためのプロトコルです。

これにより、ClaudeのようなAIアシスタントが、Figma のデザインデータや Github のリポジトリ情報、ローカルファイルシステムに直接アクセスできる構成を作ることができます。

image.png

開発環境構成 (v1)

最初、Githubがない以下2つで構成していました。

ツール 機能
Figma MCP デザインデータの取得とUI要素の解析
FileSystem MCP ローカルファイルの作成・編集・管理

image.png

チャット送信

Figmaの情報を参照して、Flutterのコードを作成して。

簡単な指示だけでコード生成を試みましたが、
さすがにこれだけでは、想定通りの結果を得られませんでした。

最初に作成されたコードで起動してみると、以下の通りでした。

スクリーンショット（スマホ）と説明

一見すると、そこそこいい感じに見えます。
しかし、サラッと確認しただけで以下の問題がありました。

  • タブの切り替えができない
  • 各テキストフィールドには何も入力できない
  • トグル部分は、灰色の塗りつぶしの中に白い丸の塗りつぶしが重なっているだけで、トグルとしては機能しない

image.png

チャットで指示を追加

作成されたコードでは問題だらけだったので、
詳細な要件や修正方法を、以下のように追加で提示しました。

以下の内容を確認して、修正しておいて
・メニューバー：AppBarを用いること
・口座情報とSMBC IDはそれぞれ別のタブなので、TabControllerを用いて、タブ切り替えができること
（SMBC IDの方をタップ時、テキスト入力欄が一つあればOK）
・以下3つは文字が入力できるように、TextFormFieldとTextEditingControllerを各入力欄に適用すること
店番号、口座情報、ログイン認証
・店・口座番号保存は
トグルなので、CupertinoSwitchを使って、切り替えできるようにすること
・ログインボタン
ボタンの形はOK。活性状態になるには、「店番号、口座情報、ログイン認証」すべて入力済であること
タップした際は、入力値をログ出力

上記指示を受けて作成されたコードで、フォームが出来上がりました。

また、この内容をチャットするのであれば、Githubのissueに要件を最初から記載しておく方がよい、と思いました。

スクリーンショット（スマホ）

image.png

開発環境構成（v2）

v1の結果をふまえて、構成を見直しました。

ツール 機能
Figma MCP デザインデータの取得とUI要素の解析
Github MCP リポジトリ管理、issue管理、（コードのプッシュ）
FileSystem MCP ローカルファイルの作成・編集・管理

image.png

ここから、
上記v2を作るための作業を記載していきます。

Claude Desktopのセットアップ

インストールは以下リンクから行えます。

MCPサーバーの設定に進みますが、まず開発者モードを有効化します。
Claude Desktopを起動し、左上メニューで、「開発者モードを有効にする」を選択します。

選択すると、一旦アプリが閉じます。
再起動すると、サーバーの設定が行えるようになります。
image.png

Node.jsのインストール

インストールされていない場合は、ここでインストールしておきましょう。（MCPサーバーの多くはNode.jsを使用して実行される関係で）

設定ファイル（claude_desktop_config.json）の開き方

MCPサーバーを設定するファイルを開くまでの手順です。

Claude Desktopの左上にあるアイコンから、「ファイル」 > 「設定」をクリックします。
image.png

構成を編集をクリックします。
image.png

エクスプローラーが立ち上がります。
claude_desktop_config.jsonが選択されているので、このファイルをエディタで開いて、サーバーの情報を追加していきます。
image.png

ここから今回利用した各MCPサーバーの設定を行っていきます。
いずれも、同じ方の記事を参考にさせていただきました。

FileSystem

ローカルのプロジェクトディレクトリにファイルを配置してもらい、手動でのファイル作成やコピー＆ペーストの手間を省きます。

記事でも記載されていますが、Windowsの場合にはバックスラッシュのエスケープを行ってください。
複数のディレクトリへのアクセスを許可する場合は、以下のように列挙します。
（argsの第二引数以降だけは各々の作業状況で変わります。）

claude_desktop_config.jsonの記述内容 
    "filesystem": {
      "command": "C:\\Program Files\\nodejs\\node.exe",
      "args": [
        "C:\\Users\\{username}\\AppData\\Roaming\\npm\\node_modules\\@modelcontextprotocol\\server-filesystem\\dist\\index.js",
        "C:\\Users\\{username}\\Desktop",
        "C:\\Users\\{username}\\flutter\\poc"
      ]
    }

Figma

アカウント作成の話は割愛します。

Figmaと連携をすることで、UIに関する情報について、都度スクリーンショットを撮って、アップロードしたりする作業などの手間を省きます。

ブラウザで、Figmaのページを開きます。画像のURLバーにある通り、figma.com/filesで表示されたページで作業を行います。
image.png

画面中央にモーダルウインドウが表示されるので、セキュリティタブをクリックします。
image.png
下にスクロールすると、トークン作成エリアがあるので、そこでトークンを作成してください。
image.png

claude_desktop_config.jsonの記述内容 
    "figma-developer-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      }
    }

Github

Githubと連携することで、Issueの読み込み（作成も可能）や、今回はやっていませんが、コミット・プッシュ作業の手間を省くこともできます。

https://github.com/settings/appsにアクセスします。

Personal access tokens > Tokens(classic)をクリックします。
image.png

image.png

repoにチェックを入れ、下までスクロールし、Generate tokenをクリックします。
image.png

英文で記載されている通り、再度値は表示されないので、ここでコピーします。
image.png

claude_desktop_config.jsonの記述内容 
	"github": {
	  "command": "npx",
	  "args": [
	    "-y",
	    "@modelcontextprotocol/server-github"
	  ],
	  "env": {
	    "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
	  }
	},

MCPサーバーの設定完了

これで必要なMCPサーバーの設定が完了しました。
claude_desktop_config.jsonは以下のようになっています。
（サーバーごとの順番が異なるのはOKです。）

トークンの扱い
FigmaとGithubでトークンを作成された方は、publicリポジトリへのPushしないなど、扱いにご注意ください。

最終的なclaude_desktop_config.json 
{
  "mcpServers": {
    "filesystem": {
      "command": "C:\\Program Files\\nodejs\\node.exe",
      "args": [
"C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\@modelcontextprotocol\\server-filesystem\\dist\\index.js",
        "C:\\Users\\Administrator\\Desktop",
        "C:\\Users\\Administrator\\flutter\\poc"
      ]
    },
    "github": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      }
    },
    "figma-developer-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      }
    }
  }
}

正しく設定が完了すれば、
Claude Desktop上では、以下の通り表示されます。
image.png

FigmaとGithub Issue

今回チャットに渡している、Figmaの情報とGithub Issueの情報を共有していなかったので、ここで記載します。

Figmaのページ

今回、UI Pocketsで載っていたあるスクリーンショットを私自身でFigmaを作成してみました。
このページの情報をMCPサーバーを通じて、Claude Desktopで扱えるようにします。

image.png

Github Issue

Figma部分ではUIに関する情報だけです。
画面の各要素についてどういった機能か、Issueに記載しました。

以下画像のMarkdown 
## メニューエリア
以下3つの機能を画像の通り横並びで作成
- 戻るアイコン：タップ時の挙動は実装なしでOK
- テキスト：ログイン
- ？アイコン：タップ時にダイアログ表示

## タブバーエリア
以下2つのタブをタップで移動（`TabController`で実装）
・SMBC ID（SMBC IDの方をタップ時、テキスト入力欄が一つあればOK）
・口座情報（このタブが本issueのメイン）

## フォームエリア
### 入力欄
・3つのテキストフィールドを作成（`TextFormField`と`TextEditingController`で実装）
- 店番号
- 口座情報
- ログイン認証
### トグル
・店・口座番号保存は`CupertinoSwitch`で実装

### ボタン
- ログインボタン作成
- 活性状態になるには、「店番号、口座情報、ログイン認証」すべて入力済であること
- タップした際は、入力値をログ出力

image.png

動作確認

以下内容をチャットで送信します。
これだけです。あとは各MCPサーバーが良しなにやってくれます。

Figmaの以下ページにあるUIをベースにFlutterのコードを作成してほしい。
https://www.figma.com/design/Pwa7kTqwoRYxDNu112TamU/UI-Pockets?node-id=68-179&t=hsgygrZCyk2fq7Wc-0

各要素の細かい仕様は以下のissueを参照
https://github.com/eno-conan/flutter-poc/issues/33

実装できた実装について、
C:\Users\Administrator\flutter\poc\lib\smbc_login_page.dartを更新してほしい
（Git管理しているので、バックアップは不要）

実行後のClaude Desktopの様子です。

image.png

image.png

成果物をローカルで動かしてみる

以下の機能がきちんと実装されていることは確認できました。
Issueにより細かく記載すれば、そちらも対応してくれそうな期待を持てそうな結果となりました！

  • ダイアログ表示
  • タブ切り替え
  • フォーム入力
  • ログインボタンの活性/非活性制御

image.png

まとめ

MCP を活用することで、Figma、FileSystem、Github を連携させた効率的な開発フローを構築することができました。作業の自動化により、開発者はより細かい微修正などの作業からの対応できるようになりそうです。

AIによる自動化を効果的に活用するためには、明確で詳細な要件定義が重要であることも分かりました。今後も様々なツールとの連携を試し、より効率的な開発手法を模索していきたいと思います。

参考記事

本文で適宜リンクは記載しましたが、それ以外で参考にした情報です。





Source link

Views: 0

前の記事
「死から蘇る！時空戦闘『ROMEO IS A DEADMAN』2026年発売」
次の記事
テクニクス、新色シャンパンゴールドの完全ワイヤレス登場！
RELATED ARTICLES

返事を書く

あなたのコメントを入力してください。
ここにあなたの名前を入力してください

- Advertisment -

ABOUT US

inmobilexion（インモビ）は、動画・ニュース・サイト紹介を中心に、信頼性の高い情報をわかりやすくお届けする情報プラットフォームです。 「in-mobile」×造語の"〜xion"から生まれたインモビは、厳選・接続・導線など多様な意味を内包しながら、次世代の情報体験を提案します。

Contact us: [email protected]

FOLLOW US

© インモビ by inmobilexion.com