anima-webhooks-events

name	anima-webhooks-events
description	Use Figma webhooks to trigger automatic Anima code generation on design changes. Use when building event-driven design-to-code pipelines, auto-generating components when Figma files change, or integrating design updates into CI. Trigger: "anima webhook", "figma webhook", "anima auto-generate on change".
allowed-tools	Read, Write, Edit, Bash(curl:*)
version	1.0.0
license	MIT
author	Jeremy Longshore <[e-mail]>
tags	["saas","design","figma","anima","webhooks"]
compatible-with	claude-code

Anima Webhooks & Events

Overview

Anima doesn't have its own webhooks, but you can use Figma Webhooks (v2 API) to detect design changes and trigger Anima code generation automatically. This creates an event-driven design-to-code pipeline.

Instructions

Step 1: Register Figma Webhook

# Figma Webhooks API (requires team-level access)
curl -X POST "https://api.figma.com/v2/webhooks" \
  -H "X-Figma-Token: ${FIGMA_TOKEN}" \
  -H "Content-Type: application/json" \
  -d '{
    "event_type": "FILE_VERSION_UPDATE",
    "team_id": "YOUR_TEAM_ID",
    "endpoint": "https://your-server.com/webhooks/figma",
    "passcode": "your-webhook-secret",
    "description": "Trigger Anima code generation on design changes"
  }'

Step 2: Webhook Handler

// src/webhooks/figma-handler.ts
import express from 'express';
import { Anima } from '@animaapp/anima-sdk';

const router = express.Router();
const anima = new Anima({ auth: { token: process.env.ANIMA_TOKEN! } });

interface FigmaWebhookEvent {
  event_type: 'FILE_VERSION_UPDATE' | 'FILE_UPDATE' | 'FILE_DELETE';
  file_key: string;
  file_name: string;
  triggered_by: { id: string; handle: string };
  : ;
  : ;
}

router.(, express.(),  (req, res) => {
   event = req.  ;

  
   (event. !== process..) {
     res.().({ :  });
  }

  
   (event. !== ) {
     res.().({ :  });
  }

  .();

  
  (event.).(.);
  res.().({ :  });
});

  () {
    = [, , ]; 

   ( nodeId  ) {
     {
       { files } =  anima.({
        fileKey,
        : process..!,
        : [nodeId],
        : { : , : , :  },
      });
      .();
        ( (r, )); 
    }  (err) {
      .(, err);
    }
  }
}

  router;