One perspective on the "source of truth" question for digital product teams is that Truth is represented by the codebase of the product itself. Over time, alignment between the details of what design teams have in Figma and what development teams have in code can drift apart. This talk covers methods for auditing the codebase of a product in order to create Styles and Components in Figma that most closely match the Truth of the UI components your real users interact with in Production. Learn how to match type Styles to CSS, how Auto Layout can be used to replicate various CSS layout properties, and how Variants can be used to mirror the behavior of real React components. This will all be illustrated with real world examples of how the Peacock Design team reviewed our CSS and React components in Storybook in order to closely match their fundamental properties with companion Styles and Components in Figma.
Stories about the challenges, obstacles, and difficult moments that ultimately make products better.