はじめに

こんにちは、フリーランスエンジニアのRyuです！

Figmaのデータいちいちコピペしてフロント実装するの面倒だな…AIが全部自動で実装してくれないかな…と思ったのでMCPサーバー経由で自動で実装してもらえるようにしてみました。

以下のYoutubeを参考にさせていただきました。
https://www.youtube.com/watch?v=X-aX1TuGP0s

手順

Figma上でアカウントの設定を開きます。

セキュリティ > 個人アクセストークンから新規トークンを作成し、コピーします。

ターミナルを開き以下のコマンドを実行します。

npx figma-developer-mcp --figma-api-key=【取得したFigmaアクセストークン】

するとこのようにMCPサーバーが立ち上がり接続が完了します。

立ち上がったらCursorにこのMCPサーバーを登録してあげます。

Setting > MCP > Add new MCP serverから以下で登録

CursorにFigmaのMCPサーバーが登録されました。

では早速Cursorくんに質問してみましょう！

参考にさせたいFigmaデータを右クリックして選択範囲のリンクをコピーします

Cursorにリンクを張り付けて内容を聞いてみる

ちゃんと読み込めてる！

これでFigmaとCursorを連携できたのでガシガシ自動で実装してもらうだけですね！
ただ、連携してるとはいっても微妙に人の手で修正する必要がある場合もあるみたいです。
でもかなり手間が減るのは間違いありません。

便利な機能がどんどん出てきているので、積極的に活用していきたいです。