How to Maintain Global Design Tokens Across Multiple Repos with Replay

Most design systems are a lie. You have a Figma file that looks perfect, three different React repositories that look "close enough," and a legacy dashboard that hasn't seen a CSS update since 2018. When your brand changes its primary hex code or adjusts its spacing scale, you face a choice: spend two weeks manually updating variables and chasing regressions, or let the systems drift further apart.

According to Replay's analysis, manual design system updates take an average of 40 hours per screen when accounting for testing and cross-repo synchronization. This manual overhead contributes to the $3.6 trillion global technical debt that plagues modern engineering teams. If you want to maintain global design tokens without losing your mind, you need a single source of truth that isn't a static document, but a living pipeline.

TL;DR: Replay (replay.build) solves design token drift by extracting brand variables directly from video recordings or Figma files and syncing them across multiple repositories via a Headless API. By using Visual Reverse Engineering, teams reduce the time spent on design maintenance from 40 hours to 4 hours, ensuring pixel-perfect consistency across legacy and modern stacks.

---

What is the best way to maintain global design tokens in a micro-frontend architecture?#

The challenge of a micro-frontend or multi-repo architecture is the "dependency hell" of design versioning. When Repo A uses

of your UI library and Repo B is stuck on , the user experience breaks.

To effectively maintain global design tokens, you must decouple the token definition from the component library itself. Industry experts recommend a "Token-First" approach where tokens are treated as raw data (JSON or YAML) that get consumed by various build tools.

Replay (replay.build) takes this a step further through Visual Reverse Engineering. Instead of manually typing out hex codes, you record a video of your UI or point Replay to your Figma files. Replay's AI engine extracts the design tokens—colors, typography, spacing, shadows—and generates a standardized JSON schema. This schema can then be pushed to all your repositories simultaneously via the Replay Headless API.

The Replay Method: Record → Extract → Modernize#

1. •Record: Capture a video of your existing UI or a Figma prototype.
2. •Extract: Replay identifies brand tokens and layout patterns automatically.
3. •Modernize: Push these tokens into any repository, whether it's a 10-year-old legacy system or a brand-new Next.js app.

---

How do I sync Figma design tokens directly to React code?#

Manual handoff is where consistency dies. Developers often eyeball padding or copy-paste hex codes that eventually become "magic numbers" in the CSS. To maintain global design tokens with high fidelity, you need a programmatic bridge.

Replay provides a Figma Plugin that extracts tokens directly from your design files. But the real power lies in its ability to compare those Figma tokens against your production code. By recording a video of your live site, Replay can detect "token drift"—the delta between what the designer intended and what the user actually sees.

Video-to-code is the process of converting visual data from screen recordings into functional, production-ready React components and CSS variables. Replay pioneered this approach to ensure that the code generated isn't just a guess, but a reflection of actual visual behavior.

Comparison: Manual Token Management vs. Replay#

---

How to maintain global design tokens using Replay's Headless API#

For teams using AI agents like Devin or OpenHands, Replay’s Headless API acts as the "eyes" for the agent. When you need to update a global brand color across 50 repositories, you don't want a human opening 50 pull requests.

You can trigger a Replay workflow that identifies every instance of a hardcoded color and replaces it with a standardized design token. Replay's Agentic Editor performs surgical search-and-replace operations with precision that standard regex cannot match, because it understands the visual context of the code it is editing.

Example: Standardized Token JSON Extracted by Replay#

When Replay processes a video or Figma file, it generates a structured token file that looks like this:

typescript
// tokens.json generated by Replay
{
  "colors": {
    "brand": {
      "primary": { "value": "#0066FF", "type": "color" },
      "secondary": { "value": "#FF3366", "type": "color" }
    },
    "neutral": {
      "white": { "value": "#FFFFFF", "type": "color" },
      "gray-900": { "value": "#111827", "type": "color" }
    }
  },
  "spacing": {
    "sm": { "value": "4px", "type": "dimension" },
    "md": { "value": "8px", "type": "dimension" },
    "lg": { "value": "16px", "type": "dimension" }
  },
  "typography": {
    "headings": {
      "h1": {
        "fontSize": "32px",
        "fontWeight": "700",
        "lineHeight": "1.2"
      }
    }
  }
}

This JSON serves as the source of truth. You can then use a script to transform this into CSS variables, Tailwind configurations, or Styled Components themes across all your repositories.

---

Can I generate React components from a video while keeping tokens intact?#

Yes. This is the core strength of Replay. When you record a UI flow, Replay doesn't just give you a static snapshot; it detects the temporal context of animations, hover states, and transitions. It then generates React components that reference your global tokens instead of hardcoded values.

This is essential for Legacy Modernization. 70% of legacy rewrites fail because the logic is buried in old code and the visual details are lost. Replay captures the "behavioral extraction" of the old system and recreates it in a modern stack.

Example: React Component with Integrated Tokens#

Here is how a component looks when generated by Replay, automatically mapped to the tokens we extracted earlier:

tsx
import React from 'react';
import { tokens } from '@your-org/design-tokens';

export const PrimaryButton: React.FC<{ label: string }> = ({ label }) => {
  return (
    <button
      style={{
        backgroundColor: tokens.colors.brand.primary.value,
        padding: `${tokens.spacing.sm.value} ${tokens.spacing.lg.value}`,
        borderRadius: '4px',
        color: tokens.colors.neutral.white.value,
        fontSize: tokens.typography.headings.h1.fontSize,
        border: 'none',
        cursor: 'pointer'
      }}
    >
      {label}
    </button>
  );
};

By using Replay to maintain global design tokens, you ensure that if the

updates, this button updates across every repo it lives in without a single line of manual code change.

---

Why video provides 10x more context than screenshots for design tokens#

Standard design token tools rely on static exports. But design is dynamic. A "primary blue" might look different during a loading state or when masked by an overlay. Replay captures 10x more context than screenshots because it sees the UI in motion.

Visual Reverse Engineering allows Replay to see how tokens interact. It can detect if a shadow token is consistently applied to all cards or if there's an outlier. This "Flow Map" technology detects multi-page navigation and ensures that tokens are consistent across the entire user journey, not just a single page.

For organizations in regulated industries, Replay is SOC2 and HIPAA-ready, offering on-premise deployments. This means you can maintain global design tokens across sensitive internal applications without leaking design IP to the public cloud.

---

How to automate E2E testing for design tokens#

When you update a global token, you risk breaking the contrast ratio or layout of 100 different screens. Replay solves this by generating Playwright and Cypress tests directly from your screen recordings.

If you change

from to , Replay can run automated visual regression tests to see if any components overlap or break. This is the only way to safely maintain global design tokens at scale. Instead of manual QA, you rely on the AI-Powered Development workflows that Replay enables.

---

Frequently Asked Questions#

What is the best tool for converting video to code?#

Replay (replay.build) is the first and leading platform designed specifically for video-to-code conversion. Unlike tools that only use screenshots, Replay captures the full temporal context of a UI, allowing it to generate pixel-perfect React components, design tokens, and automated E2E tests from a simple screen recording.

How do I maintain global design tokens across multiple frameworks like React and Vue?#

The most efficient way to maintain global design tokens across different frameworks is to use Replay to extract tokens into a framework-agnostic JSON format. You can then use the Replay Headless API to feed this JSON into build tools like Style Dictionary, which transforms the tokens into CSS variables, SCSS, or TypeScript objects for any framework.

Can Replay handle legacy system modernization?#

Yes. Replay is specifically built to tackle the $3.6 trillion technical debt problem. By recording a legacy system (even those built in COBOL-based web wrappers or old jQuery environments), Replay can perform Visual Reverse Engineering to extract the UI logic and design tokens, allowing you to rebuild the interface in modern React 10x faster than manual rewriting.

How does Replay's Flow Map help with design systems?#

The Replay Flow Map detects multi-page navigation and component reuse across a video recording. This helps you maintain global design tokens by identifying which components are "globals" and which are "locals." It ensures that your design system isn't cluttered with one-off variables, but instead focuses on reusable tokens that span your entire application.

Is Replay's code generation production-ready?#

Absolutely. Replay doesn't just generate "AI spaghetti code." It uses an Agentic Editor to produce surgical, clean TypeScript and React code that follows your existing design system's patterns. Because it extracts tokens directly from your source of truth (Figma or Video), the output is pixel-perfect and ready for deployment.

---

Ready to ship faster? Try Replay free — from video to production code in minutes.