【プチアップデート】Windsurf で「Figma MCP Server」が利用可能に
はじめに
遅くなりましたが、Figma の MCP Server が使えるようになったということで、どんなものか見てみたいと思います。
Windsurf でのアップデート
2025/09/24 に、Windsurf から下記の X 投稿がありました。
Figma MCP Server を入れて、Figma のリンクを Cascade に貼ると、Figma のデザインをコードに起こしてくれるようです。
Figma MCP Server
Figma のページを確認してみました。
Figma MCP Server は現在β版のようです。
Professional, Organization, Enterprise プランの Dev or Full シートプランで利用できるそうです。
（無料では利用できないようですね😢）
選択したフレームからコードを生成
Figma のフレームを選択してコードに起こすことができるようです。
Figma ではフレームと呼ばれる矩形領域の上にデザインを配置したりします。
そのフレーム上のデザインをコードに書き起こせるということでしょう。
上の画像の Hero と書かれ、青枠で表示されている四角形が Figma のフレームです。
サイドバーを見ると、Hero の中に、HeroA, HeroB, ... とあります。
これらもフレームです。フレームは入れ子構造にできます。
Hero というフレームを選択すれば、青枠の四角形の中のデザインをコードで起こしてくれるのだと思います。
デザインコンテキストの抽出
Figma の変数、コンポーネント、レイアウトデータを IDE 上に持ってくることができるようです。
Figma Make リソースの取得
Figma Make ファイルからコードリソースを集めることができるそうで、LLM のコンテキストに含められるようです。（ビルド自動化ツールの make ではないです）
Figma Make という、AI にプロンプトを入力してデザインと実際のコードを作成する機能があるみたいです。
Figma Make で作成した UI を MCP 経由でローカルに実装するなどといったこともできそうです。
CodeConnect でデザインシステムコンポーネントの一貫性を維持する
CodeConnect は下記のような機能のようです。
- Figma の Dev モードで使用される機能
- Figma の Dev モードはデザインをコードに落とし込むための機能が揃っているそうです。
- リポジトリのコンポーネントを Figma に取り込むためのツール
Figma と実際の開発環境のコンポーネント間で整合性をとれるということだと思っています。
まとめ
今回は、Figma MCP Server の紹介でした。
個人的には AI モデル、MCP を使って、高速でフロントエンドを構築するのもいいですが、ガリガリ自前でコードを書いていくのも楽しいのですよね...🤔
個人開発ではあまり使わないかな...などと思いつつ、この記事を書いていました...
（なんかアナログで申し訳ないです😭個人開発だから許して🙏）
今回はアップデート紹介というところでFigma関連の機能には深く踏み込まず、こんなのができるよ〜程度の紹介でした。
ですが、テキストから読み取った机上の空論ではなく、どう動くのかを実際にみるのがいいとおもうので、近いうちにFigmaのプランを契約して、実際に動作を確認したいと思います！
ひとまず参考程度に見ていただけると幸いです。
Discussion