Figma MCPを試すよ

重い腰をあげてFigma MCPを試してみたい。現時点での理解を雑にメモしておく。

• MCPを使えばFigmaのデザインからコードをある程度正確に起こしてくれるはず（という評判を聞いた）。
• Figmaの公式MCPはない...？
• MCPの使い方が全体的にわかっていない。Cursorになんか追加する感じぽいが...JSONぽいやつもよく見る。
• 生成されるコードがSemanticかどうか気になる。

ではやっていこう。

とりあえずCursorでプロジェクトフォルダ設定。

Figmaで雑にサイト作る...こういうの、フレーム分けたりするほうがいいのだろうなぁ...。今回は少しいじわるだが、ベタに配置。文章はAIが生成、写真はUnsplashから。

• 茶色の木製のテーブルと窓際の椅子の写真 – Unsplashの無料画像の無料画像
• 昼間、水域近くの崖の上にある白いコンクリートの建物の写真 – Unsplashの無料画像の無料画像
• 昼間の海辺の崖の家の写真 – Unsplashの無料画像の無料画像

下準備ができたので「Figma MCP」でサイトや動画を検索。ざざっと見てみた感じの感想。

• FigmaのAPIキーが必要なのね...
• MCPはCursor.directoryにもあるし、Figma-Context-MCPを使うと良さそう。
• 設定方法はnpxを使う方法と、設定ファイルを書く方法かな...。npxは毎回起動が面倒だから、設定ファイルでやるかな。
• 精度はうむ、って感じぽいな...。しかしAIの種類やrules、Figmaがどれだけ構造化されているかによって異なってきそう。

以下を参考にとりあえずやってみる。

• 【Cursor】FigmaにアクセスしてUIコードを自動生成！

とりあえずFigmaのAPIキーを取得。このあたりを参考に。権限は「開発リソース」「ファイルのコンテンツ」をRead Onlyで設定しておけば良さそう。

無事にゲット。

あとはCursorでセットアップ。.cursor/mcp.jsonを作成して以下を貼り付ける（API Keyは自分のもので）。

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

作った瞬間に左下で検出してくれて「Enable?」と聞いてくれるの賢い

再読み込みする必要があったが無事に起動...したのかな。

これで準備完了のはず...あとはプロンプトを与えるだけ...！

FigmaにてFrameのリンクをコピー。command + Lでいいのね。

プロンプトを与える...ドキドキ...

生成時間は1分程度。すぐできた。「semanticsを意識しました」「レスポンシブ対応もしました」とのことだが...。

コードは...うむ、ちょっと微妙だ...

いろいろ違う...

コードについてはRulesを設定すればうまくいきそうな気もする。デザインシステムがしっかりしていて、そこと連携取ればいいのかな。

どちらにしろ（プロンプトが雑とはいえ）一発OKとはならなかった。しかしながらGoogle Fontを設定してくれたり、画像をダウンロードしてくれるのは便利...。

いったんこれで研究は一段落。