FigmaMCPを触ってみる
この記事の目次
はじめに
今話題のMCPですが、WebデザインやUIデザイン向けツールのFigmaでもMCPが公開されました。
本記事では、下記をメイン書いています
- FigmaMCPを利用できるまで
- 簡単チュートリアル
MCPとは
AIモデルと外部サービス（システム）を連携するための「共通ルール（プロトコル）」です。
各社がこのルールに沿った「AI専用コントローラー（MCPサーバー）」を提供し、AIアプリ開発者（MCPクライアント）はそれを呼び出すだけで各種サービスと連携可能になります。
これにより、様々なサービスをAIエージェントで操作できるようになります。
FigmaMCPとは
AI が Figma のデザインデータに直接アクセスし、そのデータを理解・操作することができるようになります。
実際に、Figmaはこの辺りを参照するようです。
- デザイン情報 (色・フォント・サイズ・間隔 etc..)
- コンポーネント間の関係
- Figma内のコメント
この辺りが参照できると今までできなかった下記タスクもAIにお願いできるようになりそうです。
- Figmaのデザインをより忠実に再現
- レスポンシブ対応
- コンポーネント関係の解釈
利用できるまでの作業
本手順は、github copilot でFigmaMCPを導入する手順です。
①個人のアカウントでFigmaのAccount settingsを開く
②トークン発行
security>Personal access tokens>Generate new token
token名を入力 → File content を read-only にする → Generate token
③MCPの設定をvscodeで行う
vscodeの設定用のjsonを修正します。
mcp.servers の中に下記の設定を追記します。
"mcp": {
"inputs": [],
"servers": {
"figma-developer-mcp": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=${③のトークン}",
"--stdio"
]
}
}④vscode の github copilotのエージェントモードを有効にする
vscodeの設定から chat > Agent: Enabled を有効にする
(出てこない場合は、アップデート&再起動をする)
⑤github copilotをエージェントモードに変更する
github copilotのチャットを開き、エージェントモードに変更する
以上です！これで利用できるようになります。
試しにコンポーネントを出力してもらう
①FigmaからフレームのURLを取得します。
該当フレームを選択しながら、右上のシェアボタンを教えて、コピーします。
②実際に書いててもらう
今回はこんなプロンプトで指示してみました
figmaを参照して、カードコンポーネントを作成してください
・外部からプロップスを渡せるようにしてください。
・tailwindで実装してください
・セマンティックなHTMLを心がけてください。
card component:
https://www.figma.com/design/....
気になる出力結果は...
かなり高クオリティーです... !
タグの絶対配置の部分だけ設定されていませんね (出力している感じ、絶対配置はあまり得意でないように見えます)
コードベースで見るとこんな感じです。
プロップスも想定通り渡せるようになっていたり、HTMLタグの使い分けもいい感じにできていて、ほぼ期待通りの実装に見えます。
import type { FC } from 'react';
interface CardProps {
image: string;
tags: string[];
title: string;
description: string;
onClickDetail: () => void;
}
export const Card: FC<CardProps> = ({
image,
tags,
title,
description,
onClickDetail,
}) => {
return (
<article className="flex flex-col bg-white border border-[rgba(17,17,17,0.1)] rounded-2xl overflow-hidden">
<div className="relative aspect-video">
<img
src={image}
alt=""
className="w-full h-full object-cover"
/>
</div>
<div className="flex flex-col justify-between p-6 flex-1">
<div className="space-y-4">
<div className="flex gap-2.5 flex-wrap">
{tags.map((tag, index) => (
<span
key={index}
className="px-4 py-3 text-sm font-bold text-[#111111] border-2 border-[rgba(17,17,17,0.1)] rounded-full"
>
{tag}
</span>
))}
</div>
<div className="space-y-2">
<h3 className="text-lg font-bold text-[#111111] leading-[1.3]">
{title}
</h3>
<p className="text-base text-[#111111] leading-6">
{description}
</p>
</div>
</div>
<button
onClick={onClickDetail}
className="w-full mt-4 px-6 py-4 text-sm font-bold text-[#111111] border-2 border-[rgba(17,17,17,0.1)] rounded-xl"
>
詳しくみる
</button>
</div>
</article>
);
};まとめ
今のところの感想としては、LovableやReplitの各種AIツール や Figma to Codeなどのコード生成系のFigmaプラグイン と比較して、精度がはるかに高いように見えます...！
今回は、FigmaMCPの使い方 + チュートリアルをやってみましたが、次回はもう少し高難易度の出力や、他ツールとの比較とかもやってみようと思います！
※本記事は2025年05月時点の情報です。
