--- 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 <\/span>

<\/div> ``` ```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