この記事では、figma MCPを使ってGoogle stitchで作ったUIイメージを使って実際に動く画面をつくってみます。

figma MCPとは？

figma MCPとは、figmaにMCPという生成AIとの共通インターフェースで接続できる様にする仕組みです。
これを使うと、figmaで作った画面イメージから実際に動くコードを作ることができます。

必要なツールのインストール

figma MCPを利用するのに必要なツールは以下となります

nodeJS
- https://nodejs.org/en/download
cursor
- https://www.cursor.com/ja/downloads
figmaアカウント（無料アカウント）
- https://www.figma.com/ja-jp/pricing
google stitch
- https://stitch.withgoogle.com/

準備

Googleアカウントの作成

Googleアカウントを持っていない場合、以下のURLからアカウントを作成します。
https://www.google.com/intl/ja/account/about/

すでにGoogleアカウントをお持ちの場合、このステップは省略可能です🍾

figmaアカウントの作成

これまでfigmaを使ったことがない方は、以下のリンクよりアカウントを作成します。
https://www.figma.com/ja-jp/

以下のボタンをクリックすることで、figmaアカウントを簡単に作成できます

figma APIキーの取得

figmaにアクセスをして、APIキーを発行します。
APIキーを取得するには、figmanにログインしてから左上の自分の名前 > setting > Security > Generate new tokenをクリックします

この時、最低限以下の項目の許可をしてください（一旦すべて許可しても構いません）

Generate tokenをクリックすると、APIKeyが表示されます。こちらのKeyは後で利用するので、画面をこのままにしておくか、どこかにこのキーを保存しておいてください。

cursorのインストール,ログイン

以下のURLよりcursorをダウンロードします。
https://www.cursor.com/ja
ダウンロード完了後cursorを起動し、cursorにログインします。

Sign UP > Continue with Google をクリックすることで、Cursorアカウントを簡単に作成できます

cursorでのfigma MCPの設定

次に、cursorでfigma MCPを動かすための環境を設定していきます。
Figma MCP Serverというツールを使います。

Cursorを起動し、Cursor > Settings... > Cursor Settingをクリックします
設定画面が開いたら、MCP > + Add new global MCP serverをクリックします
mcp.jsonというファイルが開くので、以下のテキストを貼り付けて保存します。
YOUR-KEYを先ほどfigmaで作成したapi keyにおきかえてください。

Mac

Macの場合の設定

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

Windows

windowsの場合の設定

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

NodeJSのインストール

NodeJSがインストールされていない場合、以下から最新版をダウンロードしてインストールします。

以上で設定は完了です。

実施

ここから、実際のUIイメージを作り、その後にコードを生成していきます。

Google stitchでUIイメージを作成

ここから実際の作業に入ります。
まずは、作成したい画面のイメージを作成します。
Google stitch にアクセスし、ここで作りたいアプリのイメージをプロンプトに入力し、UIを作ります。
（例えば、北欧風の社会人向けの英会話アプリなど）

プロンプトでUIを作成後、作成された画面の上にあるFigmaボタンを押すと、クリップボードにFigmaの画面イメージがコピーされるので、これをFigmaに貼り付けます。

figmaのURLを使って、HTMLを作成する

figmaにUIイメージを貼り付けたら、画面の枠を右クリックしてcopy link to selectionをクリックします

次にcursorに移動し、チャット欄にコピーしたfigmaのURLを貼り付け、'HTMLで画面を作ってください'と指示をします。
（Reactを使って画面を作りたい場合は、ここでReactで画面を作ってと指示をします。

すると、エージェントがfigmaに登録されているイメージをコピーし、HTMLコードを作成してくれます

以下のような確認画面が入った場合はRun toolボタンをクリックしてください

毎回ボタンをクリックするのが面倒な場合は、Auto-run設定をAuto-runに切り替えることで自動的に実行してくれるようになります。

しばらくすると、HTMLページが完成するため、Chromeなどブラウザで開いてみると、以下のようにFigmaで作ったイメージと同じページが生成されています！

まとめ

本日はGoogle stitchでfigmaのUIイメージを作成してもらい、そこからfigma MCPを使って実際に動くHTMLを作成するという流れを行いました。

この方法を使えば、どの様なアプリを作りたいのかが言語化できれば、コードが書けなくても実際に動くアプリができてしまいます・・・活用していきましょう！

Bonus（早く終わった人向け

余裕がある方は、MCPの設定ファイルを以下の通り変更し、プロンプトでYahoo天気にブラウザでアクセスして名古屋の天気を調べてと指示をしてみましょう。

Mac

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  },
  "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
  }
}

Windows

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    },
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

参考：　https://github.com/microsoft/playwright-mcp