Asset Download Progress:
- [ ] Step 1: アセットタイプを特定
- [ ] Step 2: 取得方法を選択
- [ ] Step 3: アセットをダウンロード
- [ ] Step 4: SVG後処理（必要な場合）
- [ ] Step 5: 出力を確認

mcp__figma__get_design_context(fileKey, nodeId, clientLanguages="html,css")

// レスポンス例
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";

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();

<!-- 単一ノードの例 -->
<span class="icon" data-figma-icon-svg="3428:18627" data-figma-node="3428:18627"></span>

<!-- 親ノードが指定されている例（複数パーツで構成されるアイコン） -->
<div class="icon-container" 
     data-figma-node="2348:3191" 
     data-figma-icon-svg="2348:3191">
  <!-- 内部に複数のSVG要素が含まれる -->
</div>

# HTMLからノードIDを抽出
grep -oP 'data-figma-icon-svg="\K[^"]+' dashboard.html | sort -u
# 出力: 3428:18627, 491:2101, 2348:3191, ...

mcp__figma__get_metadata(fileKey, nodeId)

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://..." }
  });
});

node figma-screenshot.js --file-key=xxx --node-id=123:456 --token=$FIGMA_TOKEN output.png

<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" ...>

cd icons/
for f in *.svg; do
  # preserveAspectRatio="none" を削除
  sed -i '' 's/ preserveAspectRatio="none"//g' "$f"
  # width="100%" height="100%" を viewBox から計算した値に置換
  # 例: viewBox="0 0 20 20" → width="20" height="20"
  sed -i '' 's/ width="100%" height="100%"//g' "$f"
  # overflow と style も削除
  sed -i '' 's/ overflow="visible"//g' "$f"
  sed -i '' 's/ style="display: block;"//g' "$f"
done

<!-- Before (問題あり) -->
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 20 20" ...>

<!-- After (修正後) -->
<svg width="20" height="20" viewBox="0 0 20 20" ...>

cd icons/
for f in *.svg; do
  sed -i '' 's/fill="var(--fill-0, white)"/fill="currentColor"/g' "$f"
done

cd icons/
for f in *.svg; do
  # var(--fill-0, #color) を #color に置換
  sed -i '' 's/fill="var(--fill-0, \([^)]*\))"/fill="\1"/g' "$f"
done

<!-- 親要素のcolorを継承 -->
<span style="color: #0b41a0;">
  <svg>...</svg>
</span>

Circle/Ai (親ノード: 2348:3191) ← data-figma-icon-svg に指定
├── Background (子ノード: 2348:3192)
├── Ellipse (子ノード: 2348:3195)
└── Icon (子ノード: 2348:3196)

project/
└── icons/
    ├── home.svg
    ├── notification.svg
    ├── all-courses.svg
    ├── my-courses.svg
    ├── mypage.svg
    ├── todo-plan.svg
    ├── circle-check.svg
    ├── info.svg
    └── forward.svg