The Automation Pipeline: Figma to GitHub in Real-Time

This is Part 5 of the The Design-to-Code Loop: 2026 Edition series (7 posts on closing the gap between Figma and production code).

Introduction

Waiting for a designer to "finish" a token change before a developer picks it up is a manual step disguised as a process. The alternative isn't a faster handoff, it's removing the handoff entirely: a pipeline that listens for changes in Figma and automatically opens a pull request with the transformed tokens, no human copy-paste step in between. Call it the Zero-Latency Pipeline: not because nothing takes time, but because no step in it waits on a person remembering to do something.

The Pipeline Architecture

The pipeline breaks into four stages, each owning one job and handing off to the next through a defined interface, not a Slack message.

1. Figma Webhooks: Listening for "Variable Changed" or "Component Updated" events. Figma's webhook API fires on a delay of a few seconds after a publish, not instantly, so "zero-latency" describes the absence of a manual step, not literal real-time propagation.
2. GitHub Action (The Orchestrator): A custom action that fetches the updated Figma variables via the API, authenticated with a scoped personal access token stored as a repository secret, never committed to the codebase.
3. Token Transformer (Style Dictionary): A step that converts raw Figma variables into Sass, CSS Custom Properties, or TypeScript objects, applying whatever naming and structure conventions your codebase already uses.
4. Automated PR Generation: A script that creates a new branch, commits the updated tokens, and opens a PR for review. The PR step is deliberately not a direct commit to main: token changes still get a human glance before merge, the automation removes the copy-paste, not the review.

GitHub Action: The Sync Logic

GitHub Actions is the natural orchestrator here because it already sits between your repository and your deploy pipeline, so a token update flows through the same review and CI gates as any other change. Here's a simplified view of how a sync action might look:

# .github/workflows/figma-sync.yml
name: Sync Figma Tokens
on:
  repository_dispatch:
    types: [figma-token-update]
 
jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Fetch Figma Tokens
        run: npm run figma:fetch
        env:
          FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}
      - name: Transform Tokens
        run: npm run tokens:build
      - name: Create Pull Request
        uses: peter-evans/create-pull-request@v5
        with:
          commit-message: "design: update tokens from Figma"
          title: "Design Tokens Update"
          branch: "chore/figma-sync"

Transforming Variables into Code

The transformation step is where most of the actual value lives, because raw Figma variable exports don't map directly onto usable code. A Figma color variable is a hex value with a name; your codebase needs that same value expressed as a CSS custom property, a Sass variable, and a TypeScript constant, each with naming that matches your existing conventions, not Figma's. Style Dictionary handles this by treating tokens as a single source of truth (a JSON file per category) and generating platform-specific output from it, so the same token change produces consistent CSS, TypeScript, and, if you ship native apps, iOS and Android output from one edit.

// Style Dictionary 2026 Config Example
export default {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'src/styles/',
      files: [{
        destination: 'variables.css',
        format: 'css/variables'
      }]
    },
    ts: {
      transformGroup: 'js',
      buildPath: 'src/lib/theme/',
      files: [{
        destination: 'tokens.ts',
        format: 'javascript/es6'
      }]
    }
  }
};

Step-by-Step Instructions: Building the Pipeline

1. Generate a Figma Personal Access Token: Ensure it has read access to your design file, and scope it as narrowly as Figma allows, read-only, single file, not a full-account token.
2. Configure Figma Webhooks: Set up a webhook (using a service like Zapier or a custom Node.js endpoint) that triggers your GitHub Action via repository_dispatch.
3. Implement the Fetch Script: Write a script using @figma/sdk to retrieve the latest variables, and version the raw JSON output alongside the transformed tokens so a bad transform is easy to diff against the source.
4. Set up Style Dictionary: Configure your transform rules to match your project's styling architecture, matching existing naming conventions rather than adopting Style Dictionary's defaults wholesale.
5. Automate the Pull Request: Use the create-pull-request action to automate the final step of the loop, and add a CI check that runs your visual regression suite against the PR before a human reviews it.

What Breaks This Pipeline in Practice

The two failure modes worth planning for upfront. First, a Figma variable gets renamed instead of edited: the pipeline sees this as a delete-plus-create, not a rename, so the transform step can silently drop a token that's still referenced in code, and the failure only shows up as a broken build or a missing CSS variable somewhere downstream. Guard against this with a CI step that diffs the generated token file against the previous version and fails loudly on any removed key, rather than letting a removal pass silently. Second, a designer publishes a work-in-progress variable set mid-edit, triggering a sync on incomplete data. The fix isn't more validation logic, it's a deliberate "publish" convention: a specific branch or file state in Figma that means "this is ready to sync," so the webhook only fires on intentional publishes, not every autosave.

Conclusion

The pipeline removes the friction from the design-to-code process by automating the mundane task of token synchronization. Start with the one-way sync (Figma to code) before attempting bidirectional updates, and add the removed-token CI check before your first real sync, catching a silent breakage in a PR review is far cheaper than catching it in a production stylesheet.

Next in the series: Architecting AI-Agent Design Workflows →. The pipeline handles token sync. Next: extending it with agents that can observe, interpret, and generate, not just move files.

Sources & References

• GitHub Actions: Events That Trigger Workflows — official reference on repository_dispatch and other workflow triggers
• Style Dictionary Documentation — official docs on token transforms and multi-platform output
• Val Head — writer and consultant on animation and design engineering practice
• Figma REST API Documentation — official reference for the Variables and webhooks APIs