Creating a design system that people actually use
summary
A concrete system called Stylabilla exists: a living CSS style guide backed by a Sketch file and a separate React Stylabilla component library, consumed via CDN or NPM with prefixed sb classes and semantic versioning via semantic release; contributors follow BEM, ITCSS, Stylelint and Pa11y checks; a federated team ships components into production within weeks, adoption grows across apps, consistency and collaboration improve, and automated visual regression remains a desired next step.
AI-written summary · about
chapters (23)
- 0:00Start
- 1:23What Do I Mean by a Design System Quick Primer
- 2:36Why Is It So Common that Style Guides Fail
- 3:19How To Know if Your Company Is Ready
- 11:07Does Your Design Adhere to Our Style Guide
- 14:31Css
- 18:51Living Css Style Guide
- 19:11Component Page
- 23:07Component Naming
- 31:41Broken Window Theory
- 33:06Prefixing or Your Style Guide Classes
- 33:32Semantic Versioning
- 34:53Cross-Platform Design Consistency
- 35:12Design Primitives
- 35:52Documentation Tooling
- 37:57Visual Regression Testing
- 39:02Automation
- 40:27Design System Manager
- 42:14How Do You Deal with Updates in Your Design Systems Do You Update Your Sketch File
- 43:00How Do You Deal with Implementing the New Design System Css Next to the Old Css Base Existing Classes-New Classes without Having a Big Bang Implementation
- 46:11Pattern Libraries
- 47:20Is There a Way To Work Out the Value of a Design System Pre or Post Creation
- 48:09Lint Configuration
related talks
29mCreating a Design System that People Actually Use
25mBuilding a Design System as a team
38mEmpathetic Design Systems
35mDesign system - From a Developer Point-of-View
20mDesign Systems for the Rest of Us
58mFrom nothing to state of the art
42mThe Dream of Styleguide Driven Development
19mHarnessing React to Build Consistently Designed Applications