---
name: downloading-figma-assets
description: Downloads images, icons, and SVGs from Figma designs. Use when extracting visual assets from Figma for implementation.
---
# Figmaアセットダウンロード
FigmaデザインからPNG画像、SVGアイコン、その他のビジュアルアセットを抽出・ダウンロードする手順。
## 目次
- [Workflow](#workflow)
- [前提条件](#前提条件)
- [方法1: MCP経由でアセットURL取得（推奨）](#方法1-mcp経由でアセットurl取得推奨)
- [方法2: Figma API経由でSVGエクスポート](#方法2-figma-api経由でsvgエクスポート)
- [方法3: スクリーンショットスクリプト](#方法3-スクリーンショットスクリプト)
- [SVGの後処理](#svgの後処理)
- [よくあるアセットタイプ](#よくあるアセットタイプ)
- [トラブルシューティング](#トラブルシューティング)
## Workflow
Copy this checklist:
```
Asset Download Progress:
- [ ] Step 1: アセットタイプを特定
- [ ] Step 2: 取得方法を選択
- [ ] Step 3: アセットをダウンロード
- [ ] Step 4: SVG後処理（必要な場合）
- [ ] Step 5: 出力を確認
```
**Step 1: アセットタイプを特定**
| タイプ | 推奨方法 |
|--------|----------|
| アイコン（SVG）※HTMLに`data-figma-icon-svg`あり | Figma API（方法2）★優先 |
| アイコン（SVG）※`data-figma-asset-url`あり | MCP経由（方法1） |
| 写真・画像 | MCP経由（方法1） |
| イラスト | Figma API（方法2） |
| スクリーンショット | スクリプト（方法3） |
> **⚠️ 重要**: `data-figma-icon-svg` には親ノードIDが指定されている場合があります。
> 複数のSVGパーツを1つのアイコンとしてダウンロードするため、Figma APIでの取得を優先してください。
**Step 2: 取得方法を選択**
- **方法2（優先）**: Figma API - `data-figma-icon-svg`属性がある場合
- **方法1**: MCP経由 - `data-figma-asset-url`属性がある場合
- **方法3**: スクリーンショット - 特定ビューが必要な場合
**Step 3-5**: 選択した方法のセクションに従って実行
If SVG icons appear white on white background, proceed to [SVGの後処理](#svgの後処理).
## 前提条件
- Figma MCP接続が有効
- FIGMA_TOKEN（API経由でエクスポートする場合）
## 方法1: MCP経由でアセットURL取得（推奨）
### Step 1: デザインコンテキスト取得
```bash
mcp__figma__get_design_context(fileKey, nodeId, clientLanguages="html,css")
```
### Step 2: アセットURLの抽出
レスポンスから `https://www.figma.com/api/mcp/asset/` で始まるURLを抽出：
```javascript
// レスポンス例
const imgHome = "https://www.figma.com/api/mcp/asset/4e601326-51bf-43b1-aa59-a0273109c3db";
const imgNotification = "https://www.figma.com/api/mcp/asset/d10837ed-2c6c-4dcd-96c4-b0b9e39efb79";
```
### Step 3: ダウンロードスクリプト
```javascript
const https = require('https');
const fs = require('fs');
const path = require('path');
const assets = {
'icon-name': 'https://www.figma.com/api/mcp/asset/xxxxx',
// 他のアセット
};
const outDir = './icons';
function download(name, url) {
return new Promise((resolve, reject) => {
const file = fs.createWriteStream(path.join(outDir, name + '.svg'));
https.get(url, (res) => {
if (res.statusCode === 302 || res.statusCode === 301) {
download(name, res.headers.location).then(resolve).catch(reject);
return;
}
res.pipe(file);
file.on('finish', () => { file.close(); resolve(); });
}).on('error', reject);
});
}
async function main() {
fs.mkdirSync(outDir, { recursive: true });
for (const [name, url] of Object.entries(assets)) {
await download(name, url);
console.log('Downloaded:', name);
}
}
main();
```
**注意**: MCPアセットURLは実際にはSVG形式で返されることが多い（拡張子に関わらず）。
## 方法2: Figma API経由でSVGエクスポート（★アイコン推奨）
> **この方法を優先する理由**:
> - `data-figma-icon-svg` には**親ノードID**が指定されている場合がある
> - 親ノードを指定することで、複数のSVGパーツを1つのアイコンとして取得可能
> - Figma APIは指定ノード配下の全要素を含むSVGを返す
### Step 1: ノードIDの特定
**HTMLから抽出する場合（推奨）:**
HTMLの `data-figma-icon-svg` 属性にはノードIDが格納されている：
```html
```
```bash
# HTMLからノードIDを抽出
grep -oP 'data-figma-icon-svg="\K[^"]+' dashboard.html | sort -u
# 出力: 3428:18627, 491:2101, 2348:3191, ...
```
**Figma MCPから取得する場合:**
```bash
mcp__figma__get_metadata(fileKey, nodeId)
```
### Step 2: SVGエクスポートAPI呼び出し
```javascript
const https = require('https');
const TOKEN = process.env.FIGMA_TOKEN;
const FILE_KEY = 'your-file-key';
const NODE_IDS = '123:456,789:012'; // カンマ区切り
const url = `https://api.figma.com/v1/images/${FILE_KEY}?ids=${encodeURIComponent(NODE_IDS)}&format=svg`;
https.get(url, { headers: { 'X-Figma-Token': TOKEN } }, (res) => {
let data = '';
res.on('data', chunk => data += chunk);
res.on('end', () => {
const response = JSON.parse(data);
console.log(response.images);
// { "123:456": "https://...", "789:012": "https://..." }
});
});
```
**注意**: インスタンスノードやラスター画像を含むノードは`null`が返される場合がある。
## 方法3: スクリーンショットスクリプト
`~/.agents/scripts/html-screenshot/figma-screenshot.js` を使用：
```bash
node figma-screenshot.js --file-key=xxx --node-id=123:456 --token=$FIGMA_TOKEN output.png
```
## SVGの後処理
Figmaからエクスポートされたアイコンには複数の問題が含まれることがある。
### 問題1: アスペクト比の崩れ（⚠️ 重要）
**症状**: アイコンが引き伸ばされて歪む
**原因**: Figma APIが以下の属性を含むSVGを返す：
```xml