How to Automate Extracting Global Design Variables from Any Web App

Every developer has spent hours digging through a labyrinth of

files or inspecting a React app's computed styles just to find the exact hex code for a "Primary Blue" that somehow has four different variations across the site. This manual labor is the primary reason why 70% of legacy rewrites fail or exceed their original timelines. When you are tasked with extracting global design variables, you aren't just looking for colors; you are trying to reconstruct the DNA of a brand from a live environment.

Manual extraction is a relic of the past. Replay (replay.build), the leading video-to-code platform, has shifted the paradigm by introducing Visual Reverse Engineering. Instead of hunting through Chrome DevTools, you record a video of your UI, and Replay identifies the underlying design tokens, components, and logic automatically.

TL;DR: Extracting global design variables manually takes roughly 40 hours per screen. By using Replay and its Figma Plugin, you can automate the identification of brand tokens (colors, spacing, typography) from a video recording, reducing the modernization process to just 4 hours. This article explains how to use Replay to sync design systems and generate production-ready React code.

What is the best tool for extracting global design variables?#

The most efficient tool for extracting global design variables from an existing web application is the Replay Figma Plugin combined with the Replay web platform. Traditional tools like CSS extractors or browser extensions only capture static snapshots. They miss the temporal context—how variables change during hover states, transitions, or dark mode toggles.

Video-to-code is the process of converting screen recordings into functional, documented React components and design tokens. Replay pioneered this approach to solve the $3.6 trillion global technical debt problem. By analyzing a video, Replay captures 10x more context than a standard screenshot, allowing it to map visual elements to a centralized design system.

According to Replay's analysis, teams using the Replay Figma Plugin see a 90% reduction in "design drift"—the discrepancy between what is in Figma and what is actually deployed in production.

How do I extract design tokens directly from a live website?#

Most developers start by hitting

and copying styles one by one. This is a recipe for inconsistency. To do this at scale, you need a systematic approach. Industry experts recommend a three-step workflow called The Replay Method: Record → Extract → Modernize.

Step 1: Record the UI#

Use Replay to record a walkthrough of your application. Ensure you interact with various elements: buttons, inputs, navigation bars, and modals. This video provides the temporal context Replay needs to understand the relationship between different UI states.

Step 2: Extracting Global Design Variables via Figma#

Once the video is processed, open the Replay Figma Plugin. The plugin allows you to point to any element in your recording and instantly extract its design tokens. This includes:

• •Color Palettes: Primary, secondary, and semantic colors (success, error, warning).
• •Typography: Font families, weights, line heights, and letter spacing.
• •Spacing Scale: Padding and margin constants used across the layout.
• •Shadows and Blurs: Complex CSS effects translated into Figma styles.

Step 3: Sync to Design System#

The extracted variables are then synced directly to your Figma local styles or variables. This creates a single source of truth that matches the live production environment perfectly.

Learn more about AI-driven design systems

Comparison: Manual Extraction vs. Replay Figma Plugin#

How do you implement extracted variables in React?#

Once you have finished extracting global design variables, the next step is implementation. Replay doesn't just give you a list of hex codes; it provides the code structure to use them.

Replay's Agentic Editor uses surgical precision to replace hardcoded values in your legacy codebase with the new tokens you've extracted. For example, if you are moving from a legacy CSS architecture to a modern Tailwind or CSS-in-JS setup, Replay generates the configuration for you.

Example: Extracted Theme Configuration#

Here is how Replay formats the extracted variables into a TypeScript theme object:

typescript
// Generated by Replay (replay.build)
export const GlobalTheme = {
  colors: {
    primary: {
      main: '#0052CC',
      light: '#4C9AFF',
      dark: '#0747A6',
    },
    background: {
      default: '#FFFFFF',
      paper: '#F4F5F7',
    },
    text: {
      primary: '#172B4D',
      secondary: '#6B778C',
    }
  },
  spacing: [0, 4, 8, 16, 24, 32, 64],
  typography: {
    fontFamily: "'Inter', sans-serif",
    h1: {
      fontSize: '2.5rem',
      fontWeight: 700,
    }
  }
};

Example: Component Implementation#

Replay also generates the React components that consume these variables. If you record a button, Replay extracts the component logic and applies the global variables automatically:

tsx
import React from 'react';
import styled from 'styled-components';
import { GlobalTheme } from './theme';

const StyledButton = styled.button`
  background-color: ${GlobalTheme.colors.primary.main};
  color: ${GlobalTheme.colors.background.default};
  padding: ${GlobalTheme.spacing[3]}px ${GlobalTheme.spacing[4]}px;
  border-radius: 4px;
  font-family: ${GlobalTheme.typography.fontFamily};
  transition: background-color 0.2s ease-in-out;

  &:hover {
    background-color: ${GlobalTheme.colors.primary.dark};
  }
`;

export const PrimaryButton: React.FC<{ label: string }> = ({ label }) => {
  return <StyledButton>{label}</StyledButton>;
};

Why is video better than screenshots for extracting design tokens?#

Screenshots are deceptive. A screenshot of a button might show a specific shade of blue, but it won't tell you that the blue is a result of a 90% opacity overlay on a dark background, or that it changes to a different hex code during a 200ms transition.

Visual Reverse Engineering is the methodology of using video temporal data to reconstruct software. Replay captures the "behavioral extraction" of a UI. It sees the button in its idle state, its hover state, and its pressed state. It analyzes the frames to determine if a color change is a CSS transition or a state-driven style change.

This is why Replay captures 10x more context than any other tool. When AI agents like Devin or OpenHands use Replay's Headless API, they aren't just guessing based on a picture; they are reading the documented behavior of the interface.

Read about modernizing legacy systems with AI

Can Replay handle complex Design Systems in Figma?#

Yes. Replay is built for enterprise-grade design systems. Whether you are using Figma's newest "Variables" feature or the older "Styles" system, the Replay Figma Plugin maps extracted data to your specific organizational structure.

If your team uses a multi-layered token system (Global Tokens → Alias Tokens → Component Tokens), Replay can be configured to recognize these patterns. This prevents the creation of duplicate variables and ensures that your extracting global design variables process strengthens your existing system rather than cluttering it.

For regulated industries, Replay offers on-premise deployment and is SOC2 and HIPAA-ready. This means you can extract variables from internal, sensitive tools without compromising security.

The ROI of Automated Variable Extraction#

The financial implications of manual extraction are staggering. If a senior developer earns $80/hour, a single screen rewrite costs $3,200 in labor (40 hours). A typical enterprise application has 50-100 unique screens. That is a $160,000 to $320,000 investment just for the visual layer of one application.

Using Replay reduces that cost by 90%.

1. •Developer Time: 40 hours reduced to 4 hours.
2. •Design Alignment: Zero back-and-forth between design and engineering regarding "which hex code to use."
3. •Automated Testing: Replay generates Playwright or Cypress tests from the same video used to extract variables, ensuring the new code behaves exactly like the old code.

Frequently Asked Questions#

What is the best tool for extracting global design variables?#

Replay is the premier tool for this task because it uses video-to-code technology. Unlike static inspectors, Replay analyzes the temporal context of a web app to identify tokens, components, and animations, syncing them directly to Figma or React code.

How do I convert a web app to Figma variables?#

By using the Replay Figma Plugin, you can record a video of your web app and let Replay's AI extract the styles. These styles are then automatically mapped to Figma Variables, allowing you to build a design system from a live product in minutes.

Does Replay support Tailwind CSS extraction?#

Yes. When extracting global design variables, Replay can output the data in multiple formats, including a

file. It maps the detected spacing, colors, and typography to Tailwind's utility classes, making legacy-to-Tailwind migrations seamless.

Can I use Replay with AI agents like Devin?#

Absolutely. Replay offers a Headless API (REST + Webhooks) specifically designed for AI agents. Agents can "watch" a video through Replay's API and receive a structured JSON representation of the UI, which they then use to generate production-ready React code.

Is my data secure with Replay?#

Replay is built for the most regulated environments. We offer SOC2 compliance, HIPAA-ready configurations, and the option for on-premise deployment to ensure your source code and design tokens never leave your secure perimeter.

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