Collaborative PWA Storefront Design with XD
summary
Demo shows designers using the PWA Studio XD Kit inside Adobe XD to skin Venia pages: shared libraries apply brand colors and fonts across desktop and mobile, repeating grid and asset drop replace 12 product images and names in seconds, and prototype links export downloadable assets for developers. Developers load a tailwind preset into the scaffolded app to change brand tokens, plus an extension API targets selectors for per-component overrides; prototypes update live.
AI-written summary · about
chapters (19)
- 0:00Start
- 0:31Mission and Focus for Pwa Studio
- 0:56Collaboration
- 2:01Pwa Studio Ui Kit for Xd
- 6:37Libraries
- 9:11Stacks
- 11:23Alignment Tools
- 13:12Preview
- 13:47Header
- 14:52Repeating Grid
- 15:19Filtering
- 18:18Design Review Mode
- 18:35Development Download Assets
- 20:58Tailwind
- 21:52Theme Inheritance
- 23:37Tailwind Config
- 26:19Adding an Extension Api
- 27:44Ui Kit
- 28:16Ui Kit Themes
related talks
14mBridging the Designer-Developer Gap, PWA Edition
45mReal World Designing and Prototyping
15mModern Approach to Designer ❤️ Developer Collaboration
33mA Modern Designer's Workflow
25mBulding (Progressive) Web Apps
30mPWA with PWF
35mDesigning Great Progressive Web Apps
37mProgressive Web Apps and the Evolution of the Web