figma MCPを使って、実際に動く画面を作ってみる


この記事では、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/

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

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

:::note info
以下のボタンをクリックすることで、figmaアカウントを簡単に作成できます
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77722/b58aad59-b5ab-4458-a538-ee3559fa10ea.png" width="200px" />
:::

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77722/b1879d52-b737-4889-9270-a69371994ac9.png" width="600px" />  

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77722/d48c0da2-1bc1-408a-bbe2-afab41a27e39.png" width="300px" />


Generate tokenをクリックすると、APIKeyが表示されます。こちらのKeyは後で利用するので、画面をこのままにしておくか、どこかにこのキーを保存しておいてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77722/0b4633c5-7738-457b-aa35-f64d6fddd60c.png)


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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77722/1afb1d31-05cd-4690-98a3-6c1662ec2b6e.png" width="300px" />

:::note info
Sign UP > `Continue with Google` をクリックすることで、Cursorアカウントを簡単に作成できます
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77722/c800720c-8930-4ec9-8f76-314f5c60cea7.png" width="300px" />
:::


### cursorでのfigma MCPの設定 

次に、cursorでfigma MCPを動かすための環境を設定していきます。
[Figma MCP Server](https://github.com/GLips/Figma-Context-MCP)というツールを使います。


1. Cursorを起動し、Cursor > Settings... > Cursor Settingをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77722/004821eb-f6ec-4636-bf8a-b18cef28d318.png)

2. 設定画面が開いたら、MCP >  + Add new global MCP serverをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77722/9a939463-6027-43de-9c97-94f8fcb516f9.png)

3. mcp.jsonというファイルが開くので、以下のテキストを貼り付けて保存します。
**YOUR-KEYを先ほどfigmaで作成したapi keyにおきかえてください。**

**Mac**
```json:Macの場合の設定
{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}
```

**Windows**
```json:windowsの場合の設定
{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}
```

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

https://nodejs.org/en/download


以上で設定は完了です。

----

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

### Google stitchでUIイメージを作成
ここから実際の作業に入ります。
まずは、作成したい画面のイメージを作成します。
[Google stitch](https://stitch.withgoogle.com/) にアクセスし、ここで作りたいアプリのイメージをプロンプトに入力し、UIを作ります。
（例えば、北欧風の社会人向けの英会話アプリなど）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77722/ea4e6fe9-c62c-4a1e-b7d9-e0215b507fca.png)


プロンプトでUIを作成後、作成された画面の上にある`Figma`ボタンを押すと、クリップボードにFigmaの画面イメージがコピーされるので、これを[Figma](https://www.figma.com/)に貼り付けます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77722/aef8c7df-4805-4601-8f10-80d217ab40d7.png" width="300" />


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

figmaにUIイメージを貼り付けたら、画面の枠を右クリックして`copy link to selection`をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77722/7fae479e-df7d-4666-9bb2-4adf11281104.png)

次にcursorに移動し、チャット欄にコピーしたfigmaのURLを貼り付け、'HTMLで画面を作ってください'と指示をします。
（Reactを使って画面を作りたい場合は、ここでReactで画面を作ってと指示をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77722/cb53b59d-3024-449b-ac53-8a2300e33be3.png)

すると、エージェントがfigmaに登録されているイメージをコピーし、HTMLコードを作成してくれます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77722/55420ef4-94f2-479b-885f-e45e12a9ec78.png)

以下のような確認画面が入った場合は`Run tool`ボタンをクリックしてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77722/5e37d069-7e81-4fd3-a409-a447d0796189.png)

毎回ボタンをクリックするのが面倒な場合は、Auto-run設定をAuto-runに切り替えることで自動的に実行してくれるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77722/7df177cc-64d9-4812-bf83-168f4b1df93e.png)

しばらくすると、HTMLページが完成するため、Chromeなどブラウザで開いてみると、以下のようにFigmaで作ったイメージと同じページが生成されています！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77722/410c6fd2-18a2-495c-b075-61d32de5629a.gif" width="300" height="225" />


## まとめ

本日は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