デザインカンプを見ながら、CSSの数値を目で拾って書き写す——フロントエンド開発のその作業、もう終わりにできるかもしれない。Figma MCPを設定すると、ClaudeなどのAIがFigmaのデザインファイルを直接「読める」ようになり、選択したフレームからそのままコードを起こせる。
昨日のBlender MCPに続く、MCP実践ガイドの第2弾。今回はFigma公式のMCP連携を、セットアップから「最初の一言」まで案内する。2026年2月からは双方向——コードからFigmaへ書き戻す方向まで公式対応した。
何ができるのか——「スクショ貼り」からの卒業
これまでAIにデザインを伝える方法は、実質スクリーンショットだった。見た目は伝わっても、余白の正確な数値、色の変数名、コンポーネントの構造は落ちる。Figma MCPはここが違う。AIが受け取るのは画像ではなく、コンポーネント階層・デザイントークン・制約条件つきの構造データだ。
- デザイン→コード: フレームのリンクを渡して「これを実装して」。変数やAuto Layoutを反映したコードが返る。
- コード→デザイン: 動いているWebページをFigmaへ編集可能なレイヤーとして送り返せる(2026年2月〜)。
- 設定の近道: Claude Code用のFigmaプラグインを入れれば、MCP設定と定型スキルがセットで付いてくる。
セットアップ——公式プラグインが最短ルート
動作確認は簡単だ。Figmaで適当なフレームを選択し、AI側に「いま選択しているものを説明して」と聞く。レイヤー名やサイズが返ってくれば接続できている。あとは「このフレームをReactで実装して」——ここからが本番になる。
help.figma.com Claude Code and Figma: Set up the MCP server(公式ヘルプ) 導入手順の一次情報。プラグイン経由のセットアップと、読み書きできるデータの範囲が正確に載っている。精度を上げる2つのコツ
試した人たちの報告で共通するコツが2つある。ひとつはデザイン側の整理整頓。Auto Layoutが崩れた「見た目だけ揃っている」ファイルからは、崩れたコードしか出ない。変数(トークン)と部品化がきちんとしたファイルほど、出てくるコードの質が跳ね上がる。AIは、デザインの規律を映す鏡だ。
もうひとつはCode Connectの活用。Figma上の部品と自社コードベースの実コンポーネントを対応付けておく仕組みで、これがあるとAIは「新しいボタンを発明する」のではなく「うちのButtonコンポーネントを使う」コードを書く。既存プロジェクトに組み込むなら、ここまでやって初めて実戦投入になる。
デザイナーとエンジニアの「翻訳作業」が消える日
Figma MCPが削るのは、コーディングそのものではなく、デザインとコードの間にあった翻訳作業だ。数値の書き写し、余白の目測、実装とデザインの差分確認——創造性ゼロなのに時間だけ食う仕事が、構造データの受け渡しに置き換わる。
Claude Codeの基本操作に慣れている人なら、導入は30分もかからない。次の実装タスクで、まずカード1枚から試してみてほしい。目で数値を拾っていた時間が、何に使えるようになるか——それが、この連携の本当の値打ちだ。
出典: Figma公式ヘルプ「Claude Code and Figma」 / Figma Blog「From Claude Code to Figma」(2026年2月) / figma/mcp-server-guide(GitHub)。手順は2026年7月12日時点。
