Webhooks

Get notified when Figma files or GitHub repos change. Connect Layout to Figma's webhook system or your GitHub repository so that every time a designer publishes updates or tokens are committed to code, Layout automatically re-extracts your design system.

How It Works

The flow from designer publish to webhook notification:

Designer publishes changes in Figma

Any file update or team library publish triggers a webhook event from Figma.

Figma sends a webhook event to Layout

The event is posted to your Layout webhook endpoint with a shared passcode for verification.

Layout automatically re-extracts the design system

The webhook is verified and a background re-extraction is triggered for the matching project. A 60-second debounce prevents duplicate runs. A diff of what changed is available in the Studio.

Automatic re-extraction is now active. When Layout receives a FILE_UPDATE or LIBRARY_PUBLISH event, it automatically triggers a background re-extraction for the matching project. A 60-second debounce per project prevents duplicate runs from rapid successive publishes. GitHub push webhooks are also supported for triggering re-extraction on code-driven design token changes.

Setup

Step 1: Configure in Layout

Go to Settings > Webhooks in your organisation dashboard.
Copy the webhook endpoint URL, for example: https://studio.yourdomain.com/api/webhooks/figma
Generate a passcode or enter a custom one.

Step 2: Configure in Figma

Creating webhooks in Figma requires admin access to the team or organisation.

Go to Figma Admin > Webhooks.
Create a new webhook.
Paste your Layout webhook URL as the endpoint.
Enter the same passcode you configured in Layout.
Select the event types to listen for. FILE_UPDATE is the most useful for keeping tokens in sync.

Webhook Events

Layout listens for the following Figma event types:

Event	What Happens
FILE_UPDATE	Triggers automatic background re-extraction for the matching project. A 60-second debounce prevents duplicate runs from rapid successive saves.
LIBRARY_PUBLISH	Triggers automatic background re-extraction when a team library is published. Useful for shared design systems used across multiple files.
GitHub push	Triggers re-extraction when a push to a configured branch is received. Useful when design tokens are managed as code and committed to a repository.

GitHub Webhooks

If your design tokens are managed as code (e.g. CSS custom properties or JSON tokens committed to a repository), you can connect a GitHub webhook to trigger automatic re-extraction when tokens change.

Step 1: Configure in Layout

Go to Settings > Webhooks in your organisation dashboard.
In the GitHub section, enter your GitHub Personal Access Token (PAT).
Set the repository owner, name, and branch to watch (e.g. main).
Copy the GitHub webhook endpoint URL: https://studio.yourdomain.com/api/webhooks/github

Step 2: Configure in GitHub

Go to your repository's Settings > Webhooks.
Click Add webhook.
Paste your Layout GitHub webhook URL as the Payload URL.
Set content type to application/json.
Enter a webhook secret. This is used for HMAC-SHA256 verification of incoming requests.
Under events, select Just the push event.

GitHub webhook payloads are verified using HMAC-SHA256 signatures. The X-Hub-Signature-256 header is checked against your webhook secret on every request. Requests with invalid or missing signatures are rejected. A 60-second debounce per project prevents duplicate re-extractions from rapid successive pushes.

Security

Passcode verification

All incoming webhook requests are verified against the shared passcode. Requests with an invalid or missing passcode are rejected with a 401 response.

Passcode storage

The passcode is never stored in plaintext. It is hashed before being saved to the database.

GitHub HMAC verification

GitHub webhook payloads are verified using HMAC-SHA256 signatures via the X-Hub-Signature-256 header. Invalid signatures are rejected with a 401 response.

HTTPS only

Figma only delivers webhooks to HTTPS endpoints. GitHub strongly recommends HTTPS. Your Layout instance must be served over TLS for webhooks to work.

Tips

Test your webhook setup by making a small change in Figma and publishing. The event should appear in your webhook logs. Then click Re-extract in the Studio to confirm the latest changes are picked up.
If you only want to track one Figma file, scope your webhook to that file's ID in the Figma webhook configuration. This avoids unnecessary notifications from unrelated files.