Bringing truth to Figma
summary
Examines an audit workflow that turns production CSS and tokens into matching Figma assets by comparing hex values, media queries, and component props to what runs in Production and fixing mismatches; uses Peacock toolkit, Storybook, React and Sass plus testing tools and a private NPM release process; builds variant‑based notification and button masters with auto layout that mirror border radii, padding and responsive breakpoints; process is draft Figma → change request → dev release → publish Figma and yields much closer sync.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 2:15Operating Environment
- 7:46This is all amazing! There’s just one thing…
- 9:37Color Styles
- 11:22Text Styles
- 13:49Notification Component
- 18:30Button Component
- 20:43Workflow
- 22:53Guiding Principles
- 27:07Thanks and acknowledgements
related talks
36mElevate Your React Workflow with Figma
45mBridge the Gap between Design and Development
14mRethinking Designer-Developer Collaboration
34mFrom Figma to Quality Code: Code Connect + AI
16mDesign Language on Autopilot: How Figma and Code Can Automate Your Workflow
23mUsing Figma beyond and above in design teams
40mHow to optimise the workflow between designers and developers using design..
38mMastering the art of crafting code-aligned UI kits