Design system contracts: the c... Note

Design system contracts: the component lives in neither Figma nor code

A design system exists simultaneously in design tools like Figma and in shipped code, creating a constant challenge of drift between the two. This divergence occurs when changes are made in one place but not the other, leading to inconsistencies. Traditional solutions involve prioritizing either Figma or code as the source of truth, both of which require constant updates to the secondary copy. The proposed solution introduces a third, neutral source of truth: a plain data file, often JSON or YAML, acting as a "contract" for each component. This contract describes the component's properties and options without visual or code specifics. Crucially, both the Figma components and the code are automatically generated from this single contract file. A checker tool then verifies that both the Figma and code versions accurately reflect the contract. This contract-based approach ensures that Figma and code remain synchronized, as neither can update the other directly. The urgency for this system is amplified by AI's increasing role in building interfaces. Unsupervised AI can accelerate design system drift, leading to inconsistencies and errors. However, when provided with a design system contract, AI can adhere to its rules, scoring perfectly and requiring actual changes to the contract for new functionality. This system ensures that AI-generated designs respect defined tokens and component properties, preventing errors and maintaining integrity. While the contract defines what a component is made of, more complex behaviors and creative layouts still require human input. Implementing this requires a migration process and introduces tooling for maintaining the contract, shifting governance to a review process. Teams in the middle, too small to dedicate resources to manual synchronization but large enough for significant drift, stand to benefit most from this AI-driven approach.
CdXz5zHNQW_WhiJVu4ly0.png