figmaとwindsurfを連携することで、自動コーディングをすることが可能になりました。 弊社でも上記を活用して、効率よくコーディングを進めています。 今回はメリットとデメリットなどをお話できればと思います。

Windsurf×Figma連携でできること・メリット

業務効率化とリソースの削減

圧倒的なスピード： FigmaのURLをWindsurfの「Cascade」に投げるだけで、数秒でベースとなるReactやVue、Next.jsのコードが組み上がります。

デザイン再現性の高さ

AIがFigmaのレイアウト構造（Auto Layoutなど）やスタイル（トークン）を直接読み解くため、デザインのズレが最小限に抑えられます。
figmaでのデザインをする際にオートレイアウトを使用することでより政策に自動コーディングを行うことができます。

「Figma MCP Server」を使ってWindsurfと直接連携する

MCP（Model Context Protocol）を利用して、WindsurfのAIアシスタント「Cascade」にFigmaの閲覧能力（ツール）を直接付与する方法をご紹介します。

ステップ1：Figmaの「パーソナルアクセストークン」を取得

①Figmaを開き、右上のプロフィールアイコンから [設定] ＞ [アカウント] に進みます。
②トークン名（例: Windsurf-MCP）を入力し、有効期限を90日、スコープ（ファイルの読み取り権限など）を設定してトークンを発行・コピーします（※一度しか表示されないのでメモしておきます）。

 

WindsurfでFigma MCPを設定する

Windsurfを起動する

右上歯車マークからWindsurf Settingsを選択する

CascadeからOpen MCP Marketplaceを開く。

Figmaインストール画面の歯車を選択し、以下のようなFigma MCPサーバーの設定を追加します。

 

 

CascadeにFigmaのURLを渡してコーディングを指示

figmaでコーディングモードにきりかえフレームを右クリックしリンクをコピーします。

上記のリンクを張り付け以下の内容をAIになげると自動コーディングができます。

プロンプト例)

【リンク】
上記のデザインを元にHTMLとcssを生成してください。

 

 

 

自動コーディングの精度を高めるコツ

Figma側で「Auto Layout（オートレイアウト）」を徹底する

Figma側がただの「要素の絶対配置（バラバラに置かれたボックス）」になっていると、AIはレスポンシブなFlexboxやGridのコードをうまく生成できません。
Figma側でしっかりと Auto Layout を組んでデザインしておくことが、綺麗なHTML/CSSを出力させる最大の秘訣です。

WindsurfとFigmaの連携は、これまでの「デザインを見て、測って、手で書く」というフロントエンド開発のフローを根本から変えてしまいます。

特にFigma MCPの導入は、AIが人間と同じようにデザインカンプを直接確認しながらコーディングしてくれるため、1回設定してしまえば開発速度が何倍にも跳ね上がります。
ぜひこの記事を参考に、最新の「Design to Code」環境を試してみてください！