| name | figma-import |
| description | Figma Dev Mode MCP サーバーからデザインを取り込むときに使用する。アセット参照のルール、アイコンパッケージ追加禁止、プレースホルダー禁止などの注意事項を定義する。 |
Figma デザイン取り込みガイド
Figma Dev Mode MCP サーバーは、画像や SVG アセットを提供するアセットエンドポイントを提供する。
重要な注意事項
ローカルホストソースをそのまま使う
Figma Dev Mode MCP サーバーが画像または SVG のローカルホストソースを返す場合、その画像または SVG ソースを直接使用すること。別の保存場所にコピーしたり、別のパスに変換したりしてはならない。
アイコンパッケージを追加しない
新しいアイコンパッケージをインポート / 追加してはならない。すべてのアセットは Figma ペイロードに含まれている必要がある。
例:
- ❌
npm install lucide-react のような新規アイコンパッケージの追加
- ✅ Figma から提供される SVG をそのまま使う
プレースホルダーを使わない
ローカルホストソースが提供されている場合、プレースホルダーを使用または作成してはならない。
例:
- ❌
<div className="bg-gray-200">画像</div> のようなプレースホルダー
- ✅ Figma が返した実際のローカルホストソースを
<img src="..."> で利用
利用するMCP
figma-desktop MCP(.mcp.json で定義済み)
mcp__figma-desktop__get_design_context でデザインを取得
mcp__figma-desktop__get_screenshot でスクリーンショットを取得
mcp__figma-desktop__get_metadata でメタデータを取得