Figma Policy & Guardrails

Overview

Automated policy enforcement and guardrails for Figma integrations.

Prerequisites

• ESLint configured in project
• Pre-commit hooks infrastructure
• CI/CD pipeline with policy checks
• TypeScript for type enforcement

ESLint Rules

Custom Figma Plugin

// eslint-plugin-figma/rules/no-hardcoded-keys.js
module.exports = {
  meta: {
    type: 'problem',
    docs: {
      description: 'Disallow hardcoded Figma API keys',
    },
    fixable: 'code',
  },
  create(context) {
    return {
      Literal(node) {
        if (typeof node.value === 'string') {
          if (node.value.match(/^sk_(live|test)_[a-zA-Z0-9]{24,}/)) {
            context.report({
              node,
              message: 'Hardcoded Figma API key detected',
            });
          }
        }
      },
    };
  },
};

ESLint Configuration

// .eslintrc.js
module.exports = {
  plugins: ['figma'],
  rules: {
    'figma/no-hardcoded-keys': 'error',
    'figma/require-error-handling': 'warn',
    'figma/use-typed-client': 'warn',
  },
};

Pre-Commit Hooks

# .pre-commit-config.yaml
repos:
  - repo: local
    hooks:
      - id: figma-secrets-check
        name: Check for Figma secrets
        entry: bash -c 'git diff --cached --name-only | xargs grep -l "sk_live_" && exit 1 || exit 0'
        language: system
        pass_filenames: false

      - id: figma-config-validate
        name: Validate Figma configuration
        entry: node scripts/validate-figma-config.js
        language: node
        files: '\.figma\.json$'

TypeScript Strict Patterns

// Enforce typed configuration
interface FigmaStrictConfig {
  apiKey: string;  // Required
  environment: 'development' | 'staging' | 'production';  // Enum
  timeout: number;  // Required number, not optional
  retries: number;
}

// Disallow any in Figma code
// @ts-expect-error - Using any is forbidden
const client = new Client({ apiKey: any });

// Prefer this
const client = new FigmaClient(config satisfies FigmaStrictConfig);

Architecture Decision Records

ADR Template

# ADR-001: Figma Client Initialization

## Status
Accepted

## Context
We need to decide how to initialize the Figma client across our application.

## Decision
We will use the singleton pattern with lazy initialization.

## Consequences
- Pro: Single client instance, connection reuse
- Pro: Easy to mock in tests
- Con: Global state requires careful lifecycle management

## Enforcement
- ESLint rule: figma/use-singleton-client
- CI check: grep for "new FigmaClient(" outside allowed files

Policy-as-Code (OPA)

# figma-policy.rego
package figma

# Deny production API keys in non-production environments
deny[msg] {
  input.environment != "production"
  startswith(input.apiKey, "sk_live_")
  msg := "Production API keys not allowed in non-production environment"
}

# Require minimum timeout
deny[msg] {
  input.timeout < 10000
  msg := sprintf("Timeout too low: %d < 10000ms minimum", [input.timeout])
}

# Require retry configuration
deny[msg] {
  not input.retries
  msg := "Retry configuration is required"
}

CI Policy Checks

# .github/workflows/figma-policy.yml
name: Figma Policy Check

on: [push, pull_request]

jobs:
  policy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Check for hardcoded secrets
        run: |
          if grep -rE "sk_(live|test)_[a-zA-Z0-9]{24,}" --include="*.ts" --include="*.js" .; then
            echo "ERROR: Hardcoded Figma keys found"
            exit 1
          fi

      - name: Validate configuration schema
        run: |
          npx ajv validate -s figma-config.schema.json -d config/figma/*.json

      - name: Run ESLint Figma rules
        run: npx eslint --plugin figma --rule 'figma/no-hardcoded-keys: error' src/

Runtime Guardrails

// Prevent dangerous operations in production
const BLOCKED_IN_PROD = ['deleteAll', 'resetData', 'migrateDown'];

function guardFigmaOperation(operation: string): void {
  const isProd = process.env.NODE_ENV === 'production';

  if (isProd && BLOCKED_IN_PROD.includes(operation)) {
    throw new Error(`Operation '${operation}' blocked in production`);
  }
}

// Rate limit protection
function guardRateLimits(requestsInWindow: number): void {
  const limit = parseInt(process.env.FIGMA_RATE_LIMIT || '100');

  if (requestsInWindow > limit * 0.9) {
    console.warn('Approaching Figma rate limit');
  }

  if (requestsInWindow >= limit) {
    throw new Error('Figma rate limit exceeded - request blocked');
  }
}

Instructions

Step 1: Create ESLint Rules

Implement custom lint rules for Figma patterns.

Step 2: Configure Pre-Commit Hooks

Set up hooks to catch issues before commit.

Step 3: Add CI Policy Checks

Implement policy-as-code in CI pipeline.

Step 4: Enable Runtime Guardrails

Add production safeguards for dangerous operations.

Output

• ESLint plugin with Figma rules
• Pre-commit hooks blocking secrets
• CI policy checks passing
• Runtime guardrails active

Error Handling

Examples

Quick ESLint Check

npx eslint --plugin figma --rule 'figma/no-hardcoded-keys: error' src/

Resources

• ESLint Plugin Development
• Pre-commit Framework
• Open Policy Agent

Next Steps

For architecture blueprints, see figma-architecture-variants.