Figma CI Integration

Overview

Set up CI/CD pipelines for Figma integrations with automated testing.

Prerequisites

• GitHub repository with Actions enabled
• Figma test API key
• npm/pnpm project configured

Instructions

Step 1: Create GitHub Actions Workflow

Create .github/workflows/figma-integration.yml:

name: Figma Integration Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

env:
  FIGMA_API_KEY: ${{ secrets.FIGMA_API_KEY }}

jobs:
  test:
    runs-on: ubuntu-latest
    env:
      FIGMA_API_KEY: ${{ secrets.FIGMA_API_KEY }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm test -- --coverage
      - run: npm run test:integration

Step 2: Configure Secrets

gh secret set FIGMA_API_KEY --body "sk_test_***"

Step 3: Add Integration Tests

describe('Figma Integration', () => {
  it.skipIf(!process.env.FIGMA_API_KEY)('should connect', async () => {
    const client = getFigmaClient();
    const result = await client.healthCheck();
    expect(result.status).toBe('ok');
  });
});

Output

• Automated test pipeline
• PR checks configured
• Coverage reports uploaded
• Release workflow ready

Error Handling

Examples

Release Workflow

on:
  push:
    tags: ['v*']

jobs:
  release:
    runs-on: ubuntu-latest
    env:
      FIGMA_API_KEY: ${{ secrets.FIGMA_API_KEY_PROD }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - name: Verify Figma production readiness
        run: npm run test:integration
      - run: npm run build
      - run: npm publish

Branch Protection

required_status_checks:
  - "test"
  - "figma-integration"

Resources

• GitHub Actions Documentation
• Figma CI Guide

Next Steps

For deployment patterns, see figma-deploy-integration.