Figma MCP × Cursor でデザインからHTMLを自動生成 - 実践ガイド

Figma MCP × Cursor でデザインからHTMLを自動生成 - 実践ガイド

作成日:
更新日:
FigmaMCPCursorHTMLCSSAITailwind CSS

Figmaデザインからサイトをコーディングする場合、

従来のワークフローでは、Figmaを開いてサイズを測り、カラーコードをコピーし、フォント設定を確認して...と、地道な作業が必要でした。

今回、Figma公式のMCPサーバーを使って、AIに直接Figmaのデザイン情報を読み取らせ、HTMLを自動生成してみました。結論から言うと、驚くほど素早くベースが構築できる一方で、細かい再現度には課題があることがわかりました。

この記事では、設定方法から実践、そして再現度を高めるためのベストプラクティスまでをまとめます。

MCP（Model Context Protocol）とは？

MCP（Model Context Protocol） は、Anthropic（Claude開発元）が提唱するオープンプロトコルです。AIが外部サービスのAPIを直接呼び出せるようになります。

従来のAIワークフロー

ユーザー: 「このFigmaデザインをHTMLにして」
AI: 「Figmaのデザイン情報を教えてください」
ユーザー: （スクリーンショットを貼り付け）
AI: 「見た目から推測すると...」 ← 不正確

MCPを使ったワークフロー

ユーザー: 「このFigmaデザインをHTMLにして」
AI: （Figma APIを呼び出してデザイン情報を取得）
    「以下のHTMLを生成しました」 ← 正確なサイズ・色・フォント

Figma MCP サーバーの種類

Figma公式のMCPサーバーには2種類あります。

サーバー特徴必要なもの
Desktop Server選択ベース + リンクベース、画像ダウンロード機能ありFigmaデスクトップアプリ
Remote Serverリンクベースのみ、OAuth認証Webブラウザのみ

今回は機能が豊富な Desktop Server を使用します。

Step 1: Figmaデスクトップアプリの設定

1-1. MCPサーバーを有効化

  1. Figmaデスクトップアプリを開く（最新版にアップデート）
  2. デザインファイルを開く
  3. Dev Modeに切り替える（ショートカット: Shift + D）
  4. 右パネルの「MCP」セクションで 「Enable desktop MCP server」 をクリック

画面下部に「MCP server enabled」と表示されれば成功です。

1-2. サーバーのエンドポイント

MCPサーバーは以下のアドレスで起動します：

http://127.0.0.1:3845/mcp

Step 2: CursorのMCP設定

2-1. 設定ファイルを編集

Cursorの設定ファイル（~/.cursor/mcp.json）を編集します。

~/.cursor/mcp.json
{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

2-2. Cursorを再起動

設定を反映するために、Cursorを完全に終了して再起動します。

2-3. 接続確認

MCPが正しく認識されると、Cursorの設定画面（Cursor → Settings → MCP）に figma-desktop が表示されます。

Step 3: 実際にHTMLを生成してみる

3-1. プロンプトの書き方

以下のようにプロンプトを書きます：

use figma-desktop MCP

/path/to/your/project
https://www.figma.com/design/xxxxx?node-id=1-647

このFigmaデザインをHTML/CSSで実装してください。
- Tailwind CSS CDNを使用
- 画像はローカルにダウンロード

3-2. 取得できる情報

Figma MCPは以下の情報を取得できます：

ツール取得内容
get_design_contextノードの構造、スタイル、生成コード
get_screenshotノードのスクリーンショット
get_variable_defsDesign Tokens / Variables
get_metadataファイル情報

3-3. 生成されるコード

MCPはReact等の形式でコードを生成する事が多いようです。純粋なHTML/CSSが必要な場合は、AIに変換を依頼します。

Figma MCPが生成するコード（例）
<div className="bg-[#ff7] border border-[#ca1e08] px-5 py-2.5 flex items-center justify-between">
  <span className="font-['DotGothic16'] text-[#8e1606] text-base">Home :)</span>
</div>

実践: Tailwind CSSデモのHTML化

今回、Figma公式が提供しているTailwind CSSのデモデザインをHTML化してみました。

結果: 素早くベースを構築できた

  • 5分程度でページ全体の構造が完成
  • カラーコード、フォント設定、レイアウトが正確に取得できた
  • 12個のレシピカードがグリッドレイアウトで正しく配置

課題: 細かい再現度に問題があった

問題1: 画像のクロッピングが再現されない

Figmaでは画像にマスク（切り抜き）が適用されていましたが、生成されたHTMLではobject-containで全体が表示されてしまいました。

原因: Figmaの画像クロッピング設定は複雑なposition値で実装されており、シンプルな実装では再現できない

解決策: Figma MCPから取得した正確な値を手動で適用

Figmaから取得したクロッピング値
.entry-image-container {
  width: 164.818px;
  height: 174.192px;
  position: relative;
  overflow: hidden;
}
.entry-04 img {
  position: absolute;
  height: 380.78%;
  left: -63.58%;
  top: -168.96%;
  width: 225.87%;
}

問題2: アイコンが異なる

生成されたコードでは汎用的なSVGアイコンが使用されていましたが、Figmaのデザインではカスタムアイコンが使われていました。

解決策: Figma MCPの画像サーバー（localhost:3845）からSVGをダウンロード

curl -o images/arrow.svg "http://localhost:3845/assets/xxxxx.svg"

問題3: 行間・文字間の微調整

line-heightやletter-spacingの値が正確に反映されていないケースがありました。

解決策: Figmaから取得した値を明示的に指定

.heading {
  font-family: 'DotGothic16', sans-serif;
  font-size: 45px;
  line-height: 0.9;        /* Figma: 90% */
  letter-spacing: -1.35px; /* Figma: -3% */
}

再現度を高めるためのベストプラクティス

デザイナー向け

1. レイヤー名を整理する

✅ 良い例: Header, Nav, Card, Entry-01
❌ 悪い例: Frame 1, Rectangle 2, Group 3

2. Auto Layoutを使用する

絶対位置ではなくAuto Layoutを使うと、Flexbox/Gridで再現しやすくなります。

3. 画像は切り抜き済みで用意する

複雑なマスクよりも、最終形の画像をエクスポートできるようにしておくと実装がスムーズです。

4. Design Tokensを活用する

カラーやフォントをVariablesで管理しておくと、MCPで一括取得できます。

✅ Background/Primary: #FFFF77
✅ Text/Body: #8E1606

エンジニア向け

1. 段階的に指示を出す

Step 1: 「まずFigmaからデザイン情報を取得してください」
Step 2: 「シンプルなHTML/CSSで実装してください」
Step 3: （スクリーンショットを共有）「この部分が異なります」
Step 4: 「画像をローカルにダウンロードしてください」

2. 差分はスクリーンショットで共有

言葉で説明するより、赤枠で囲ったスクリーンショットを共有する方が正確に伝わります。

3. 画像は早めにダウンロード

Figma MCPの画像はlocalhost:3845から配信されるため、Figmaアプリを閉じると表示されなくなります。作業中にダウンロードしておきましょう。

curl -o images/hero.png "http://localhost:3845/assets/xxxxx.png"

4. 再現度チェックリスト

□ フォント（Family, Size, Weight, Line Height, Letter Spacing）
□ カラー（背景、テキスト、ボーダー）
□ スペーシング（margin, padding, gap）
□ 画像（サイズ、クロッピング、位置）
□ アイコン（SVG、サイズ、色）
□ ボーダー（太さ、色、角丸）
□ レイアウト（Flexbox/Grid、配置）

今後の実用に向けての調整事項

1. ルールファイルの整備

プロジェクトごとに.cursor/rulesにFigma→HTML変換のルールを記述しておくと、毎回の指示が簡潔になります。

.cursor/rules/figma-to-html.md
## Figma → HTML 変換ルール
 
- Tailwind CSS CDNを使用
- 画像はimages/フォルダにダウンロード
- フォントはGoogle Fontsを使用
- line-height, letter-spacingはFigmaの値を忠実に反映

2. コンポーネントライブラリとの連携

FigmaのCode Connect機能を使うと、コンポーネントと実際のコードをマッピングできます。これにより、生成されるコードが既存のコンポーネントライブラリを参照するようになります。

3. CI/CDへの組み込み

将来的には、Figmaのデザイン更新をトリガーにHTMLを自動生成するCI/CDパイプラインの構築も可能かもしれません。

まとめ

項目評価
構築スピード★★★★★ 驚くほど速い
構造の正確性★★★★☆ レイアウトは正確
スタイルの再現度★★★☆☆ 微調整が必要
画像の再現度★★☆☆☆ 手動ダウンロードが必要

結論: Figma MCPはベース構築の高速化には非常に有効ですが、ピクセルパーフェクトを求める場合は追加の調整が必要です。

デザイナー・エンジニア双方が「MCPで取得しやすいデザイン」「MCPの出力を活かす実装」を意識することで、ワークフロー全体の効率化が期待できます。

参考リンク