CursorとFigma：デザインからコードへのワークフロー
Figmaデザインを動作するコードに変換することは、フロントエンド開発で最も時間のかかる部分の一つです。適切なツールとワークフローと組み合わせることで、Cursor AIはこのプロセスを大幅に加速できます。本ガイドでは、FigmaとCursorを接続する方法、デザインからコードを生成する方法、およびデザインシステムとコードベースの間で一貫性を維持する方法をカバーします。
核心的な課題
デザイナーはFigmaで作業します。開発者はコードで作業します。この2つの世界間のハンドオフは摩擦に満ちています：
- スペーシング、カラー、タイポグラフィの手動計測
- デザイントークンとコード変数間の不整合な命名
- ピクセルパーフェクトな実装を確認するための往復
- コードベースが真実のソースから離れていくデザインドリフト
Cursorはこのハンドオフを置き換えるものではありませんが、デザインから動作するコードへの時間を数時間から数分に圧縮できます。
FigmaとCursorを接続するツール
FigmaとCursorの間に単一の公式統合はありません。代わりに、いくつかのツールと拡張機能がこのギャップを埋めます。以下が最も効果的なオプションです。
1. VS Code用公式Figma拡張機能
CursorはVS Codeをベースにしているため、公式Figma拡張機能はそのまま動作します。
機能：
- Cursorのサイドパネル内にFigmaデザインを表示
- エディターを離れずにデザイン検査（スペーシング、カラー、タイポグラフィ）
- デザインファイルを特定のコードファイルにリンク
- Figmaファイルが変更された際にリアルタイムでデザイン更新を表示
セットアップ：
- Cursorを開く
- 拡張機能（Ctrl+Shift+X / Cmd+Shift+X）に移動
- "Figma" を検索して公式拡張機能をインストール
- Figmaアカウントを接続
- 拡張機能パネルにFigmaファイルURLを貼り付け
Figma拡張機能の制限：
- 自動的にコードを生成しない
- 読み取り専用のデザイン表示
- コードへの手動変換が必要
2. Frontier拡張機能
FrontierはサードパーティのVS Code拡張機能で、Figmaリンクからコードを生成します。ReactおよびVueコンポーネントに特に役立ちます。
機能：
- FigmaコンポーネントURLを受け付ける
- デザインに基づいてReact/Vue/HTMLコードを生成
- デザインシステムコンポーネントマッピングをサポート
- CursorのAIを使った反復的な洗練を可能にする
ワークフロー：
- Figmaからコンポーネントリンクをコピー
- Frontierに貼り付ける
- 生成されたコードを受け取る
- ファイルをCursorで開き、チャットを使って洗練させる
マッピングされたデザインシステムがある場合、Frontierが輝きます。Figmaのボタンが既存の<Button />コンポーネントにマッピングされるべきであることを認識し、生のHTMLを生成するのではなく。
3. Superflex.ai
Superflex.aiは、Figmaメタデータを抽出してエディターに統合するVS Codeプラグインを提供します。
機能：
- デザイントークン（カラー、フォント、スペーシングスケール）を抽出
- コンポーネントスキャフォールディングを生成
- CursorおよびVS Codeの両方と統合
4. CursorMate
CursorMateは、Cursorワークフロー内で直接Figma URL統合を可能にするコミュニティツールです。
動作方法：
- CursorMateにFigma URLを提供
- Figma APIを介してシリアライズされたデザインデータを取得
- プロジェクト内の
.cursormate/ディレクトリにデータを保存 - Cursorチャットプロンプトでこのデザインデータを参照可能
CursorMateを使用したCursorプロンプトの例：
".cursormate/hero-section.jsonのデザインデータを使用して
ヒーローセクションのReactコンポーネントを生成してください。
Tailwind CSSを使用し、スペーシングとタイポグラフィを正確に
一致させてください。"
Cursor用にFigmaデザインをエクスポート
拡張機能を使用したくない場合、手動エクスポートワークフローもCursorとうまく機能します。
方法1：Figmaから直接CSSをコピー
FigmaのDev Mode（以前のInspectパネル）ではCSSプロパティをコピーできます：
- Figmaでレイヤーを選択
- Dev Modeに切り替え（Shift+D）
- CSSプロパティをコピー
- Cursorチャットに貼り付けて変換を依頼
Cursorプロンプト：
"このCSSをTailwind CSSユーティリティクラスに変換してください：
background: #1E293B;
border-radius: 8px;
padding: 16px 24px;
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #FFFFFF;"
方法2：SVGとしてエクスポートして説明
複雑なコンポーネントの場合、デザインをSVGとしてエクスポートして必要なものを説明します：
- Figmaでコンポーネントフレームを選択
- SVGとしてエクスポート
- SVGコードをCursorに貼り付け
- React/Vueコンポーネントへの変換を依頼
Cursorプロンプト：
"このSVGをインラインスタイル付きのReactコンポーネントに
変換してください。カラーはテーマ化可能なようにCSS変数を
使用してください。"
方法3：スクリーンショットとビジョン（利用可能な場合）
Cursorの設定が画像入力をサポートしている場合、デザインのスクリーンショットを直接チャットに貼り付けることができます：
Cursorプロンプト：
"このデザインをTailwind CSSを使用したReactコンポーネントとして
実装してください。レイアウト、カラー、スペーシングを可能な限り
正確に一致させてください。"
Cursorチャットでの画像サポートは、モデルとプランによって異なります。Claude Sonnet 4は画像入力をサポートしていますが、他のモデルはサポートしていない場合があります。このワークフローに依存する前に、モデルの機能を確認してください。
デザインからコードを生成
Cursorにデザインデータが入ったら、生成されるコードの質はプロンプトの仕方に大きく依存します。
プロンプト戦略
戦略1：最初にデザイントークンを提供
プロジェクトにデザインシステムがある場合、コンポーネントを依頼する前にトークンを共有します：
私たちのデザインシステムは以下のトークンを使用します：
- プライマリカラー：#3B82F6
- ボーダーラディウス：8px
- スペーシングスケール：4px, 8px, 12px, 16px, 24px, 32px
- フォント：Inter、ウェイト400および600
これらのトークンを使用して、画像、タイトル、説明を持つ
カードコンポーネントを生成してください。
戦略2：複雑なデザインを分解
一度にページ全体を依頼するのではなく、セクションに分解します：
ステップ1："ナビゲーションバーコンポーネントを生成"
ステップ2："ヒーローセクションを生成"
ステップ3："機能グリッドを生成"
ステップ4："これらを単一のページレイアウトに組み立てる"
戦略3：フレームワークを指定
常に技術スタックに言及します：
良い例："このデザイン用にTailwind CSSを使用したNext.js 14ページを生成"
悪い例："このデザインをコードにしてください"
デザインシステムの維持
本当の課題は最初のコード生成ではなく、デザインシステムとコードベースの両方が進化するにつれてコードを同期させ続けることです。
コード内のデザイントークン
デザイントークンを、デザイナーと開発者の両方が参照する集中ファイルに保存します：
// tokens.ts
export const tokens = {
colors: {
primary: '#3B82F6',
secondary: '#64748B',
background: '#F8FAFC',
surface: '#FFFFFF',
},
spacing: {
xs: '4px',
sm: '8px',
md: '16px',
lg: '24px',
xl: '32px',
},
borderRadius: {
sm: '4px',
md: '8px',
lg: '12px',
},
fontFamily: {
sans: "'Inter', sans-serif",
},
} as const;
コンポーネントを生成する際、Cursorにこれらのトークンを参照するよう指示します：
"src/tokens.tsのデザイントークンを使用し、ハードコードされた値は
使用しないでください。"
Figmaとコードの同期維持
| アプローチ | 労力 | 正確性 |
|---|---|---|
| 手動更新 | 高 | 中 |
| デザインと共有されるトークンファイル | 中 | 高 |
| API経由の自動同期 | 低（セットアップ） | 高 |
| 週次デザインレビュー | 中 | 中 |
"Tokens Studio"や"Figma Tokens"などのプラグインを使用してFigma変数をJSONにエクスポートします。JSONをリポジトリにコミットします。そうすると、CursorはFigmaが使用するのと同じトークンファイルを読み取ることができます。
ベストプラクティス
1. コード生成用にFigmaファイルを整理
- レイヤーとコンポーネントに一貫した命名を使用
- 関連要素をフレームにグループ化
- 再利用可能なUI要素にはFigmaのコンポーネントシステムを使用
- Figmaコメントでスペーシングとレイアウトロジックを文書化
2. 生成されたコードを慎重にレビュー
デザインからのAI生成コードにはしばしば問題があります：
- デザイントークンの代わりにハードコードされた値
- レスポンシブ動作の欠如
- アクセシビリティの見落とし（altテキストの欠如、低コントラスト）
- 不必要なネスティングまたはdivスープ
コミット前に常にレビューおよびリファクタリングしてください。
3. Cursorチャットを使った洗練
初期生成後、チャットを使って磨きをかけます：
"このコンポーネントを以下のようにリファクタリングしてください：
1. tokens.tsのデザイントークンを使用
2. モバイル用のレスポンシブブレークポイントを追加
3. アクセシビリティ用のaria-labelを追加
4. ボタンを再利用可能なサブコンポーネントに抽出"
4. デザインエクスポートのバージョン管理
Figmaからデザインアセットやトークンファイルをエクスポートする場合、Gitにコミットします：
# Figmaからトークンをエクスポート
cp ~/Downloads/tokens.json design-system/tokens.json
# コンテキストを添えてコミット
git add design-system/tokens.json
git commit -m "Figma v2.3からトークンを更新 —— 新カラーパレット"
これにより、デザイン変更の監査証跡が作成されます。
一般的な問題と解決策
生成されたコードがデザインと一致しない
原因： AIはデザインシステムや制約について十分なコンテキストを持っていない。
解決策： デザイントークンを提供し、既存のコンポーネントを参照し、正確なフレームワークとスタイルアプローチを指定する。
カラーやフォントが間違っている
原因： Figmaはhexコードまたはスタイル名を使用しており、AIはそれらをプロジェクトのテーマにマッピングできない。
解決策： コードを生成する前にテーマ設定ファイルを共有する。
異なる画面サイズでレイアウトが崩れる
原因： Figmaデザインは通常、単一のビューポートサイズで作成される。
解決策： プロンプトで明示的にレスポンシブ動作を依頼する。プロジェクトがブレークポイントを使用している場合は指定する。
拡張機能の競合
原因： 複数のFigma関連拡張機能がCursor内で競合する可能性がある。
解決策： アクティブに使用している拡張機能のみをインストールする。他を無効にしてCursorを再起動する。
まとめ
FigmaからCursorへのワークフローは、単一のボタンプレスではなく、ツール、プロンプト、レビューのパイプラインです。最も生産性の高いチームは以下を組み合わせます：
- Figma拡張機能（公式またはサードパーティ）によるCursor内でのデザインアクセス
- デザインとコード間で共有される明確なデザイントークン
- フレームワーク、トークン、制約を指定する構造化されたプロンプト
- 初期出力を磨くための反復的な洗練（Cursorチャットを使用）
主なポイント：
- VS Code用公式Figma拡張機能は、Cursor内でデザインを表示するために使用可能
- FrontierとSuperflex.aiはFigmaリンクからコードを生成できる
- プロンプトには常にデザイントークンと技術スタックのコンテキストを提供する
- より良い結果を得るために複雑なデザインを小さなコンポーネントに分解する
- アクセシビリティ、レスポンシブ性、トークン使用状況についてAI生成コードをレビューする
練習を重ねることで、Figmaデザインから動作する、本番環境対応のコンポーネントまで10分未満で到達できます。
最終更新：2025年6月