Developer shares lessons from building a synced Figma-React design system

A developer building a design system called Skrewww documented key lessons learned while keeping a Figma library and React implementation in sync. The core challenge was not creating more components, but determining what information is canonical, what can be auto-generated, and what still requires human design judgment. The developer found that bundling all component data — props, tokens, documentation, and metadata — into a single definition created drift risks similar to those in code. To address this, the system was restructured into separate layers: one for mechanically verifiable facts and another for design intent and usage guidance. This separation feeds into a pipeline that generates registry metadata, agent contracts, and documentation projections from canonical component sources.