Josh Goldberg

Camp Counselor

Design Systems: Maximum Consistency, Minimum Effort

Event Logo

Monday, January 16, 2023 - 4:30 PM UTC, for 1 hour.

AT THAT (In-Person Only) Regular, 60 minute presentation

Room: Campsite 4

frontend
design system
atomic design

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
favorited by:
Caleb Jenkins Clark Sell