Figma MCPを利用してみた

こんにちは、なさです。

最近、Figma MCPサーバーが利用できるようになったので、
さっそくFigma Designで作成したデザインをAIエージェントを使って取り込んで貰おうと試してみました。
設定が楽でサクッと利用できましたので、その手順とちょっとした感想を書いてます。

設定と環境

MCPの設定は、VSCodeに設定しました。
AIエージェントは、GitHub Copilotエージェントです。
GitHub Copilotのエージェントモードも最近追加されたので、タイミング的に良いですね！

Figmaの個人APIキー作成

Figmaアカウントの設定から作成が可能です。
作成するとトークンが発行されるので、こちらを控えておく必要があります。

VSCodeの設定

設定から"MCP"と検索し、「settings.jsonで編集」をクリックしてJSONファイルにFigma MCPを記述します。

ファイル＞ユーザー設定＞設定

JSON

"mcp": {
    "inputs": [],
    "servers": {
        "figma-mcp-hogehoge": {  
            "command": "npx",
            "args": ["-y", "figma-developer-mcp", "--stdio"],
            "env": {
                "FIGMA_API_KEY": "figd_XXXXXXX"
            }
        }
    }
}

上記の内容の下記部分を編集して設定すること

• "figma-mcp-hogehoge"には適当に名前
• "figd_XXXXXXX"にはFigmaで生成した個人APIキーのトークン

利用してみる

MCPを起動してGitHub Copilotエージェントにプロンプトを投げます。

"FigmaのURL"のデザインを◯◯画面に適用してください

ここで注意なのは、FigmaのURLはprototypeリンクであることです。
prototypeリンクは、Figma Designのシェアボタンからコピーすることができます。
（最初分からなくて、AIエージェントには「URLを読み取れません」しか回答されずに悩まされていました。。。）

たったこれだけで、AIエージェントが指定URLのデザインを読み取って、指定した画面のCSS等を書き換えてくれます。

感想

• 簡単にデザインを適用できて便利
• プロンプトを細かく指定しないと既存コードを壊されたりすることも（涙）
• 書かれたコードはしっかりリファクタリングしないと（だいたいのAIに言えることですが）

ざっくりですが、感想でした。
もっと色々試してみて引き続き記事を投稿できたらいいなと思います。
最後まで読んでいただきありがとうございました！