メモです
figma MCPを活用することでFigmaで作成したデザイン（フレーム、コンポーネント等）のレイアウトや色、テキスト、構造をAIが直接理解し、ReactやHTML/CSSなどのコードを自動生成できます。
現在は有料アカウントでないと使用できないようです。(ただ私のFreeのチームでもメニューが表示されているような？)
Figma Desktop版のダウンロード
Figma MCP Serverの有効化
Figmaを起動したら
-
アカウントでログイン(説明割愛)
-
Teamをつくる(割愛)
-
Projectをつくる(割愛)
-
CreateでFileを作る(下記はDesignの例。SiteなどはMCPに対応していないようだ。)
-
左上のFigmaアイコンを選んでPreference > Enable local MCP serverを選択
VSCodeの設定
私はgithub copilotを使っていますが、Claude Code等もほぼ同じなのではないでしょうか？
プラグインメニューからフィルターのところを押すと「MCP Servers」という項目があるので選択
Browse MCP Server押下
ブラウザでMCPの選択画面になるのでFigmaを選択
VisualStudioCodeで開く を選択
Install
歯車マークから「Start Server」を選択。(押さなくても自動でスタートしているかも。)
これで準備完了です。
Github Copilotの場合ツールアイコンを押して、下の方にMCP Server:Figmaが追加されていれば使える状態です。
使ってみる
Figmaのデスクトップアプリを使用して、Figma内のフレームまたはレイヤーを選択します。
クライアントに現在の選択内容の実装をサポートするよう指示します。
Github Copilot側で
「figmaの選択領域の通りにレイアウトを変更してください。」等いうと、きちんと読み込んでくれました。
または
Figmaのフレームまたはレイヤーへのリンクをコピーします。
github copilot側で
https://www.figma.com/design/xxxxx のレイアウトの通りにしてください
等リンクで指示しても大丈夫です。
(実際はcopilotはURLにアクセスしているわけではなく、あくまでローカルのMCPサーバーにアクセスしてフレームの識別子としてURLを利用しているとのこと。)