Figma MCPを使ってデザインからコードを生成してみての感想

最近、Figmaが提供するMCP（Model Context Protocol）サーバーを使って、デザインから直接コードを生成できるようになったと聞いて、実際に検証してみました。Next.jsプロジェクトで404エラーページのデザインを実装するまでを試したので紹介します。 セットアップは意外と簡単 まず、Figmaの公式ガイドを参考にセットアップを進めました。思っていたより簡単で、特につまずくポイントはありませんでした。 基本的な流れは以下の通りです。 Figmaデスクトップアプリでdev modeを有効化 Cursorの.cursor/mcp.jsonに設定を追記 「New MCP server detected」と表示されれば、登録成功です。 念の為、対象のMCPサーバーが有効化されているかチェックしましょう この設定だけで、CursorからFigmaのデザインデータを直接参照できるよ