はじめに
こんにちは、フリーランスエンジニアのRyuです！
Figmaのデータいちいちコピペしてフロント実装するの面倒だな…AIが全部自動で実装してくれないかな…と思ったのでMCPサーバー経由で自動で実装してもらえるようにしてみました。
以下のYoutubeを参考にさせていただきました。
https://www.youtube.com/watch?v=X-aX1TuGP0s
手順
Figmaからアクセストークンを取得
Figma上でアカウントの設定を開きます。
セキュリティ > 個人アクセストークン から新規トークンを作成し、コピーします。
CursorでMCPサーバー立ち上げ
ターミナルを開き以下のコマンドを実行します。
npx figma-developer-mcp --figma-api-key=【取得したFigmaアクセストークン】
するとこのようにMCPサーバーが立ち上がり接続が完了します。
立ち上がったらCursorにこのMCPサーバーを登録してあげます。
Setting > MCP > Add new MCP serverから以下で登録
| 項目 | 値 |
|---|---|
| Name | 適当な名前 |
| Type | sse |
| Server URL | http://localhost:3333/sse |
CursorにFigmaのMCPサーバーが登録されました。
試しに
では早速Cursorくんに質問してみましょう！
参考にさせたいFigmaデータを右クリックして選択範囲のリンクをコピーします
Cursorにリンクを張り付けて内容を聞いてみる
ちゃんと読み込めてる！
最後に
これでFigmaとCursorを連携できたのでガシガシ自動で実装してもらうだけですね！
ただ、連携してるとはいっても微妙に人の手で修正する必要がある場合もあるみたいです。
でもかなり手間が減るのは間違いありません。
便利な機能がどんどん出てきているので、積極的に活用していきたいです。