Awesome component-driven development

A curated list of links on component-driven development and design systems

Contents

• Articles
  • Components
    • React
  • Development tools
  • Styles
  • Testing
  • Design systems
  • Design
  • Whitespace
  • Color
  • Typography
  • Design tools
  • Misc
• Talks
• Books
• Courses
• Tools
  • Development workbenches
  • Misc
• Libraries and components
  • React
  • Styles
• Design system examples
  • Design system catalogs
• Misc
• Contributing
• Authors and license

Articles

Components

• Cards and Composability in Design Systems
• Component Based Design System With Styled-System
• Defining Component APIs in React
• Designing Button States
• Handling spacing in a UI component library
• Hidden in plain site — the levels of component reuse. The path to portability for UI components
• Managing Heading Levels In Design Systems

React

• Patterns for Style Composition in React
• Presentational and Container Components
• The Three Tenets of Styled System

Development tools

• Component-Driven Development
• Prefabricated components. The case for building UI components in isolation
• React Storybook: Develop Beautiful User Interfaces with Ease
• Storybook vs Styleguidist. A comparison of the top UI component explorers
• UI component explorers — your new favorite tool
• Using React within a Design System

Styles

• Creating truly universal React component systems. Announcing styled-components/primitives
• Designer-Oriented Styles
• Styling themes
• React SSR pitfalls in building adaptive layouts

Testing

• Visual Testing — the pragmatic way to test UIs

Design systems

• 4 Things I Know About Pattern Libraries
• Building a React Component Library
• Conducting an Interface Inventory
• Creating A Living Style Guide: A Case Study
• Design Systems Sprint 0: The Silver Bullet of Product Development
• Design systems, style guides, pattern libraries. What the hell is the difference?
• Designing Imaginative Style Guides
• From Pages to Patterns: An Exercise for Everyone
• How and why we built the Marvel Styleguide
• How to construct a design system. Tips for designing and building a consistent design system
• Interface Inventory
• Setup a design system. Build a system that provides a unified set of UX, design rules and patterns
• Taking The Pattern Library To The Next Level
• Tokens in Design Systems: 10 Tips to Architect & Implement Design Decisions for Everyone
• UI Component Playbook. A 5-step guide to designing and engineering frontends with components

Design

• Dark Patterns are designed to trick you (and they’re all over the Web)
• Design System Grammar

Whitespace

• 8-Point Grid: Borders And Layouts
• Framework for creating a predictable & harmonious spacing system for faster design-dev handoff
• Intro to The 8-Point Grid System
• More Padding, Please! The power of white space in product design
• Role of White Space in User Interface Design
• Space in Design Systems. From Basics to Expanded Concepts to Apply Space with Intent
• Whitespace
• Why White Space Is Crucial To UX Design

Color

• 10 Reasons to Use Color
• Polishing GitLab’s UI: A new color system
• Re-approaching Color
• The Science of Color Contrast — An Expert Designer’s Guide
• Designing accessible color systems

Typography

• Creating a type style guide
• Deep Dive on Typescales
• Framework to create an accessible & harmonious typography system for faster design-dev handoff
• Typographic scale
• Typography in Design Systems

Design tools

• Component architecture in Figma
• Creating and Maintaining the Marvel Style Guide in Sketch
• Evolution of Tools. Closing the loop with Design Intelligence
• How to create a Design System in Sketch
• Painting with Code. Introducing our new open source library React Sketch.app
• Sketching in the Browser

Misc

• Pure UI
• Sketching Interfaces. Generating code from low fidelity wireframes
• Turning Design Mockups Into Code With Deep Learning
• Vue Design System
• Why designers and frond-end developers should talk more often

Talks

• Build Beautiful Interfaces Faster by Dominic Nguyen and Zhenya Savchenko (2016)
• Custom CSS is the path to inconsistent UI by Artem Sapegin (React Alicante 2017)
• Designing With React by Kristin Baumann (React Day Berlin 2017)
• Dream of Styleguide Driven Development by Sara Vieira (React Alicante 2017)
• Modular CSS by Andrey Okonetchnikov (React Alicante 2017)
• Nathan Curtis on Buttons in Design Systems
• Sketching in the Browser by Mark Dalgleish (JSHeroes 2018)

Books

• Atomic Design by Brad Frost
• Design Systems: A practical guide to creating design languages for digital products by Alla Kholmatova
• Design Systems Handbook by InVision
• Elements of Typographic Style by Robert Bringhurst
• Front-end Style Guides: Creating and Maintaining Style Guides for Websites by Anna Debenham
• Frontend Architecture for Design Systems: A Modern Blueprint for Scalable and Sustainable Websites by Micah Godbolt
• Inclusive Components by Heydon Pickering
• On Web Typography by Jason Santa Maria

Courses

• Advanced React Component Patterns

Tools

Development workbenches

• Bit - A tool for isolating, developing and sharing components between projects and applications, with 2-way collaboartion over components.
• React Cosmos
• React Styleguidist — isolated React component development environment with a living style guide
• Storybook

Misc

• Cupper — documentation builder for inclusive designers
• Theo — generate design tokens for web, iOS and Android from single source
• ColorBox - a new way to building color systems for accessible UIs that scale
• Color - Color palette generator with aria and other interesting features

Libraries and components

React

• Atomic layout — a single component to distribute a spacial relation in your layouts
• macro-components — create flexible layout and composite UI components without the need to define arbitrary custom props
• React Group — render React children with a separator
• React Spaceman — React component to manage whitespace
• Rebass — Flexible & functional React design system, built with styled-system
• Rebass Grid — responsive React grid system built with styled-components
• Reach UI — accessible foundation of your React-based design system
• Stack Styled — make stack layouts easy

Styles

• styled-tools — useful interpolated functions for styled-components and other CSS in JS libraries
• styled-system — design system utilities for styled-components and other CSS in JS libraries

Colors

• coloralgorithm – Javacript function to produce color sets

Design system examples

• Alfa Bank
• Ant Design
• Aragon UI
• Audi
• Auth0 Design System
• Backpack by Skyscanner
• Carbon Design System by IBM
• Circuit UI by SumUp
• cf-design by Cloudflare
• Lightning Design System
• Marvel
• Material Design
• Office UI Fabric
• Pivotal UI
• Pluralsight Design System
• Polaris by Shopify
• Priceline One
• Seek Style Guide
• Semantic UI
• Vue Design System
• Elastic UI framework

Design system catalogs

• Adele
• Awesome Design Systems

Misc

• Dark Patterns
• Design Systems newsletter
• React Components Catalog — curated list of great React components
• User Interface Design Patterns
• Type Scale — a visual type scale calculator
• Website Style Guide Resources

Contributing

Suggestions are welcome: send a pull request if you find something awesome about component-driven development.

Authors and license

• Andrey Okonetchnikov, a frontend engineer and UI & UX designer from Russia living in Vienna, Austria.
• Artem Sapegin, a frontend developer at Wayfair and the creator of React Styleguidist. He also writes about frontend at his blog.

CC0 1.0 Universal license, see the included License.md file.