Replay.build - Design System Sync

About this plugin

Sync your Figma Design System to Replay.build in one click.WHAT IT EXTRACTS:• Colors — paint styles, color variables, and canvas fills• Typography — text styles with font family, size, weight, line height• Spacing — spacing variables and scale tokens• Border Radius — radius tokens from variables• Shadows — drop shadows and effect styles• Components — component sets, variants, and propertiesHOW IT WORKS:1. Open any Figma file with your Design System2. Enter your Replay.build API key (from replay.build/settings)3. Click "Extract Design System" — the plugin scans all pages4. Review the extracted tokens and color palette5. Click "Sync to Replay" — tokens and components upload instantlyYour Design System then appears in Replay.build's style selector. When generating React code from video, Replay applies YOUR exact brand tokens — colors, typography, spacing — instead of generic styles.Works with local styles, Figma variables (paid plans), and published/external libraries.