Zenn
✍️

【Cursor】FigmaにアクセスしてUIコードを自動生成！

2025/03/17に公開
57
AI
Figma
Flutter
uiデザイン
Cursor
tech

「Figmaデータからコードの自動生成できたら良いのに！」 と思いますよね。

CursorではFigmaのスクショ画像からコード生成は可能でしたが、
細かなデザイン仕様を把握していないので結局一つ一つ修正する必要があることや、
スクショして貼り付けて説明してみたいなことが面倒に思っていました。

ただ最近、FigmaのMCP Serverなるものを知り、
使い方によってはかなり実装が楽にできたので共有します！

Figma MCP Serverについて

MCPについては下記の記事がとても参考になったので詳しくは割愛しますが、
AIと特定の外部サービス（今回はFigmaのAPI）とのやり取りを行えるようになる仕組みのことです。

https://zenn.dev/ks0318/articles/053b5bc1701c31

https://zenn.dev/takna/articles/mcp-server-tutorial-01-install

今回は下記のFigma MCP Serverを使用してFigmaのデザインデータを取得できるようにします🏃

https://github.com/GLips/Figma-Context-MCP

MCP ServerからFigmaデータを取得する流れ

一応流れについて簡単に載せますが、
後述の設定をして試すとわかり良いと思います🙆‍♂️

  1. MCP Serverの設定（Figmaへのアクセストークンなどを設定）
  2. MCP Serverを自分のPCで立ち上げる
  3. CursorのAgent機能でFigmaのURLを指定して指示
  4. Figmaのデータを取得してコード生成！

それでは設定方法を解説します！

CursorのMCP設定方法

1. Figma APIキーの取得

Figma の API にアクセスするためのアクセストークンを取得します。
（Figma公式の手順はこちら）

  1. Figmaにて Settings > Account > Security を選択
  2. 「Personal access tokens」セクションで「Generate new token」をクリック
  3. 適当なトークンの名前（例: figma-mcp）を入力して「Generate token」をクリック（権限は下記のように File content の Read-only のみで問題なさそうです）
  4. 表示されたAPIキーをコピー ※このキーは一度しか表示されないので必ずメモしてください！

2. CursorのMCP設定

CursorのMCPの設定を行うファイルを作成します。
Cursor公式に記載されているように、下記のどちらかになるかと思います。

  • プロジェクト固有のMCP設定であれば{プロジェクトルート}/.cursor/mcp.json
  • すべてのプロジェクト共通で使用する設定の場合は~/.cursor/mcp.json

記載する内容についてはFigma-Context-MCPに記載されていますが、下記のようなものを記述します。
FIGMA_API_KEYの箇所はご自身のものに書き換えてください。

mcp.json
{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

以上でセットアップは完了です！！

Cursor右上の歯車の設定ボタンから MCP を開くと、
figma-developer-mcpが設定されているかと思います。

実際に試してみよう！

Figma MCP Server公式に載っているように、
適当な箇所で「Copy link to selection」を選択してURLを取得しましょう。

そして、下記のようにCursorのAgentモードで指示をすると実装してくれるはずです！

@https://www.figma.com/design/test?node-id=0000 
上記のFigmaデザインからUIを実装して。

↓Cursor Agentのレスポンス。MCPを使用している。

Figma MCP Serverを使用して良かった点

  • Figmaのデザインデータ通りに実装してくれるのでスクショより精度高め（ただ、一度に読み取る画面が多いと逆にスクショより精度が悪くなるような気もします…？）
  • タスクに仕様やFigmaのURLが載せてあったら、それをCursorにコピペするだけで実装が開始できる！（ラクチン！）
  • Figmaにて使用されている画像もよしなにダウンロードしてくれるので、いちいちFigmaでExportする必要がありません！（※サイズの指定方法などはわかっていません🙏）

Tips

まだ少ししか試していませんが、いくつか学んだことがあるので載せておきます。

  • 使用するモデルは claude-3.7-sonnet-thinking がかなり良さそうでした。
  • デザインの指定範囲が大きいとうまく実装できないことが多いので、指定する範囲は細かくし、複数のURLに分割して指示した方が良さそうです。
  • デザインシステムや共通コンポーネントがある場合は .cursor/rules にしっかり記載をしておいた方が良さそうです。（僕はFlutterを普段使用しており、その際のruleファイルの例を載せておきます。拙いですが何かの参考になれば程度で…）
Flutterでのruleファイルの例
ui.mdc
---
description: Apply this rule when implementing UI
globs: 
alwaysApply: false
---
# UI実装する際のルール

UIの実装を行う際は、以下のルールに従ってください。

## デザインシステムの利用を優先する

- `packages/design_system_ui` ディレクトリに デザインシステム が定義されています。
  - デザインシステムのコードについては書き換えないでください。
- ほとんどのUIコンポーネントはデザインシステム内に存在するため、実装前に後述の「デザインシステムのコンポーネント一覧」を確認して当てはまるものがないか確認してください。
  - デザインシステム内に該当するコンポーネントがない場合のみ、独自の実装を行ってください。
- 色については `@design_system_colors.dart` に定義されています。
- フォントについては `@design_system_text_style.dart` に定義されています。

## Figma MCPを使用するルール

- FigmaのURLが指定された場合、Figma MCPを利用してください。
- ファイルの内容すべてを取得すると時間がかかることや容量の大きさからエラーが起きるので、指定されたnodeのみの取得など取得範囲を絞ってください。
- Figmaではデザインシステムのコンポーネントが使用されていることが多いので、後述の「デザインシステムのコンポーネント一覧」を確認して当てはまるものを利用してください。
  - 当てはまるものがない場合のみ独自のコンポーネントを実装してください。
- テキスト・色の値は必ずデザインファイルと同じもの、かつデザインシステムに定義されているものを使用して実装してください。
- PaddingやMarginなどの値は必ずデザインファイルと同じものを実装してください。

## UIの実装のルール

- 適切な単位でSectionを分けるようにして、bodyの中身が大きくなりすぎないようにしてください。
- BottomNavigationBarについてはすでに `@app_navigation_bar.dart` に実装済みのため、Figmaデザインで指定されても実装をする必要はありません。
- Riverpodを使用する実装はUI構築では行わなくて良いです。
- 同じような構成のUIを実装する際は、共通のコンポーネントを作成してください。

## UIの実装場所

UIは `lib/presentation/` ディレクトリ配下に実装されています。
ディレクトリ構造は以下のようになっています。

presentation/
└── xxx/             # 機能ごとに xxx ページのディレクトリを作成
   ├── xxx_page.dart # ページ本体。Scaffold などの基本的なレイアウトのみを記述
   ├── xxx_body.dart # Scaffold の body を管理
   ├── components/   # body のセクションやコンポーネントを管理する


## 画像ファイルについて

- 画像ファイルは`assets`ディレクトリに格納しています。
- 既存のディレクトリに実装する機能が存在しない場合のみ新しいディレクトリを作成してください。
- ディレクトリを作成した場合は `@pubspec.yaml` に追記する必要があることを注意してください。
- また、`flutter_gen`パッケージを使用している関係で、画像ファイルを追加したら`build_runner`を実行する必要があります。
- 必ず、UIの実装上は `Image.assets('')` のように直書きでパスを指定するのではなく、`Assets.path` の形式で`flutter_gen`を使用した書き方にしてください。
- Figmaから画像が取得できる場合は取得してください。

## 参考にするファイルについて

UIの実装方法については下記の画面の実装を参考にしてください。
- `@main_page.dart` 
- `@main_section.dart`

# デザインシステムのコンポーネント一覧

- **app_bar.dart** - アプリバー
- **bottom_navigation_bar.dart** - 下部ナビゲーションバー
- **chip.dart** - チップコンポーネント
- **dialog.dart** - ダイアログ
...

おわりに

小さいタスクであれば一発で思った通りの実装をしてくれたのに感動し、記事を書きました！

ただ、画面全体を一気にを実装させたりすると「結構違うな…」という印象はあり、
今後さらによくなっていくことを期待しています…！

いろんな方が記事を書いているかもしれず、
二番煎じの記事であったらすみません！🙇‍♂️

※勢いで記事を書いており、実はまだ少ししかFigma MCPを触っていません🙏
もし「こうすると結果よくなるよー！」などの知見がありましたら共有いただければ嬉しいです！

※今回使用したFigma MCP Serverはこちらに記載のCommunity Serversであり、コードざっくり読んだ感じも問題はないのでは…と思っていますが使用する際は一応自己責任でお願いしますっ！

57

Discussion