Figma│Web API（REST API）とPlugin APIで取得できるデータと機能まとめ

curl -X GET \
  "https://api.figma.com/v1/files/{FILE_KEY}" \
  -H "X-Figma-Token: ${FIGMA_TOKEN}"
# ポイント:
# - FIGMA_TOKEN は個人アクセストークン
# - 応答にはファイル名、最終更新日時、thumbnailUrl、ドキュメントツリーなどが含まれる

// 実行前に process.env.FIGMA_TOKEN と FILE_KEY を設定
const res = await fetch(`https://api.figma.com/v1/files/${FILE_KEY}`, {
  headers: { 'X-Figma-Token': process.env.FIGMA_TOKEN }
});
const data = await res.json();
console.log({
  name: data.name,
  lastModified: data.lastModified,
  thumbnailUrl: data.thumbnailUrl
});
// 注意: thumbnailUrl は恒久的。ノード画像URLは一時的（後述）

// 現在開いているファイル名や fileKey は取得可
console.log('file name:', figma.root.name);
console.log('file key:', figma.fileKey);
// 注意: ファイルの最終更新やバージョン一覧、サムネイルURLは Plugin API からは直接取得不可

curl -X GET \
  "https://api.figma.com/v1/files/{FILE_KEY}/comments" \
  -H "X-Figma-Token: ${FIGMA_TOKEN}"
# 返却: comments[]（id, message, created_at, user など）

curl -X POST "https://api.figma.com/v1/files/{FILE_KEY}/comments" \
  -H "X-Figma-Token: ${FIGMA_TOKEN}" \
  -H "Content-Type: application/json" \
  -d '{
    "message": "このボタンの角丸を+4pxに",
    "client_meta": { "x": 120, "y": 300 }  // キャンバス座標にピン留め
  }'
# 注意: 座標はページ／ズームに依存。client_meta 省略も可

curl -X DELETE \
  "https://api.figma.com/v1/comments/{COMMENT_ID}" \
  -H "X-Figma-Token: ${FIGMA_TOKEN}"

// ドキュメントツリー（巨大JSON）からページやレイヤーを走査
const res = await fetch(`https://api.figma.com/v1/files/${FILE_KEY}`, {
  headers: { 'X-Figma-Token': process.env.FIGMA_TOKEN }
});
const { document } = await res.json(); // document.children[] がページ
const pages = document.children.map(p => ({ id: p.id, name: p.name, type: p.type }));
console.log(pages);
// 注意: RESTは読み取り専用。編集は不可

// ページ列挙
for (const page of figma.root.children) {
  console.log('page:', page.name, page.id);
}

// ノード取得と編集（最小例）
const rect = figma.createRectangle();
rect.name = '生成した四角形';
rect.resize(200, 100);
rect.fills = [{ type: 'SOLID', color: { r: 0.2, g: 0.6, b: 1 } }];
figma.currentPage.appendChild(rect);

// 選択ノードの基本プロパティ参照
const sel = figma.currentPage.selection[0];
if (sel) {
  console.log(sel.name, sel.width, sel.height, sel.type);
}

# ファイル内スタイル一覧（色/文字/効果/グリッド）
curl -X GET \
  "https://api.figma.com/v1/files/{FILE_KEY}/styles" \
  -H "X-Figma-Token: ${FIGMA_TOKEN}"
# 返却: styles[]（style_key, name, style_typeなど）

# コンポーネント一覧
curl -X GET \
  "https://api.figma.com/v1/files/{FILE_KEY}/components" \
  -H "X-Figma-Token: ${FIGMA_TOKEN}"

// ローカル（当該ファイル）に存在するスタイル
const paints = figma.getLocalPaintStyles();
paints.forEach(s => console.log('paint style:', s.name, s.id));

// ローカルコンポーネント一覧
const comps = figma.getLocalComponents();
comps.forEach(c => console.log('component:', c.name, c.key));

// ライブラリ（別ファイル）のコンポーネントをキー指定でインポート
const comp = await figma.importComponentByKeyAsync('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
const inst = comp.createInstance();
figma.currentPage.appendChild(inst);
// 注意: ライブラリ公開＆権限が必要。キーは REST/DevMode/検査から取得可

# ids=ノードID（カンマ区切り可）、format=png/svg/jpg、scale=倍率
curl -X GET \
  "https://api.figma.com/v1/images/{FILE_KEY}?ids=12:34,56:78&format=png&scale=2" \
  -H "X-Figma-Token: ${FIGMA_TOKEN}"

# 応答例:
# { "images": { "12:34": "https://figma-alpha.imgix.net/....", "56:78": "..." } }
# 注意: このURLは短期有効（数分）。長期保存は自前でダウンロード→保管が必要

// 任意ノードをPNG書き出し（Uint8Array）
const node = figma.currentPage.selection[0];
if (node) {
  const bytes = await node.exportAsync({ format: 'PNG', constraint: { type: 'SCALE', value: 2 } });
  // 例: UI側へ転送してダウンロードさせる
  figma.ui.postMessage({ type: 'exported', bytes: Array.from(bytes) });
}
// 注意: Pluginは「外部からアクセスできるURL」は返さない。必要なら自前でアップロード

// 利用可能フォント一覧（ユーザーの環境＋Figmaフォントサービス）
const fonts = await figma.listAvailableFontsAsync();
console.log('font count:', fonts.length);

// テキスト編集には必ず loadFontAsync が必要
await figma.loadFontAsync({ family: 'Inter', style: 'Regular' });
const text = figma.createText();
text.characters = 'こんにちは、Figma！';

// code.ts
figma.showUI(__html__, { width: 360, height: 280 });
figma.ui.onmessage = (msg) => {
  if (msg.type === 'ping') figma.ui.postMessage({ type: 'pong' });
};

// ui.html（抜粋）
/*
<script>
  parent.postMessage({ pluginMessage: { type: 'ping' } }, '*');
  onmessage = (e) => {
    if (e.data.pluginMessage?.type === 'pong') console.log('PONG!');
  };
</script>
*/

// 動的読み込み下での安全なアクセス例（概念的）
for (const page of figma.root.children) {
  await figma.loadFontAsync({ family: 'Inter', style: 'Regular' }).catch(() => {});
  // 必要な処理だけを行い、保持オブジェクトを増やしすぎない
}