Figma API integration with website

Integrating Figma API with Website

Figma API is used to automate design processes: generating style tokens directly from Figma files, exporting assets, synchronizing design system components with code. Relevant for teams where design and code must stay synchronized.

Authentication

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

Exporting Assets from Figma

async function exportAssets(fileKey: string, nodeIds: string[]): Promise<Record<string, string>> {
  // Get export URLs
  const resp = await figmaRequest(
    `/images/${fileKey}?ids=${nodeIds.join(',')}&format=svg&svg_simplify_stroke=true`
  );

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

  // Download and save
  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;
}

Extracting Design Tokens

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

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

  // Colors from styles
  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)}`;
}

Generating CSS Variables from Tokens

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}`;
}

Automation via GitHub Actions

# .github/workflows/sync-tokens.yml
name: Sync Figma Tokens
on:
  schedule:
    - cron: '0 9 * * 1'  # every Monday at 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

Timeline

Design token synchronization script from Figma: 2–3 business days. Full automation with GitHub Actions: +1 day.