Figma MCP インストール＆設定手順

https://github.com/modelcontextprotocol

🛠️ インストール＆設定手順（Macの場合）

1. Node.js と uv のインストール

brew install uv

2. fetch MCP サーバーの起動

uvx mcp-server-fetch

3. Claude の設定ファイルを編集

Claude デスクトップアプリ → 「設定 > 開発者 > 設定を編集」をクリックし、以下を追加

json

{
  "mcpServers": {
    "fetch": {
      "command": "uvx",
      "args": ["mcp-server-fetch"]
    }
  }
}

※ fetch サーバーは、Claude がウェブページや Figma の内容を取得するために必要です。

4. Claude アプリを再起動

Command + Q で完全に終了し、再度起動します。

Figma トークンの取得方法

Figma → 「設定 > セキュリティー」からトークンを発行

Figma リンクのコピー方法

デザイン

MCP

所感

コード生成のスピードは確かに圧倒的に速い。
多少デザインが変わっても問題ない場合は、かなり効率的な方法だと感じた。
ただし、これはあくまで 「デザイン的なこだわりがあまりない場合」 に限った話。

コンポーネントを細かく分解して、デザインとぴったり合わせようとし始めると、
逆に手間が増えるケースもある。
個人的には 「高速で生成されたけど、洗練されていないコード」 という印象が強く残った。

とはいえ、特によかったのは、テキストを自動で移してくれる機能。
シンプルだけど、毎回面倒に感じていた作業を自動化してくれるのは本当にありがたい。
個人的にはこの機能だけでも使う価値があると感じた。

さらに figma to html を併用すれば、
ベースとなる構造を素早く作って、細かい部分だけ調整するようなワークフローが実現でき、
デザインと開発のギャップを縮めるのにも役立ちそう。
これは実際に導入しながら試していきたい。