Figma MCP を触ってみた

はじめに

本日はずっと保留にしていた Figma MCP を触ってみました。
Windsurf で Figma MCP が発表されたのは 2025/09/24 なので、3ヶ月経ってしまいました😅

それでも動作は見ておきたいということで、Figma の Professional プランの Dev シートを契約して試してみました。

Figma MCP のインストール

Figma MCP とは何だっけ、というところでおさらいです。
ざっくりいうと、「Figma で書いたデザインを Windsurf で参照して、コードとして書き起こせるようになる MCP」です。

というわけで、さっそく MCP を Windsurf にインストールしていきます。

1. マーケットプレイスから Figma MCP を選択。右上の「Install」を押す。

2. ブラウザの Figma の認可画面が現れて、「Agree & Allow Access」を押す。

3. Figma の認可が完了。

4. Figma MCP がインストールされていることを確認。

はい。これで入りました。では、実際に使ってみましょう。

Figma MCP の使用

今回は Figma で簡単に、下記画像のようなデザイン（？）を作ってみました。

このデザインをもとに、Windsurf でコードを生成してみます。

Windsurf の Cascade に渡す Figma の参照リンクが必要なので、右上の青い「Share」ボタンを押してリンクを生成します。

「Copy link」をクリックして、Cascade にそのリンクを貼り付けます。（リンクは黒塗りしています）

MCPが起動した！！！
出力されている内容も上のデザイン画像と一致しています。
デザインを読み取ってくれているようです🙌

ちょっと横に並べて比較してみました。

左の黒い枠（Figma の背景）がある方が Figma、右の枠がない方が Cascade 生成の HTML + CSS です。
黒い枠は Figma の背景色なので、気にしないでください。

灰色部分に注目すると、どうでしょうか。
ばっちりデザインを再現できている気がします！
灰色部分に着目して、色指定やサイズを確認してみると、デザインのサイズでしっかり反映されていました。

ただ、プロンプトによっては、一度のプロンプトでデザインの全てを反映しきれない場合もありますね。
私は1度目はオレンジの四角の枠線が黒色で出力されていたため、もう一度プロンプトを実行しました。

素晴らしいですね。UIデザイナーの方などが書いたデザインがあれば、コンポーネントは楽に作れてしまいますね!!!

Figma Make で生成したデザインを実装

Figma Make という、AI と対話しながら UI を作成できるツールがあります。
AI にデザイナーさんをやっていただこうということですね。

そのデザインをもとに、実際にコンポーネントも実装できるみたいなのでやってみましょう。

今回 Figma Make で生成したのが下記の「テキストチャットメモ」アプリです。
これは、チャットのメモを時系列に投稿し、あとから見返せるアプリを想定しています。
Slack の自分自身の DM を思い浮かべてもらうといいかもしれません。

画面左側に AI とのチャットがあります。ここで AI にプロンプトを投げて、AI がデザインを実装したのが画面右ですね。（メモチャットと書いてある部分）
もう画面右の UI は React で書かれているため、Cascade ではこれらのコンポーネントを参照してみましょう。

さあ、リンクをコピーしてやってみると...あれ...？
できないみたいです。

この後も色々やってみましたが、結局コンポーネント 1つの情報も取得することはできませんでした...orz
下記のサイトに書いてあるのに...

これは、私のプロンプトが問題なのか、Figma Make の問題なのか、それとも Cascade の問題なのかは分かりませんが、今回は諦めることにします。
（Figma MCP Server がオープンβなので、とりあえずよしとします。）

まとめ

Figma MCP ですが、私的にはめちゃくちゃ良かったです。

以前、Figma のデザインファイルからコンポーネントを起こしていた時があったのですが、その時は Windsurf など存在せず、CSS をデザインファイルを見ながらゴリゴリ起こしていた記憶があります。
その作業が高速で終わるとなると感激です😭

Figma Make の方は残念でしたが、それを踏まえても十分に価値のある MCP なのではないかと思っています。

Figma MCP Server は有料の Professional、Organization、Enterprise プランの dev シートか full シートを契約することでが可能です。
デザイナーの方と共同で仕事をする場合にはあった方がいいかもしれません。

みなさん、ぜひ試してみてください。