デザインが苦手なエンジニアのための Figma MCP活用入門 - クラウドワークスエンジニアブログ

こんにちは。株式会社クラウドワークスで、クラウドワークステックのエンジニアをしている山﨑です。

私は「デザインが苦手なエンジニア」です。今年の7月に入社したのですが、それまでは、バックエンドとインフラの経験しかありませんでした。

そのため、デザインカンプを見て「この余白は何pxだろう？」「この色はどのトークンを使えばいい？」と悩むことが少なくありませんでした。

Webアプリケーション開発において、デザイナーが作成したデザインカンプを、いかに正確に、そしてスピーディにコードに落とし込むかという課題は、特に私のようなデザインが苦手なエンジニアにとって大きな障壁です。

今回は、この課題を解決するために、 Figma MCPサーバーと、AIコードエディタ Cursor を連携させたコーディングについて、その仕組みと導入事例を紹介します。

デザインに自信がない方にとって、本記事が効率化のヒントになれば幸いです。

Figma MCPサーバーとは、Figmaの「Dev Mode (開発モード)」で有効化できる機能で、MCP という標準化されたインターフェースを通じて、デザインデータをAIエージェントに提供する仕組みです。

簡単に言えば、「FigmaのデザインとAIを繋ぐ役割」を果たします。デザインの細かい数値や構造を、エンジニアが解釈する手間をAIに肩代わりさせることができます。

今回は、ローカルサーバー（デスクトップサーバー）での設定手順をご紹介します。Figma MCPサーバーとCursorの連携は、以下の3ステップで完了します。

Cursorを開き、「Preferences」「Cursor Settings」の画面へ移動し、「MCP & Integrations」セクションを選択します。
「Add Custom MCP」を押下すると、Users/xxxxxxx/.cursor/mcp.jsonが作成されるので、次の設定を入力します。

{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

3.ローカルで起動しているFigma MCPサーバーを認識させます。（補足：緑色のマークが表示されれば正常に起動しています。） MCPサーバーを有効化

導入を進める中で、いくつかの課題に直面しました。

AIが生成するコードは、体感40〜50%ほどの完成度であり、そのまま本番環境に適用できるわけではありませんでした。

また、既存のコードを修正する作業よりも、新規のコンポーネントを一から開発することを得意としている印象でした。

Figmaデスクトップアプリを使用する場合、ローカルサーバーとして動作するため、チーム開発環境全体で連携するには、各メンバーの環境設定を統一する必要がありました。

今後は、GitHub リポジトリのプロジェクト直下に設定ファイルを配置するなどして、開発環境の統一化を図っていきたいです。

AIが生成するコードがチームのコード規約に準拠していなかったり、既存のコードを踏まえた実装をしてくれなかったりと、生成後の修正コストが高く、コード品質にばらつきが生じていました。

今後は、AGENTS.mdなどのAI用ドキュメントの導入・整備にも取り組んでいきたいです。

Figma MCPサーバーとCursorの連携は、デザインが苦手なエンジニアにとって救世主です。

デザインの解釈や正確性に悩む時間をAIに任せることで、誰もが迷いなく開発を進めることができます。

今後も、FigmaやMCPサーバーのアップデートに合わせて、さらなるワークフローの改善を進めていきたいと考えています。

株式会社クラウドワークスでは、このような新しい技術を積極的に活用し、開発プロセスを改善していく仲間を募集しています。

ご興味のある方は、以下のリンクから採用情報をご確認ください。