Figma Desktop と Claude Code を連携する

Figma Dev Mode MCP Serverとは何か

この連携の核となるのが、Figmaが提供する「Dev Mode MCP Server」という機能だ。MCPは "Multi-purpose Code-generation Platform" の略で、その名の通り、多様なコード生成のためのプラットフォームとして機能する

具体的には、Figmaのデスクトップアプリ内でローカルサーバーを起動し、デザインデータをAIエージェント（この場合はClaude Code）にストリーミングで提供する仕組み。

これにより、AIはFigmaのデザイン構造、例えばレイヤー、コンポーネント、Auto Layoutの設定、デザイントークンなどをリアルタイムで理解し、それを基にコードを生成することが可能になる。

これまでの画像やスクリーンショットをAIに渡す方法とは、情報の解像度が全く違う。デザインの意図を汲み取り、再利用可能なコンポーネントとしてコード化したり、デザインシステムで定義されたトークンを適用したりと、より高度で文脈に沿ったコード生成が実現する

設定は驚くほど簡単。いくつかのステップを踏むだけで、未来の開発環境が手に入る。

まず、この機能はFigmaのデスクトップアプリでのみ利用可能。ブラウザ版では使えないので注意が必要だ。

Figmaのデスクトップアプリを開き、Figmaのデスクトップアプリの左上のアイコンから、基本設定を押し、「Dev Mode MCP サーバーを有効にする」にする

これで、Figma側でローカルサーバーが起動し、Claude Codeからの接続を待ち受ける状態になる

デスクトップアプリを通すので、Figma のトークンを発行する必要はない

次に、ターミナルを開き、Claude Codeに対して、先ほど起動したFigmaのサーバーを認識させるためのコマンドを実行する。

このコマンドは、以下の内容をClaude Codeに設定している。

一度この設定をすれば、再度実行する必要はない。

設定が完了すれば、あとはデザインからコードを生成するだけ。

Figmaで、コード化したいコンポーネントやフレームを選択する。
右クリックメニューから Copy as > Copy link to selection を選択する。（または、⌘L のショートカットキーでも良い）
Claude Codeのプロンプトに、コピーしたリンクを貼り付け、どのようなコードを生成したいかを指示する。

例えば、以下のようなプロンプトが考えられる。

これだけで、Claude CodeはFigmaのローカルサーバーと通信し、デザイン構造を理解した上で、精度の高いコードを生成してくれる。

この連携は、様々な場面でその力を発揮する。

単一コンポーネントの生成 ボタンやカード、入力フォームといった基本的なUI要素を、一瞬でコードに変換する。
セクション単位の生成 ヘッダーやフッター、記事一覧セクションなど、複数のコンポーネントから構成される部分もまとめてコード化できる。
レスポンシブデザインのコード化 Figma上でAuto Layoutを駆使してレスポンシブなデザインを作成しておけば、その意図を汲み取ったメディアクエリを含むCSSを生成することも可能だ。

魔法のような機能だが、その効果を最大限に引き出すには、いくつかのコツがある。

Auto Layoutの徹底 マージンやパディング、要素間の距離をAuto Layoutで定義しておくことで、CSSのFlexboxやGridを使った、よりモダンで堅牢なレイアウトコードが生成されやすくなる。
コンポーネント化 デザインをコンポーネントとして整理しておくことで、生成されるコードも再利用性の高いコンポーネント形式になる。
適切なレイヤー名 レイヤー名がそのまま変数名やコンポーネント名に影響することがある。意味の通る命名を心がけることが、結果的にコードの可読性を高める。

具体的な技術スタックの指定 「Reactで」「VueとTypeScriptで」のように、使用したいフレームワークや言語を明記する。
CSS形式の指定 「Tailwind CSSを使って」「CSS Modules形式で」など、希望するスタイリング方法を伝えることで、よりプロジェクトに合ったコードが得られる。

この連携の利点と注意点を、表にまとめておく

メリット	デメリット
UI実装の圧倒的な高速化	生成されたコードの微調整は必要
デザインとコードの一貫性向上	複雑なビジネスロジックは生成できない
手作業によるコーディングミスの削減	Figmaのレイヤー構造にコードの品質が依存する
開発者はロジックの実装に集中可能	ローカルサーバーを常に起動しておく必要がある
デザイントークンの自動適用	FigmaのDev Modeが有料プランの機能である点

FigmaのDev Mode自体は、有料プラン（Standard, Professional, Organization）の機能となっている。また、Claude Codeの利用にも別途料金が必要になる点は留意すべきだ。しかし、その投資に見合うだけの生産性向上は期待できるはず。

非常に柔軟性が高い。プロンプトで指示すれば、React, Vue, Svelte, Solid.jsといった主要なフロントエンドフレームワークに対応したコードを生成できる。HTMLとCSSだけのシンプルな出力ももちろん可能だ。

通信は自分のPC内のローカル環境（127.0.0.1）で完結している。そのため、デザインデータがインターネットを経由して外部に送信されることはなく、セキュリティ上のリスクは低いと言える

設計と実装の境界線が、今まさに溶け出している。FigmaとAIの連携は、その象徴的な出来事だ。個人開発者こそ、こうした最先端のワークフローを積極的に取り入れ、大手企業やチーム開発と同じ、あるいはそれ以上のスピードでプロダクトを世に送り出すべき

ツールに「使われる」のではなく、ツールを「使いこなす」。それが、これからの時代の開発者にとって、新しい価値創造の源泉となる。この連携は、そのための大きな一歩になるはず