TokenDrift - Real-Time Design System Token Drift Detection (Figma to Code Mismatch Alerting)

Design system tokens change in Figma, your code still uses old values, users see subtle color/spacing mismatches. TokenDrift watches for drift, posts to Slack when you're out of sync, shows exactly what changed.

𝕏 Post Reddit HN

Difficulty

low-code

What is it?

Design systems fail because code always lags design. A designer updates a color token in Figma from #3B82F6 to #2563EB, but the React component library still ships the old value. Users see the mismatch, engineers waste hours hunting it. TokenDrift solves this by: (1) developers export design tokens from Figma as JSON/YAML, (2) they commit that file to their repo, (3) TokenDrift runs as a GitHub Action on every commit, comparing the committed token file to what's currently in Figma, (4) if there's drift, it posts to Slack with a diff showing exactly which tokens changed and by how much, (5) engineers can either sync code to new tokens or raise a flag if the Figma change was accidental. The core mechanic is: Figma API polls tokens -> diff against git history -> Slack alert with visual comparison. Why buildable: Figma API is mature, GitHub Actions are free, Slack webhooks are trivial, and no ML is needed.

Why now?

Design system tooling is finally mature (Figma API is stable), Slack bot culture is peak, and drift is the #1 complaint from design system teams in 2026.

▸Real-time drift detection between Figma and git
▸Slack alerts with visual diffs (old color vs new)
▸GitHub Action trigger on token file commits
▸Web dashboard showing drift history
▸Ignore rules (mark certain tokens as exempt)
▸Automatic sync suggestions (PR-ready code snippets)
▸Team notifications with customizable rules

Target Audience

Engineering teams with design systems (target: 1k-50k person companies with 5+ engineers). Initial focus on design-forward startups and mid-market companies.

Example Use Case

Alex, an engineering manager at a 30-person design system team, installs TokenDrift on their repo. A designer updates the primary blue color in Figma from #3B82F6 to #2563EB. On the next commit that touches the design tokens file, TokenDrift detects the change, posts to Slack with a side-by-side diff showing the old and new color, and @mentions the design lead asking if this was intentional. If it was, engineers sync the code. If it wasn't, the designer reverts the change. Either way, nothing slips through.

User Stories

▸As a design system lead, I want to be notified immediately when Figma tokens drift from my codebase, so that I can decide whether to sync or revert. As an engineer, I want to see exactly what changed in a token without hunting through Figma, so that I can update components faster.
▸As a designer, I want to know if my token changes broke the codebase, so that I can coordinate with engineering before updating.

Acceptance Criteria

GitHub Action: done when action installs and runs without errors on token file commits. Figma Fetch: done when tokens are correctly fetched from Figma API (verified on 3+ design files). Diff Detection: done when changes are correctly identified (color hex changes, spacing value changes). Slack Alert: done when message posts to Slack with readable format (old vs new values). Subscription: done when free tier allows 3 checks/month, paid tier allows unlimited checks.

Is it worth building?

$25/month × 20 paying teams (realistic early adopters from ProductHunt + GitHub Marketplace) = $500 MRR by month 2. $75/month × 8 mid-tier teams = $600 additional by month 3. Realistic path to $2k MRR by month 4–5 as word-of-mouth builds in design system communities.

Unit Economics

CAC: $10 via ProductHunt and GitHub Marketplace (passive install, high-intent audience). LTV: ~$62 (approximately 2.5 months at $25/month given 40% monthly churn — 1/0.4 × $25). Payback: under 3 weeks. Gross margin: 95%+ (nearly zero variable costs). Note: reducing churn to 20% monthly would raise LTV to ~$125 and meaningfully change unit economics.

Business Model

Free for public repos, SaaS: $25/month for 1 design file (1000 checks/month), $75/month for 5 files, $200/month for unlimited.

Monetization Path

Free for open-source. Paid: charged by number of design files monitored. Enterprise: $200/month for unlimited files + team accounts + custom Slack workflows.

Revenue Timeline

First dollar: week 2–3 (first paid install after ProductHunt or GitHub Marketplace listing). $500 MRR: month 2–3. $2k MRR: month 5–6. $5k MRR: month 10–12 with active community distribution.

Estimated Monthly Cost

Figma API: $0 (free tier sufficient), Vercel: $20 (if dashboard needed), Supabase: $15 (usage tracking), Stripe: $10. Total: ~$45/month at launch.

Profit Potential

Full-time viable at $5k–$15k MRR.

Scalability

High — can expand to token versioning, automated sync proposals, Jira integration, and team workflows.

Success Metrics

Week 2: 30–50 GitHub Action installs (organic from GitHub Marketplace + one community post). Month 1: 5–10 paid signups. Month 1: $200–$500 MRR. Slack message click-through rate: 40%+ (50%+ is aspirational but achievable if alerts are high-signal).

Launch & Validation Plan

Interview 30 design system leads about current drift pain. Build GitHub Action. Test on 5 popular design systems (Material, Pollen, etc.). Recruit 10 beta teams offering free pro tier for 3 months. Track: adoption rate, false positive rate, user engagement with Slack messages.

Customer Acquisition Strategy

First customer: post in Figma Slack community and r/webdev asking 'who has design system sync pain?', offer free token drift checking. Broader: ProductHunt launch (GitHub Actions and design system tools are evergreen), Twitter/X thread on 'design system debt', GitHub Marketplace listing, design system community forums (Design Tokens CommunityGroup), Reddit r/web_design.

What's the competition?

Competition Level

Very Low

What's the roadmap?

Feature Roadmap

V1 (launch): Real-time drift detection, Slack alerts, GitHub Action. V2 (month 2-3): Web dashboard with drift history, ignore rules, automated PR generation for token updates. V3 (month 4+): CSS variable generation, design token versioning, multi-file comparison, team workflows.

Milestone Plan

Phase 1 (Week 1): Build GitHub Action YAML, write commit trigger script, integrate Figma API, test on 3 repos. Done when drift is detected and logged. Phase 2 (Week 2): Format Slack message with visual diffs, add Stripe subscription check, publish to GitHub Marketplace. Done when paid customer can install and see alerts. Phase 3 (Month 2): Build web dashboard, optimize Figma API calls, launch ProductHunt, monitor false positive rate.

How do you build it?

Tech Stack

Node.js, GitHub Actions, Figma REST API (api.figma.com/v1/files/:key/variables), Slack Block Kit (for rich message formatting), Supabase, Stripe — build GitHub Action script with Cursor, dashboard UI with Lovable, Slack message payloads composed using Slack Block Kit Builder (block-kit-builder.slack.com).

Suggested Frameworks

Time to Ship

7 days

Required Skills

GitHub Actions, Node.js, Figma API, Slack API, basic diff algorithms.

Resources

Figma API docs, GitHub Actions docs, Slack API docs, Supabase docs.

MVP Scope

1. GitHub Action YAML triggering on token file changes. 2. Node.js script fetching token file from git history. 3. Figma API call to fetch current tokens. 4. Diff calculation (what changed, by how much). 5. Slack message formatter with visual diffs (color swatches for color tokens). 6. Post to Slack webhook. 7. Optional: web dashboard showing drift history. 8. Stripe subscription check.

Core User Journey

Install GitHub Action -> connect Figma API key -> receive first Slack alert on next commit -> fix code token -> renew subscription.

Architecture Pattern

GitHub commit -> Action trigger -> fetch token file from git -> call Figma API -> diff locally -> post to Slack webhook -> log to Supabase.

Data Model

Team has many TokenDriftChecks. TokenDriftCheck has many DriftDetections. DriftDetection logs old token value, new token value, timestamp.

Integration Points

GitHub API via Actions, Figma API for token fetch, Slack API for alerts, Supabase for usage tracking, Stripe for billing.

V1 Scope Boundaries

V1 excludes: automated code sync, version control for tokens, CSS variable generation, team approval workflows, white-label.

Success Definition

A team installs TokenDrift, gets a Slack alert about a real token drift within 2 days, uses the alert to fix a code mismatch, and stays on the platform for month two.

Challenges

Figma API rate limits for large token sets. Handling different token formats (JSON vs CSS variables vs Tailwind). Getting notifications right so they're useful but not noisy.

Avoid These Pitfalls

1. Figma Variables vs legacy Figma Tokens are different API endpoints — the newer Variables API (POST /v1/files/:key/variables) returns a completely different schema than legacy plugin-based token exports; handle both or pick one explicitly. 2. Tokens that differ by theme mode (light/dark) will trigger false positives on every check unless you normalize by mode before diffing — build mode-aware comparison from day one. 3. Teams using Style Dictionary or Theo as an intermediary transform layer will have token names and values that don't map 1:1 to Figma — diff against the transformed output, not raw Figma values. 4. Figma API returns tokens in a nested collection/group structure; flattening to a comparable key-value map is non-trivial and a common source of bugs — write and test this transformer before anything else. 5. GitHub Actions on public repos will expose Figma API tokens in logs if you're not careful with masking — use add-mask in the action and explicitly test that secrets don't appear in run output. 6. Design system tokens change frequently during active sprints — alerting on every commit will cause alert fatigue; implement a cooldown (e.g. max 1 Slack alert per token per 4-hour window) from launch.

Security Requirements

Auth: GitHub OAuth for Action setup, Figma token via environment variable (never logged). Permissions: Action only needs repo read access. Rate limiting: 5 Figma API calls/hour per team. Input validation: sanitize Slack message content. Privacy: TokenDrift never stores design tokens in logs, only logs changes (diffs).

Infrastructure Plan

Hosting: GitHub Actions (free runner). Dashboard (optional): Vercel. Database: Supabase for usage tracking. CI/CD: GitHub Actions (dogfooding). Environments: test (your own repo), prod (GitHub Marketplace). Monitoring: Sentry for errors, Figma API quota tracking. Cost: ~$45/month includes Supabase and optional Vercel.

Performance Targets

Expected load: 500 GitHub Action installs, 100 drift checks/day. Figma API latency: 1-2 seconds per file. GitHub Action execution: under 5 seconds. Slack message posting: under 1 second. Caching: cache Figma tokens for 1 hour per file.

Go-Live Checklist

☐GitHub Action tested on 10+ repos with different token file formats
☐Figma API rate limits verified
☐Slack message formatting tested (images load, colors render)
☐Security audit: Figma token not logged, only diffs stored
☐Stripe subscription tested end-to-end
☐Error handling: Figma API failures, missing token files, network errors covered
☐GitHub Marketplace listing: action.yml, description, examples, screenshots
☐Documentation: setup guide, FAQ, troubleshooting
☐Beta team sign-off: 5+ teams confirm drift detection accuracy >95%
☐Rollback plan: revert GitHub Action version if critical bugs
☐Launch: ProductHunt, Twitter/X, r/webdev, design system community forums.

How to build it, step by step

1. Scaffold the GitHub Action: create .github/actions/tokendrift/action.yml with inputs: figma-file-key, figma-token, slack-webhook-url, token-file-path. Set runs: using: node20. 2. Write src/fetchFigmaTokens.js: call GET https://api.figma.com/v1/files/{fileKey}/variables/local with Authorization: Bearer {figmaToken}. Parse the response's variableCollections and variables fields into a flat map of {tokenName: resolvedValue}. Handle both FLOAT and COLOR variable types (COLOR values come as {r,g,b,a} — convert to hex). 3. Write src/fetchGitTokens.js: use child_process.execSync to run git show HEAD:{tokenFilePath} and parse the resulting JSON/YAML token file into the same flat map format as step 2. 4. Write src/diffTokens.js: iterate over all keys in both maps, detect: (a) value changed, (b) token added in Figma but not in git, (c) token removed from Figma but present in git. Return array of {tokenName, oldValue, newValue, changeType}. 5. Write src/formatSlackMessage.js: build a Slack Block Kit payload. For each changed token, if the value looks like a hex color, render two inline color squares using image blocks pointing to a color swatch service like via.placeholder.com/{size}/{hexNoHash}. Use section blocks with mrkdwn for token name and old→new values. Cap message at 10 drifts, add 'and N more...' if exceeded. 6. Write src/postSlack.js: POST the Block Kit payload to the SLACK_WEBHOOK_URL using the built-in https module (no extra deps). Handle non-200 responses by exiting with process.exit(1) so the Action fails visibly. 7. Wire together in src/index.js: call fetchFigmaTokens, fetchGitTokens, diffTokens — if diffs.length === 0 exit cleanly with console.log('No drift detected'). If diffs exist, call formatSlackMessage and postSlack. 8. Add Supabase logging (optional but needed for dashboard): insert one row per DriftCheck with teamId, fileKey, driftCount, diffs JSON, timestamp using @supabase/supabase-js. 9. Add Stripe gate: before posting alerts, call your Supabase edge function to check if the team has an active subscription or is within free-tier check limits (3 checks/month). Return 402 response if over limit and log a different Slack message prompting upgrade. 10. Test locally: set env vars, run node src/index.js against a real Figma file and a local token JSON. Verify Slack message renders correctly in Block Kit Builder before publishing. 11. Publish to GitHub Marketplace: add branding color and icon to action.yml, write README with setup steps, create releases/v1 tag, submit for Marketplace review.

Generated

March 28, 2026

Model

claude-haiku-4-5-20251001 · reviewed by Claude Sonnet

← Back to All Ideas