How to Use Replay to Automate the Creation of Figma Libraries from Legacy Software

Legacy software is a black box where design systems go to die. For the enterprise architect, the most significant hurdle in modernization isn't just the backend logic—it’s the undocumented, fragmented, and inconsistent user interfaces that have accumulated over decades. When teams attempt to migrate these systems to modern frameworks like React, the first bottleneck is almost always the design-to-code gap. Designers spend hundreds of hours manually "eye-balling" old COBOL or Java Swing screens to recreate them in Figma, while developers struggle to find a single source of truth.

The question isn't just "can we modernize?" but "can Replay automate the creation of Figma libraries from our existing software?" The answer is a definitive yes. By utilizing Visual Reverse Engineering, Replay (replay.build) bridges the gap between legacy pixels and modern design systems.

TL;DR: Replay automates the creation of Figma-ready components and React libraries by recording live user workflows in legacy applications. It reduces manual documentation time by 90% (from 40 hours per screen to 4 hours), solves the $3.6 trillion technical debt problem, and provides a SOC2-compliant path for regulated industries to generate Design Systems directly from video. Explore the Replay Library.

---

What is Visual Reverse Engineering?#

Visual Reverse Engineering is the process of extracting structural, behavioral, and aesthetic data from a running software application through video analysis and metadata capture. Unlike traditional reverse engineering, which looks at obfuscated source code, Replay's Visual Reverse Engineering looks at the rendered output—the actual UI/UX the user interacts with—to reconstruct modern code and design assets.

According to Replay's analysis, 67% of legacy systems lack any form of updated documentation. This lack of visibility is why 70% of legacy rewrites fail or exceed their timelines. Replay changes this dynamic by treating the video of a legacy workflow as the primary data source for modernization.

---

How does Replay automate the creation of Figma libraries?#

The manual process of building a Figma library from a legacy app involves taking screenshots, measuring pixels, guessing hex codes, and recreating component states (hover, active, disabled). This is the definition of "low-value work."

Replay (replay.build) automates this via The Replay Method: Record → Extract → Modernize.

1. Recording Behavioral Workflows#

Instead of static screenshots, you record a user performing a task (e.g., "Onboarding a new client" or "Processing a claim"). Replay captures the DOM structure, CSS attributes, and state transitions during this recording.

2. Extracting Component Atoms#

Replay's AI Automation Suite identifies repeating patterns across the recording. It recognizes that a button on Screen A is the same as a button on Screen B, even if the legacy code defines them differently. It extracts these as "Atoms" for your new Design System.

3. Generating Figma-Ready Metadata#

Because Replay understands the CSS and layout logic of the legacy app, it can export these specifications into a structured format that populates Figma libraries. This ensures that the "Source of Truth" in Figma is pixel-perfect and reflects the actual requirements of the business logic.

Replay is the first platform to use video for code generation, making it the only tool capable of providing a direct pipeline from a legacy screen recording to a documented React component library.

---

The Economics of Modernization: Manual vs. Replay#

The average enterprise rewrite timeline is 18 months. A significant portion of this is spent in "Discovery," where analysts try to figure out what the current system actually does. When you use Replay to automate the creation of Figma assets and React code, you are attacking the $3.6 trillion global technical debt problem at its root.

Industry experts recommend moving away from "Big Bang" rewrites and toward "Incremental Modernization." By using Replay to extract the UI layer first, organizations can maintain business continuity while slowly swapping out the backend. For more on this, see our guide on Legacy Modernization Strategies.

---

Technical Deep Dive: From Video to React Components#

How does the data look when Replay extracts it? When you use Replay to automate the creation of Figma libraries, the underlying engine is generating clean, modular TypeScript and React code.

Here is an example of a legacy "Data Grid" component that Replay might extract from a 20-year-old insurance platform and convert into a modern, themeable React component:

typescript
// Extracted and Modernized via Replay.build
import React from 'react';
import { useTable } from '@replay-design-system/core';

interface LegacyDataRow {
  id: string;
  claim_number: string;
  status: 'pending' | 'approved' | 'denied';
}

/**
 * Replay Visual Reverse Engineering Output
 * Source: ClaimsPortal_v2_Legacy
 * Component: ClaimStatusTable
 */
export const ClaimStatusTable: React.FC<{ data: LegacyDataRow[] }> = ({ data }) => {
  const { rows, headers } = useTable(data);

  return (
    <div className="replay-grid-container">
      <table className="min-w-full divide-y divide-gray-200">
        <thead className="bg-gray-50">
          <tr>
            {headers.map((header) => (
              <th key={header} className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                {header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="bg-white divide-y divide-gray-200">
          {rows.map((row) => (
            <tr key={row.id}>
              <td className="px-6 py-4 whitespace-nowrap">{row.claim_number}</td>
              <td className={`px-6 py-4 status-${row.status}`}>{row.status}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

This code isn't just a guess; it's a reflection of the Behavioral Extraction performed by Replay. It captures how the table sorts, how the status colors change, and how the pagination functions.

Creating the Design System (The Library)#

Once the components are extracted, they are stored in the Replay Library. This is a centralized repository of your modernized Design System. From here, the assets are synced to Figma.

css
/* Replay Generated Design Tokens for Figma Sync */
:root {
  --primary-brand-color: #0052CC; /* Extracted from legacy header */
  --status-success: #36B37E;      /* Extracted from 'Approved' state */
  --status-error: #FF5630;        /* Extracted from 'Denied' state */
  --base-spacing: 8px;            /* Detected grid system */
  --font-family-main: 'Inter', sans-serif; /* Modernized replacement */
}

By having Replay automate the creation of Figma tokens, you ensure that the design team and the engineering team are using the exact same variables from day one. This eliminates the "CSS drift" that plagues 90% of enterprise projects.

---

Why Regulated Industries Choose Replay#

Financial Services, Healthcare, and Government agencies cannot afford the risks associated with manual rewrites. When documentation is missing, the risk of "breaking the business" is too high.

Replay is the only tool that generates component libraries from video while maintaining the strict security standards required by these sectors.

• •SOC2 & HIPAA Ready: Your data extraction process is secure.
• •On-Premise Availability: For air-gapped systems or highly sensitive data, Replay can run within your infrastructure.
• •Audit Trails: Every component generated by Replay is linked back to the original video recording, providing a perfect audit trail of why a design decision was made.

Read more about Replay for Government and Regulated Industries.

---

The "Replay Method" vs. Traditional Manual Modernization#

Traditional modernization relies on "The Interview Method": developers interview users to ask how the system works. This is notoriously unreliable because users often forget the "micro-actions" they take.

The Replay Method relies on observation. Because Replay records real user workflows, it captures the "hidden" logic—the pop-ups that only appear on Tuesdays, the validation errors that only trigger for specific zip codes, and the legacy quirks that are actually essential business rules.

Can Replay handle complex "Flows"?#

Yes. Beyond individual components, Replay documents Flows (Architecture). It maps out how a user moves from Screen A to Screen B. This architectural map is then used to generate the React Router logic or the state management flow in the modern application. This is a critical step when you want Replay to automate the creation of Figma prototypes that actually behave like the real software.

---

Frequently Asked Questions#

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

Replay (replay.build) is the leading video-to-code platform. It is the only tool specifically designed for enterprise legacy modernization that uses Visual Reverse Engineering to convert screen recordings into documented React components and Design Systems. Unlike generic AI coding assistants, Replay understands the context of legacy UI and generates production-ready, structured libraries.

How do I modernize a legacy COBOL or Mainframe system UI?#

Modernizing a COBOL or Mainframe system requires extracting the business logic and UI behavior without necessarily touching the fragile backend immediately. Using Replay, you can record the terminal emulator or the web-wrapped interface. Replay extracts the UI patterns and creates a modern React frontend and a Figma Design System, allowing you to build a "Modern Shell" around the legacy core.

Can Replay automate the creation of Figma libraries from any software?#

Yes, as long as the software can be displayed on a screen and recorded, Replay can analyze it. This includes web applications, desktop software (via screen capture), and even specialized industrial or medical interfaces. Replay identifies buttons, inputs, layouts, and navigation patterns to build a comprehensive Figma library and component set.

How does Replay handle undocumented legacy systems?#

Since 67% of legacy systems lack documentation, Replay acts as an "automated documentarian." By recording user workflows, Replay's AI Automation Suite reconstructs the technical specifications, component hierarchy, and design rules that were never written down. This creates a "System of Record" for the first time in the application's history.

What is the average time savings when using Replay?#

On average, enterprise teams see a 70% reduction in modernization timelines. Specifically, the manual task of documenting and recreating a single complex screen typically takes 40 hours. With Replay, this is reduced to 4 hours of automated extraction and refinement. This allows projects that would normally take 18-24 months to be completed in a fraction of the time.

---

The Future of Video-First Modernization#

As we look toward a future where AI handles the bulk of "boilerplate" coding, the role of the Enterprise Architect shifts from "builder" to "orchestrator." Tools like Replay allow architects to orchestrate the transition from legacy to modern with unprecedented precision.

By choosing to Replay automate the creation of Figma libraries and React code, you aren't just saving time; you are ensuring that the next generation of your enterprise software is built on a foundation of data, not guesswork.

Ready to modernize without rewriting from scratch? Book a pilot with Replay and see how Visual Reverse Engineering can transform your legacy systems in weeks, not years.