How to optimise the workflow between designers and developers using design..
summary
A reproducible workflow connects Figma design tokens to a Storybook design system and then to Drupal via a theme and Paragraphs so editors drop prebuilt pieces into pages. Foundations, atoms/molecules/organisms and page regions live in a template repo; developers implement the same parts as Lit web components (TypeScript + Tailwind) and publish them as libraries that Twig attaches on demand. Team agreement and small validation meetings keep templates in sync; the flow already drives the company site relaunch and yields faster, consistent builds.
AI-written summary · about
chapters (10)
- 0:00Introduction and team
- 1:53Problems between designers and developers
- 7:28Proposed solution with templates
- 9:41Template structure explained
- 14:41Designers using templates in workflow
- 20:38Agreement phase between teams
- 24:20Development process with templates
- 28:17Tools and design system setup
- 35:17Key factors for success
- 36:56Q&A session
related talks
14mRethinking Designer-Developer Collaboration
45mBridge the Gap between Design and Development
15mModern Approach to Designer ❤️ Developer Collaboration
23mHow to create Figma design loved by developers
33mA Modern Designer's Workflow
36mElevate Your React Workflow with Figma
34mDesigners, Developers, Let’s Create the Difference!
51mThe Power of Design Systems