Zenn
🐺

Notion MCPとFigma MCPで実現するWebアプリ開発

に公開
AI
Figma
Notion
Model Context Protocol
webdev
tech

mcps-vibe-coding

はじめに

Model Context Protocol（MCP）は、AI アシスタントが外部のデータソースやツールに安全にアクセスできるオープンプロトコルです。このプロトコルを活用することで、NotionとFigmaを統合したWebアプリケーション開発フローが実現できるか素振りしてみた話です。

開発環境

本記事で使用している開発環境は以下の通りです

  • VS Code Copilot Agent (Claude Sonnet 4)
  • Notion MCP
  • Figma MCP

MCPの活用

今回は認定されているRepositoryを使用しています。

https://github.com/makenotion/notion-mcp-server#readme

https://github.com/GLips/Figma-Context-MCP

セットアップ

MCPサーバーのセットアップは、VS Codeの設定ファイルに以下の設定を追加します：

{
    "inputs": [
        {
            "type": "promptString",
            "id": "notion-api-key",
            "description": "Notion API Key",
            "password": true
        },
        {
            "type": "promptString",
            "id": "figma-api-key",
            "description": "Figma API Key",
            "password": true
        }
    ],
    "servers": {
        "notionApi": {
            "command": "npx",
            "args": [
                "-y",
                "@notionhq/notion-mcp-server"
            ],
            "env": {
                "OPENAPI_MCP_HEADERS": "{\"Authorization\": \"Bearer ${input:notion-api-key}\", \"Notion-Version\": \"2022-06-28\" }"
            }
        },
        "Framelink Figma MCP": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "figma-developer-mcp",
                "--stdio"
            ],
            "env": {
                "FIGMA_API_KEY": "${input:figma-api-key}"
            }
        }
    }
}

vscodeのinputsを利用しています。

https://code.visualstudio.com/docs/copilot/chat/mcp-servers

API キーの取得

Notion API Key の取得方法：

  1. Notion Developers にアクセス
  2. 「New integration」をクリック
  3. 必要な権限を設定してトークンを生成

Figma API Key の取得方法：

  1. Figma アカウント設定の「Personal access tokens」セクションにアクセス
  2. 新しいトークンを生成

開発フロー

基本的に以下の流れで取り組みました

  • MCPサーバー起動

  • コンテキストにE2Eを付与し、デザインはFigma、データベースはNotionという構成でVibeCoding

  • ここからは微調整

    • レビュー指示は小さな単位で行う
    • 一度に大量の変更をレビューするのはコスパ悪い
    • 1つの機能や1つのUIコンポーネントなど、明確な単位で区切る

    過去に書いたAgentとのペアプロ：ワイヤーフレームとe2eで実現する継続的な開発を参考にして進めています

実際の開発体験

良かったところ

  • 初稿の速度は圧倒的に速い
  • デザインの再現性が高い（フォントサイズもしっかりみてくれる）
  • Notionから取得したデータを見てデータ定義してくれるので楽

Tips的な物

  • デザインは適切なサイズで作る
    デザインの再現度が高いためフォントサイズやレイアウトのサイズを怠ると悲惨なことになる

  • DBの取得は個別で実行する
    どのようなデータが欲しいかをある程度Agentに伝えて実行する。
    mcp経由で取得したデータを解析させるようなイメージです。

  • 途中導入する際は、既存コードをしっかりコンテキストに加える
    一から作成する場合を除いて、一定のルールに従って欲しいときはコンテキストを事前に追加する

まとめ

Notion MCPとFigma MCPを組み合わせることで、企画からコードまでの一貫した開発フローが実現できる印象でした。

まだまだ改善余地が多いのでさらにブラッシュアップしていきたいところです。

参考リンク

公式ドキュメント：

使用したMCPサーバー：

Discussion