Design Systems: Maximum Consistency, Minimum Effort
Monday, January 16, 2023 - 4:30 PM UTC, for 1 hour.
Regular, 60 minute presentation
Room: Campsite 4
I'd like to cover three main areas of design systems: * Technical design principles for design system comprehension: atomic design, simple APIs, and as open source as you can make it * Passive knowledge sharing with good documentation, TypeScript, and a live demo site * Active knowledge sharing with pairings, code reviews, and technical talks As a talk driver, I'll start with some basic site designs and build up a design system for them through the talk. Roughly in order: 1. Primitives: colors, spacing, typography 2. Atom components: buttons, inputs, headings, text 3. Molecule components: form groups, dropdowns, lists 4. Organism components: header, footer, forms
Prerequisites
For designers: none For developers: rudimentary frontend experience
Take Aways
- Learn what Atomic Design is and how it captures intent of designs
- How to break designs down into their atomic components
- Passive knowledge sharing techniques for a design system, such as TypeScript
- Active knowledge sharing techniques for a design system, such as pairings