Інтеграція Figma API з сайтом

Інтеграція Figma API з веб-сайтом

Figma API використовується для автоматизації дизайн-процесів: генерування токенів стилів прямо з Figma-файлів, експорту ассетів, синхронізації компонентів дизайн-системи з кодом. Актуально для команд, де дизайн та код мають залишатися синхронізованими.

Аутентифікація

const FIGMA_TOKEN = process.env.FIGMA_ACCESS_TOKEN;

async function figmaRequest(path: string): Promise<any> {
  const resp = await fetch(`https://api.figma.com/v1${path}`, {
    headers: { 'X-Figma-Token': FIGMA_TOKEN! },
  });
  return resp.json();
}

Експорт ассетів з Figma

async function exportAssets(fileKey: string, nodeIds: string[]): Promise<Record<string, string>> {
  // Отримуємо URL для експорту
  const resp = await figmaRequest(
    `/images/${fileKey}?ids=${nodeIds.join(',')}&format=svg&svg_simplify_stroke=true`
  );

  const urls: Record<string, string> = resp.images;

  // Скачуємо та зберігаємо
  for (const [nodeId, url] of Object.entries(urls)) {
    const svgContent = await fetch(url).then(r => r.text());
    const filename   = nodeId.replace(':', '-');
    fs.writeFileSync(`./assets/icons/${filename}.svg`, svgContent);
  }

  return urls;
}

Вилучення дизайн-токенів

async function extractDesignTokens(fileKey: string): Promise<DesignTokens> {
  const file = await figmaRequest(`/files/${fileKey}`);

  const tokens: DesignTokens = { colors: {}, typography: {}, spacing: {} };

  // Кольори зі стилів
  const styles = await figmaRequest(`/files/${fileKey}/styles`);
  for (const style of styles.meta.styles) {
    if (style.style_type === 'FILL') {
      const node = await figmaRequest(`/files/${fileKey}/nodes?ids=${style.node_id}`);
      const fill = node.nodes[style.node_id].document.fills[0];
      if (fill.type === 'SOLID') {
        tokens.colors[style.name] = rgbToHex(fill.color);
      }
    }
  }

  return tokens;
}

function rgbToHex({ r, g, b }: {r: number, g: number, b: number}): string {
  const toHex = (v: number) => Math.round(v * 255).toString(16).padStart(2, '0');
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}

Генерування CSS-змінних з токенів

function tokensToCSS(tokens: DesignTokens): string {
  const vars = Object.entries(tokens.colors)
    .map(([name, value]) => `  --color-${name.toLowerCase().replace(/\s+/g, '-')}: ${value};`)
    .join('\n');

  return `:root {\n${vars}\n}`;
}

Автоматизація через GitHub Actions

# .github/workflows/sync-tokens.yml
name: Sync Figma Tokens
on:
  schedule:
    - cron: '0 9 * * 1'  # кожного понеділка о 9:00
  workflow_dispatch:

jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: node scripts/sync-figma-tokens.js
        env:
          FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}
      - name: Commit updated tokens
        run: |
          git add src/styles/tokens.css
          git commit -m "chore: sync design tokens from Figma" || exit 0
          git push

Графік

Скрипт синхронізації дизайн-токенів з Figma: 2–3 робочих дні. Повна автоматизація з GitHub Actions: +1 день.