Table of contents
Introduction
Foundations of Design Systems
- What is a design system?
- Why design systems matter
- Drawbacks of design systems
- Team structure
- Who are design systems for?
- A practical example
- Three pillars of design systems
- Building a design system
- Design system checklist
- Common mistakes
Foundations of Design
- Color
- Color types
- Color palettes
- Color terminology
- Color semantics
- Color values
- Creating a color palette
- Typography
- Font types
- Font measurements
- Typescale
- Other areas of design
Designing Components With Figma
Developing Styled Components
- How we apply CSS
- CSS specificity
- Problems with CSS
- CSS naming architectures
- CSS pre-processors
- CSS in JS
- Application setup
- Integrating styled components
- Button activity exercise
- Button activity solution
- Adding utilities
- Creating a theme
- Adding global styles
- Adding state exercise
- Adding state solution
- Button variations exercise
- Button variations solution
- Making extensible themes
- Using extensible themes
- Modal exercise
- Modal exercise solution
Animating Components With React Spring
- Micro-interactions
- Tips for creating micro-interactions
- Use spring exercise
- Use spring exercise solution
- Use transition exercise
- Use transition exercise solution
- Animating our modal exercise
- Animating our modal exercise solution
Documenting Components With Storybook
- Documenting components with Storybook
- Using addons
- Using themes
- Actions
- Knobs
- Modal documentation exercise
- Modal documentation exercise solution
- Accessibility
- Customizing Storybook
- Deploying Storybook
