Designing a Design System
summary
A Swift CLI named Prism reads Zeplin style guides via the Zeplin API, applies Stencil-style templates and generates platform-specific code (iOS color enums, Android colors.xml/styles.xml, Web HTML or JSON). It runs in CI (Bitrise) to open automated PRs across repos, so a seven-engineer mobile team and two designers sync tokens from one source of truth and push changes without manual edits. The system ships icons and components too, cuts repetitive work, and reports saved hours and far fewer handoff bugs.
AI-written summary · about
chapters (22)
- 0:00Introduction and speaker background
- 1:12Why platform agnostic design systems
- 2:36Problems with design-development sync
- 5:25Defining a design system
- 6:08Goals for the design system
- 6:49Zeplin as single source of truth
- 8:12Challenges with code generation
- 9:15Building the Prism tool
- 11:01Introducing template-based generation
- 12:47Android code generation with templates
- 13:49Handling naming conventions
- 14:10Synchronized text styles across platforms
- 14:52Generating web style guides
- 15:35Reviewing design system goals
- 16:18Automating code generation with CI
- 17:41Designer-friendly automation workflow
- 18:22Pull requests and Slack notifications
- 19:06Impact and benefits of Prism
- 19:27Future of Prism and component generation
- 20:12Live demo of Prism
- 23:41Key takeaways and closing remarks
- 24:43Q&A session
