# Design System Contracts

A proof-of-concept tool that reads a React component library or a Figma design library into a shared, machine-readable contract, generates the other side from it, and compares both against that contract to catch drift between design and code.

Design System Contracts connects a code component library and a Figma design library through a shared contract that records what each component means: its parts, layout, design tokens, properties, content and references to other components. Starting from either a React library or a Figma library, it reads the existing structure into a contract, then uses deterministic generators to produce the other side, a native Figma component set from React or an installable React library from Figma.

Independent checks compare fresh observations of either library against the shared contract to detect drift, and changes can be resolved and applied under a defined ownership policy. The project describes itself as a candidate specification for design-system contracts as much as a tool, is implemented in TypeScript, and is explicitly in progress, with its engines and local inspection tools usable today while full end-to-end workflows are still being verified.

Website: https://ds-contracts-playground.pages.dev