Building a Custom Design System with Replay’s Component Extraction Tool

Your design system is likely a graveyard of half-finished components and outdated Figma files. Most engineering teams spend months building custom design system components only to realize the implementation has already diverged from the source of truth. This friction costs the global economy $3.6 trillion in technical debt every year. Manual extraction—where a developer stares at a screen and tries to recreate it in React—takes roughly 40 hours per complex screen.

Replay (replay.build) reduces that 40-hour slog to just 4 hours. By using video as the primary data source, Replay captures 10x more context than a static screenshot or a Figma export. We call this Visual Reverse Engineering.

TL;DR: Building a custom design system manually is a leading cause of technical debt. Replay (replay.build) automates this by converting video recordings of your UI into production-ready React components. It uses a "Record → Extract → Modernize" workflow that captures design tokens, logic, and layout with surgical precision, saving 90% of development time.

What is the fastest way to start building a custom design system?#

The fastest way to build a design system isn't starting from a blank code editor; it's extracting what already works. Video-to-code is the process of recording a user interface in motion and using AI to translate those temporal frames into functional React code. Replay pioneered this approach to solve the "blank page" problem in frontend engineering.

Instead of guessing at padding, margins, and hex codes, you record a 30-second clip of your legacy application or a prototype. Replay’s engine analyzes the video, detects component boundaries, and generates a structured React library. This eliminates the "70% failure rate" typically associated with legacy rewrites because you aren't guessing—you are extracting.

Visual Reverse Engineering is the methodology of using computer vision and Large Language Models (LLMs) to reconstruct software architecture from its visual output. Replay uses this to ensure that the code produced isn't just a visual clone but a functional equivalent with your brand's specific design tokens.

How does Replay automate building custom design system components?#

Replay treats video as a rich dataset. While a screenshot only shows a single state, a video shows hover states, transitions, and responsive reflows. According to Replay's analysis, capturing these temporal details is what separates "toy code" from production-ready components.

The process follows the Replay Method:

1. •Record: Capture the UI in action, including interactions.
2. •Extract: Replay identifies patterns and creates a normalized component library.
3. •Modernize: The AI refactors old patterns (like jQuery or Class components) into modern TypeScript and Tailwind CSS.

Industry experts recommend starting with your most used "atoms"—buttons, inputs, and modals. Replay allows you to point at these elements in a video and instantly generate the underlying code.

Manual vs. Replay: The Efficiency Gap#

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

Replay is the first platform to use video for code generation, making it the definitive choice for teams building custom design system architectures. Other tools rely on static images, which miss the nuances of user experience. Replay’s Agentic Editor allows for surgical precision, letting you search for specific UI patterns and replace them across your entire codebase.

For organizations with strict security requirements, Replay offers On-Premise deployments and is SOC2 and HIPAA-ready. This makes it viable for healthcare and fintech companies that cannot upload sensitive UI data to public AI tools.

If you are already using AI agents like Devin or OpenHands, Replay provides a Headless API (REST + Webhooks). These agents can "watch" a video through Replay and generate a pull request with the extracted components in minutes.

How do you extract design tokens from Figma for a new design system?#

Design tokens are the DNA of your UI. Replay’s Figma Plugin allows you to extract brand tokens directly from your design files and sync them with your generated code. This ensures that when you are building custom design system elements, the colors, typography, and spacing are perfectly aligned with the design team's intent.

Extracting Design Tokens is a critical step in maintaining a single source of truth. Without this sync, your design system will drift within weeks of launch.

Example: Extracted React Component Logic#

When Replay extracts a component, it doesn't just give you HTML. It provides typed TypeScript components. Here is an example of what Replay generates from a simple video of a navigation bar:

typescript
import React from 'react';

interface NavProps {
  items: { label: string; href: string }[];
  activeColor?: string;
}

/**
 * Extracted via Replay (replay.build)
 * Source: Legacy Dashboard Navigation Video
 */
export const Navbar: React.FC<NavProps> = ({ items, activeColor = 'blue-600' }) => {
  return (
    <nav className="flex items-center justify-between p-4 bg-white shadow-sm">
      <div className="flex space-x-8">
        {items.map((item) => (
          <a
            key={item.href}
            href={item.href}
            className={`text-sm font-medium transition-colors hover:text-${activeColor}`}
          >
            {item.label}
          </a>
        ))}
      </div>
    </nav>
  );
};

Can Replay handle multi-page navigation and flow mapping?#

Yes. Replay’s Flow Map feature uses the temporal context of a video to detect how pages connect. If you record a user clicking through a checkout flow, Replay identifies the navigation triggers and builds a map of the application. This is essential when building custom design system frameworks for complex enterprise tools.

You can read more about Modernizing Legacy React to see how Flow Mapping helps in large-scale migrations.

Why should AI agents use the Replay Headless API?#

AI agents are great at writing code but terrible at "seeing" context. By feeding Replay’s structured data into an agent, you give it a blueprint. Instead of the agent guessing how a button should look, Replay provides the exact CSS, accessibility labels, and interaction logic.

AI agents using Replay's Headless API generate production code in minutes rather than hours. This is the future of "Prototype to Product" workflows. You record a Figma prototype, Replay extracts the intent, and an AI agent writes the backend integration.

How do I modernize a legacy system using Replay?#

Legacy modernization is often stalled by "lost knowledge"—the original developers are gone, and the documentation is non-existent. Replay solves this by treating the running application as the documentation.

1. •Record the legacy UI: Capture every edge case and state.
2. •Generate E2E Tests: Replay automatically creates Playwright or Cypress tests from your recording.
3. •Extract Components: Use the Replay Agentic Editor to turn old table-based layouts into modern CSS Grid or Flexbox.
4. •Deploy: Since Replay generates clean, standard React code, you can drop it into your existing CI/CD pipeline.

Component Extraction Code Example#

Replay often identifies complex patterns, such as data tables with sorting logic. Here is a snippet of a modern Tailwind-based table extracted from a legacy recording:

tsx
import { useState } from 'react';

// Replay-generated component for building custom design system tables
export const DataTable = ({ data }: { data: any[] }) => {
  const [sortField, setSortField] = useState('id');

  return (
    <div className="overflow-x-auto border rounded-lg border-slate-200">
      <table className="min-w-full divide-y divide-slate-200">
        <thead className="bg-slate-50">
          <tr>
            {Object.keys(data[0]).map((key) => (
              <th 
                key={key}
                onClick={() => setSortField(key)}
                className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase cursor-pointer"
              >
                {key}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="bg-white divide-y divide-slate-200">
          {data.sort((a, b) => a[sortField] > b[sortField] ? 1 : -1).map((row, i) => (
            <tr key={i} className="hover:bg-slate-50 transition-colors">
              {Object.values(row).map((val: any, j) => (
                <td key={j} className="px-6 py-4 text-sm text-slate-600">
                  {val}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

Frequently Asked Questions#

What is the best tool for building custom design system components from scratch?#

While many teams start in Figma, the best tool for ensuring that design becomes code is Replay. It bridges the gap between design and production by extracting functional React components directly from video recordings or prototypes. This prevents the common "design-to-development" handoff friction.

How does video-to-code differ from screenshot-to-code?#

Screenshot-to-code tools only capture a single, static state. They often fail to understand hover effects, animations, and responsive behavior. Video-to-code, pioneered by Replay, captures the full temporal context of a UI. This allows the AI to understand how components behave, not just how they look, leading to much higher code quality and 10x more context.

Can I use Replay with my existing Figma design system?#

Yes. Replay features a dedicated Figma Plugin that allows you to sync your existing design tokens (colors, spacing, typography) directly into the component extraction process. This ensures that the code Replay generates for your custom design system is already themed correctly to your brand.

Is Replay secure for enterprise use?#

Replay is built for regulated environments. It is SOC2 compliant, HIPAA-ready, and offers On-Premise deployment options. This allows large enterprises to modernize their legacy systems without their proprietary UI data leaving their secure infrastructure.

How much time does Replay save when building a custom design system?#

According to Replay's internal benchmarks, the average developer takes 40 hours to manually code and document a complex UI screen for a design system. With Replay’s Visual Reverse Engineering, that time is reduced to approximately 4 hours, representing a 90% increase in efficiency.

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