Zenn
😗

Figma MCPとClaude Codeで、フロントエンドのお絵描きを楽にする。～ギャルゲー風テックブログ開発日記 その1～

に公開
Figma
ゲーム開発
frontend
Security
ギャルゲー
tech


(環境構築さえすれば以下のような実装というかお絵描きが数分でできるようになるので結構良かったです。)

背景

最近ギャルゲー風テックブログをちびちび作っています。
そんな中で、自分が普段触る言語はPythonであり、React等のWeb系フレームワークは流暢に書けません。また、ギャルゲーをコンセプトにするからには、デザインや世界観はやはり重要です。ただし自分はそのあたりのセンスもないです。

なので、本質である「世界観の構築」や「デザイン性」という部分に注力したく、フロントエンドの実装をどうやったらサボれるかなと思っていたら、最近こんな記事なんかも出ていて、Figmaのデザインだけやってフロント実装は人がやらないスタイルができないかと思い、試してみました。

結果、悪くなかったです。採用。

この記事でわかること

  • Figmaが提供するDev Mode MCPサーバーをClaude Codeから呼び出してフロントエンド実装を楽にする方法

Figmaの公式ページでも構築方法については言及されているので、詰まったらこちらのページを参照してください。

事前知識

超簡単に、この記事に出てくるキーワードの概要を載せます。

Figma


UI/UXデザインツール。
ブラウザ上で動作し、複数人でリアルタイムに共同作業が可能。Webアプリやモバイルアプリの画面設計、プロトタイピングに使われる。

MCP(MCP Server)

Model Context Protocolの略。 AIと対話するときに統一したフォーマットで対話できるようにするようなプロトコル。「AI 用の USB-C ポート」などと言われてる。

Figma MCP

Figmaが提供するMCP Serverの機能。これを使うことで、Figma内に自分でつくったデザインデータ等を任意のAIに読み込ませて様々な処理をすることができる。
今回で言えば、Figma内のデザインを、Claude Codeで読み込んでコードにおこすということができるようになる。

Claude Code


Anthropic社のAI「Claude」を使ったコード生成とかがCLIでできて良い。

Figma desktop appのインストールと設定

  1. Figma Desktopをローカルの端末にインストールする
    FigmaはWebブラウザからアクセスしてデザインできますが、クラウド版はMCPの機能が使えません。(2025/6/18時点)
    インストール自体は無料なので、こちらのFigma公式サイトの「デスクトップアプリ」からインストールしましょう。

また、Figmaのアカウントを持っていない場合はこの時点でアカウント登録もしちゃいましょう。

  1. Figmaに課金する
    MCPサーバはを使うにあたって、FigmaのDevプランにする必要があります。料金体系はこちらで確認できます

自分は以下の赤枠で囲っているプランを選択しました。年間契約ではなく月額契約で、大体2,200円くらいでした。

  1. ローカルでFigma desktop appを起動してファイルを開く
    アプリケーションを起動したら、プロジェクトがいくつか並んでいる画面にいくので、そこで自身の任意のプロジェクトを開きましょう。

  2. Figma MCPサーバを有効にする
    プロジェクトを開いたら、画面左上のロゴ > 基本設定 > Dev Mode MCPサーバーを有効にするをクリックします。

    MCPサーバーの起動に成功すれば、こんな表示がFigmaで出てきます。

これで、http://localhost:3845/sse でMCPサーバーが起動するはずです。

MCPサーバーは外部の公開されているサーバーを叩くのかなと思っていましたが、Figmaに関しては自身のローカル端末上にMCPサーバーを立てるんですね。

Claude Codeのインストールと設定

サーバー側の設定が終わったので、次はクライアント側を設定します。クライアントはRoo CodeやVS Codeや色々使えるんですが、今回はClaude Codeを使います。

  1. Claude Codeをインストールする
    こちらのページの手順に従って、npmを使ってClaude Codeをインストールします。

  2. Claude Codeの起動
    以下のコマンドでClaude Codeを起動します。

claude
  1. 課金と認証
    こちらも課金が必要になるので、ProやMaxプランを登録するか、トークンを購入します。

Proが3,000円、Maxが20,000円、トークンは最低800円程度といった感じです。まずは試してみるという目的だったので、自分はトークンだけ単発で購入しました。Figma MCPを試すだけなら単発のトークンで十分です。

  1. Claude CodeにMCPサーバーを登録する
    以下のコマンドを実行して、Claude Codeにローカルで起動したFigma MCPサーバーを登録することができます。
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
  1. MCPサーバーに接続できるか確認する
    この時点で、Claude CodeからMCPサーバーを呼び出すことができるようになっているはずです。ただ、自分はWSLの環境で実行していたので、127.0.0.1を指定するとエラーが出る環境でした。また、WindowsでWSLからホストOSに通信する場合は、ホストOSでファイアウォール設定をして3845ポートを許可する必要もあるので忘れずに。

もしも「なんかうまくいかない・・・」とかがあれば以下のコマンドをClaude Codeを実行している環境から打って、接続がうまくいくか試しましょう。

curl http://<MCPサーバのIP>:3845/sse

Claude CodeからMCPサーバーを呼び出す

  1. Figma desktopにて自身のプロジェクトのセクションのリンクを取得する
    MCPサーバーに、「どのデザインを参照するか」を判別させるために、Figmaでデザインされた各プロジェクトに割り当てられているIDを渡す必要があります。

このID情報は、以下のようにリンクを生成するとその中に入っているみたいです。

今回の対象は以下のセクションなので、このセクションを選択して右クリックすると上記のようにリンクをコピーできます。

  1. Claude Codeに仕事を頼んで祈る
claude
MCPサーバに接続し、<上記で生成したノードIDを含むURL>のノードのデザインを再現するコードをtest_figma/に実装して。


しばらく待つとタスクが完了します。

結果

元のFigmaデザイン

実装されたもの

Figmaのデザイン自体がまだ下書きですが、雰囲気はつかんでくれてます。
もちろん完全に思った通りのものが出てくるとは思ってませんでしたが、あとは自分の試行回数と命名とかでより精度が高いものができるんじゃないでしょうか。

多分しばらくはFigma MCPにお世話になりそうです。

Discussion