💡

FigmaMCP＋Cursorで実現するデザイン→コーディング時短ワークフロー

2025/07/19に公開

Figma

frontend

Model Context Protocol

Cursor

生成 AI

tech

 📌1. 前提
 1.1 この記事のゴールweb サイトのデザインからコーディングまでの時短ワークフローを知る
FigmaMCP ＋ Cursor を組み合わせた「セクション単位でのコード生成 →SCSS／WordPress 実装」までの一連の流れを紹介します。

Anima など自動化ツールとの違いを知る
Anima との比較を通じて、FigmaMCP ＋ Cursor が「よりクリーンで効率的なコード出力」を実現できることを紹介します


 1.2 所要時間／時短率／得られた成果

作業フロー
所要時間


コード生成 → SCSS 適用 → WordPress 実装まで
約 8 時間

通常（手動コーディング ＋ 実装）
約 16 ～ 24 時間（2 ～ 3 人日）


 時短率約 60 ～ 67％の工数削減
デザイン切り出し・アニメーション・投稿機能の実装がほぼ自動化

 得られた成果セクション単位で分割された SCSS ファイル群
カスタム投稿機能やアニメーションを含む WordPress テーマのベース
プロジェクトルール（Cursor.md）による一貫性の高いコード品質
Anima と比較してクリーンな HTML/CSS 出力

 1.3 対象読者と前提条件対象読者
Web デザイナー／コーダー／フロントエンドエンジニア
コーポレートサイトなど、比較的ユニークでグラフィカルな web デザインのコーディング自動化に興味がある方
Figma を使ったデザイン → 実装フローを効率化したい方
前提条件
FigmaMCP と Cursor の接続が完了していること
（接続方法の詳細は前回記事「FigmaMCP×Cursor 接続手順」を参照）
Node.js／npm 環境がセットアップ済み
WordPress テーマ開発環境（ローカルサーバー、Git 管理など）が整っていること

https://zenn.dev/morimorihayashi/articles/figma-mcp-environment-memo

 ✅️2. はじめに：なぜ「FigmaMCP ＋ Cursor」を選んだか
 2.1 他の自動化ツールで感じていた不満点コードの冗長さ・手直しコスト
以前は Anima という Figma からのコード自動生成ツールを使用していた。しかし Anima では HTML/CSS がやや冗長になり、命名規則やフォルダ構成を後から揃える必要があった
特に class 名の編集やスタイルの手直し、無駄な記述の削除に膨大な時間が掛かり、時間効率のメリットを感じられなくなったため FigmaMCP ＋ Cursor を試した

プロジェクト固有ルールの設定が難しい
毎回 GUI 上でコーディングの際の注意や AI への指示を記載する必要がある Anima では、命名規則（今回は PRECSS）や SCSS ルール、ファイルの分割、フォルダ構成など細かなプロジェクトルールを自動化しづらい


 2.2 FigmaMCP ＋ Cursor が持つ決め手となる機能クリーン＆シンプルなマークアップ
FigmaMCP ＋ Cursor の出力は、Figma 側でのレイヤー構造が多少乱雑であっても、無駄なタグやインラインスタイルを出力しない
Figma でのデザイン時も時短になる

Cursor の Project Rules による強力なルール適用
SCSS／PreCSS の書き方
セクション単位のファイル分割命名規則
フォルダの構成
後工程を見据えた出力が出来る
見た目を整えた後の、アニメーション実装や WordPress の投稿機能に対応したマークアップまでも自動生成

本記事では、実際に web サイト制作に FigmaMCP ＋ Cursor を組み込み、作業時間を短縮する方法を紹介します。

 ⚔️3. 他ツール比較：Anima vs FigmaMCP ＋ Cursor
 3.1 HTML/CSS 出力品質の違い実際に同じデザインを出力した場合の品質の違いを表にしました。


項目
Anima
FigmaMCP ＋ Cursor


タグ構造
不要な <div> が発生しやすい
レイヤー構造を適切に変更し、デザインの再現に必要最低限のシンプルなマークアップ

クラス命名
自動生成されたランダム文字列が混在

Project Rules のルールに従った一貫した命名

レスポンシブ対応
PC・SP が全て別々のコードで出力される
レスポンシブに耐えられる指定が出力される

!実際のコード比較やデザイン再現度の比較は別の記事で紹介しようと思います。

 4. 実際のワークフローFigmaMCP ＋ Cursor を使った「デザイン → コーディング →SCSS 適用 →WordPress 実装」までの具体的な流れを、セクションごとに手順とポイント付きで紹介します。

 4.1 Figma でデザインを作成する今回はコーポレートサイトの PC／SP デザインを作成しました。

tailwind など CSS フレームワークを使用する予定は無かったので、0 からデザインを作成しています。
この際に、気をつけたことは以下です。
レイアウト（横並び、縦並び）、余白などは必ずオートレイアウトを使用する
サイト内で複数回使うものは（なるべく）コンポーネント化して使い回す
今回は React ベースではなかったので完璧に全てをコンポーネント化はしていません。時間優先のため

token として使用するため色や余白、角丸のサイズ、フォントは variables で設定した
運用もがっつり行うような web サイトの場合はデザイン token も厳密に設定するのですが、今回は最低限の設定にしています

実際の variable 設定
コード上では以下のように変数化して使用しています。



逆に時短のために気をつけなくてよかったこともありました。
無駄なフレームを削除する
全てのグループ・フレームに実装を想定した名前をつける

上記は Cursor がよしなに HTML 構造や class 名を設定してくれたので不要でした。
今までの Figma→ コーディング自動化ではなるべくグループ・フレームの命名もきれいにすることが重要とされていました。しかし、全グループ・フレームの名前を命名に沿って設定するのは膨大な時間が掛かり骨が折れます（HTML 書くのと同じくらい時間かかります…）

ここがデザイン作成時も時短となるポイントでした。
今回作成したデザインはこちらです。

記事用のサムネイルや OG image、favicon も用意しています。

 4.2 セクション単位で Figma から切り出す今回は、React ではなく WordPress に組み込むため、まずは静的なコーディングを行いました。

そのため Component ごとではなくセクション単位でコーディングを進めています。
Figma 上で“まとまりある範囲”をフレーム化
ヘッダー／キービジュアル／フッター／サービス／強み…など、コンポーネントより大きい “セクション単位” でフレームを作成
セクション名は英語で（例：header、service、news）で命名しておく

切り出した Figma デザインのフレームを選択して、共有リンクを取得 - " 選択範囲「〇〇（フレーム名）」まで共有" というリンクを作成してコピーする



Figma でセクション単位の共有リンク取得

 4.3 環境構築まずは HTML×scss の環境構築を行いました（今思えばはじめから WordPress 前提でもよかったかも……という反省があります）
一般的なローカルでの環境構築なので詳しい方法は割愛しますが、、Cursor の Project rule 設定や webpack の設定も行っています。

 Cursor の Project rule今回は最低限の rule のみを設定しました。案件概要を伝えて、最低限守ってほしいコーディング rule を記載しています。

これをプロジェクトルート直下の.cursor/rules に配置しています。
project-setup.mdc
---
alwaysApply: true
---

# Project Setup: Cursor Rules

## 1. プロジェクト情報

- **プロジェクト名**: BloomAI コーポレートサイト制作
- **説明**: FigmaMCP から出力されたデザインを元に、HTML/SCSS/JS でコーディングし、後ほど WordPress テンプレート化を行う。
- **バージョン**: 1.0.0
- **作成日**: 2025-07-14

## 2. コーディング規約

- **命名規則（SCSS）**: コンポーネントファイルは必ず `_component-name.scss` 形式。
- **命名規則（JS）**: JS から操作・変更するクラス名には必ず `js-` プレフィックスを付与。
- **BEM**: 必要に応じて `.block__element--modifier` 形式を併用可能。
- **PreCSS 使用**: PostCSS プラグインとして PreCSS を導入。
- **インデント**: スペース 2 文字。
- **改行**: LF。

## 3. 技術スタック

- **マークアップ**: HTML5
- **スタイル**: SCSS (PreCSS + Autoprefixer + postcss-preset-env)
- **スクリプト**: ES6+ (Babel→Webpack)
- **デザイン連携**: FigmaMCP
- **ビルド**: Webpack
- **ライブリロード**: Browser-Sync
- **レスポンシブ**: ブレイクポイント `768px`（tablet）

## 4. 開発プロセス

1. `npm install` で依存ライブラリをインストール
2. `npm run dev` で Webpack Dev Server + Browser-Sync を起動
3. `src/` フォルダ内を編集 → 自動ビルド&リロード
4. コミット前に `npm run lint` でコードチェックを行う
5. `npm run build` で `dist/` に最適化ビルド生成

## 5. エラー処理とドキュメント

- **エラー処理**:
  - JS では `try…catch` を利用し、コンソールログおよびユーザ通知を実装
  - ネットワーク系エラーは必ずユーザ向けメッセージを表示
- **ドキュメント**:
  - JSDoc 形式で関数ドキュメントを記述
  - 主要機能やコンポーネントの説明は `docs/` に Markdown ファイルとしてまとめる
  - 更新履歴は `CHANGELOG.md` に記載

参考：Cursor – Rule

https://docs.cursor.com/context/rules

 4.4 Cursor で FigmaMCP と接続2025/06/04 に Figma 公式から MCP がサポートされました。

https://www.figma.com/blog/introducing-figmas-dev-mode-mcp-server/
こちらは Dev Mode MCP サーバー という名称で、VS Code の Copilot、Cursor、Windsurf、Claude Code などのエージェント型コーディングツールで利用可能です。

「Figma デスクトップアプリ + 対応するコーディングツール」を組み合わせることで、デザインデータを直接コード生成に活用できます。

※2025 年 7 月時点では Figma デスクトップアプリのみですが、今後は Figma デスクトップアプリなしでも利用できるようにするようです
今回はこちらを使用しようと思い Cursor の MCP に以下の記載をして接続しました。
{
  "mcpServers": {
    "Figma": {
      "type": "sse",
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

参考：Dev Mode MCP サーバー利用ガイド – Figma Learn - ヘルプセンター

https://help.figma.com/hc/ja/articles/32132100833559-Dev-Mode-MCPサーバー利用ガイド
無事に Cursor の MCP サーバーが緑ランプになったので接続できました。

しかし、その後何度も赤ランプになったりして接続が不安定だったので、今回は前回記事の方法(figma-context-mcp)を使用しています。

https://zenn.dev/morimorihayashi/articles/figma-mcp-environment-memo

 4.5 Cursor へのプロンプト例・コード生成ここでは「4.2 セクション単位で Figma から切り出す」の手順で取得する Figma のリンクを Cursor のチャットに貼り付けて簡単な指示をするだけでした。
指示例 1：
@https://www.figma.com/design/〇〇 のコーディングをお願いします。
これはheaderのデザインで、画面上から30px地点に固定で配置されます。スクロールしても追従します。
また、ブレイクポイント（768px）でメニュー部分はハンバーガーメニューになります。
結果 1：

簡単な指示だけで、src/styles/配下に_header.scss を作成し、ハンバーガー用の js ファイルも追加してくれました。

ハンバーガーメニューを開いた後のメニューのデザインが無かったためか、アニメーションが不完全だったため後工程で追加で指示を出しています。
指示例 2：
@https://www.figma.com/design/〇〇 のコーディングをお願いします。
variables.scssの値を使ってください。
結果 2：

特に何のセクションか指示していませんが、Figma デザインから KV（キービジュアル）だと読み取り KV 用の scss ファイルを作成してくれました。また、変数も variables から使用してくれています。

 4.6 下層ページのコーディングここから先は全て Cursor のみの機能で実装できました。

今回時間の都合でトップページのデザインのみしか作れなかったのですが、お問い合わせ／お知らせ一覧／お知らせ詳細ページも作成する必要がありました。
そこで、トップページのデザインを基に下層ページを実装してと伝え、下層ページの実装を進めました。

結果としてはやや手動調整が必要だったものの、大枠はイメージ通りな実装です。実際に出来上がった画面（PC／SP）をご覧ください。
結果 1（お知らせ一覧）：

結果 2（お知らせ詳細）：


 4.7 画像出力や CSS の微調整（インタラクション／スクロールアニメーションなど）
 画像出力画像の出力が成功している部分と失敗している箇所があったので、うまく保存できていないものは手動で画像を登録しました。

上手く出力できていない画像は、以下のようなものです。
背景画像で png や jpeg の想定だったものが svg で直接コード上に記載されている
画像の効果が外れている
画像に対して、乗算効果をつけてさらにマスクを掛けている、など Figma 上で複雑な加工をしているものは一部効果が外れることも

何故か Cursor の処理が失敗し画像が保存できなかったもの

 CSS 調整CSS の調整は全体的に必要でした。

余白や色、flex／grid レイアウトは Cursor×Figma MCP でほぼ完璧に再現できていたものの、主に以下の要素は手動での調整を行いました。
疑似要素でのやや複雑な設定
重なりの順や位置の調整

hover アニメーション
画像の配置・サイズ
グラデーションの向き
グラデーションの border
今回多用した角丸の border は普通に実装しても少し面倒なので仕方が無いような…

スクロールアニメーション
大まかなアニメーションは Cursor が gsap を導入しコードも書いてくれたので実現できていたものの、細かいスピードやタイミングの調整が必要

レスポンシブ
カラム落ちなどは対応できるものの、フォントサイズや要素の非表示などは手動が必要です
通常のデザインファイルでは不可能ですが、2025 年 4 月に公開された Figma Sites ではデザインを作成する段階でレスポンシブの設定が入れられるので、この機能がデザインファイルでも使用出来るようになると近い将来レスポンシブもコーディング自動化出来る可能性があります

デザインがない部分の微調整
これは正解が無かったので仕方がないです

参考：Figma Sites

https://www.figma.com/ja-jp/sites/

 4.8 WP 環境準備と組み込みWordPress に組み込む手順やどのファイルをどこに配置するかなども Cursor に聞いてすぐに対応できました。
また、以下の機能を作成しましたが、こちらも Cursor に指示を仰いで実装しています。
お問い合わせ
お知らせ投稿（ブロックエディタ）機能
カスタムタクソノミー


 5. 成果と時短率手動でコーディングをした場合と、FigmaMCP ＋ Cursor の場合の時間を比較しました。

※手動でのコーディングは今回はできていないため、今までの経験からの見積もりです。そのため見積もりとの比較となります。


フロー
手動コーディング
FigmaMCP ＋ Cursor


デザイン整理・フレーム／グループの命名
0.5 ～ 1 時間
0 時間

コードコーディング(TOP・下層 6P、レスポンシブ)
16 ～ 24 時間（2~3 人／日）
8〜10 時間

WordPress テンプレート化・組み込み
6〜8 時間
2 時間

合計
20〜33 時間
12 時間

総工数比較
手動：約 20〜33 時間（2.5 ～ 4 人日相当）
自動：約 8 時間（1 人日相当）
時短率としては、約 60〜70％の工数削減を実現しました。

 6. おわりに
 まとめ本記事では、FigmaMCP ＋ Cursor を活用した「デザイン → コーディング →SCSS→WordPress 組み込み」までの半自動化を試した記録を紹介しました。

結果として、手動では 20 ～ 33 時間ほどかかる工程を、約 8 時間に短縮できました。具体的な手順とポイントをお伝えできていれば幸いです。
ぜひ完成した実際の web サイトも見ていってください。
https://bloomai.jp/

作業フロー	所要時間
コード生成 → SCSS 適用 → WordPress 実装まで	約 8 時間
通常（手動コーディング＋実装）	約 16 ～ 24 時間（2 ～ 3 人日）

項目	Anima	FigmaMCP ＋ Cursor
タグ構造	不要な `<div>` が発生しやすい	レイヤー構造を適切に変更し、デザインの再現に必要最低限のシンプルなマークアップ
クラス命名	自動生成されたランダム文字列が混在	`Project Rules` のルールに従った一貫した命名
レスポンシブ対応	PC・SP が全て別々のコードで出力される	レスポンシブに耐えられる指定が出力される

フロー	手動コーディング	FigmaMCP ＋ Cursor
デザイン整理・フレーム／グループの命名	0.5 ～ 1 時間	0 時間
コードコーディング(TOP・下層 6P、レスポンシブ)	16 ～ 24 時間（2~3 人／日）	8〜10 時間
WordPress テンプレート化・組み込み	6〜8 時間	2 時間
合計	20〜33 時間	12 時間

GitHubで編集を提案

📌1. 前提

1.1 この記事のゴール

1.2 所要時間／時短率／得られた成果

時短率

得られた成果

1.3 対象読者と前提条件

✅️2. はじめに：なぜ「FigmaMCP ＋ Cursor」を選んだか

2.1 他の自動化ツールで感じていた不満点

2.2 FigmaMCP ＋ Cursor が持つ決め手となる機能

⚔️3. 他ツール比較：Anima vs FigmaMCP ＋ Cursor

3.1 HTML/CSS 出力品質の違い

4. 実際のワークフロー

4.1 Figma でデザインを作成する

4.2 セクション単位で Figma から切り出す

4.3 環境構築

Cursor の Project rule

4.4 Cursor で FigmaMCP と接続

4.5 Cursor へのプロンプト例・コード生成

4.6 下層ページのコーディング

4.7 画像出力や CSS の微調整（インタラクション／スクロールアニメーションなど）

画像出力

CSS 調整

4.8 WP 環境準備と組み込み

5. 成果と時短率

6. おわりに

まとめ

Discussion