Figma API インテグレーション

Figma の API を使用してデザインデータを抽出し、コンポーネントからコードを生成し、デザインワークフローを自動化します。

クイックスタート

認証

const FIGMA_TOKEN = process.env.FIGMA_TOKEN;

const headers = {
  'X-Figma-Token': FIGMA_TOKEN
};

// ファイルを取得
const response = await fetch(
  `https://api.figma.com/v1/files/${FILE_KEY}`,
  { headers }
);

ファイルキーとノード ID

// Figma URL から抽出: figma.com/file/FILE_KEY/Name?node-id=NODE_ID
const figmaUrl = 'https://www.figma.com/file/abc123/MyDesign?node-id=1%3A2';
const fileKey = figmaUrl.match(/file\/([^/]+)/)?.[1];  // abc123
const nodeId = new URL(figmaU

...