Design Systems 2.0: When Code Becomes the Shared Source of Truth
1. Multiple sources of truth lead to recurring inconsistencies
When the same rules are maintained separately in Figma files, documentation, and code, every change requires reconciliation.
- A value changed in design may be missing from implementation, or a behavior updated in code may never reach the documentation.
- Adding AI to this structure leaves the burden of synchronizing multiple copies intact. Referencing conflicting definitions can make inconsistencies worse.
2. Designers and developers work on the same code
Make running code the single source of truth and connect visual editing with code editing.
- Designers refine interfaces with AI on a visual canvas in the browser, while developers review and modify the underlying code.
- Changes from both activities land in the same source, connecting exploration with implementation.
- AI also reads and modifies the actual components and rules, reducing the need to guess at differences between design files and implementation.
3. Connect principles to continuous operation in four stages
Code-centered collaboration requires both design principles and a technical foundation.
- ① Define the system with AI
- Make product context, brand direction, information density, motion, and accessibility requirements explicit. AI helps uncover contradictions and alternatives, while the team makes the final decisions.
- ② Build the engineering foundation
- Establish tokens, themes, versioning, and distribution. Generate documentation from the same source as the shipped code so AI can read the latest rules.
- ③ Design on top of the foundation
- Designers explore components, patterns, and edge cases with AI within the established rules. Visual changes flow into code that developers can review and test.
- ④ Keep improving the same source
- Update code, documentation, and guidelines together as the product evolves. A connected toolchain and operating practices must support this process.
