Get the entire course for $9.99

Architecting Design Systems

A practical deep dive into building, scaling and maintaining high-quality design systems for software engineers.

  • Clients 01
  • Clients 02
  • Clients 02
  • Clients 02
  • Clients 02
  • Clients 03
  • Clients 04
  • Clients 05
More than the perfect course on engineering for design systems. A practical toolkit for the modern frontend engineer.
avatar of the course instructor

Hello! My name is Kati Frantz, and I'm a software engineer with over 60,000+ students on Udemy and an average course rating of 4.6 / 5. I've worked for tons of amazing companies and helped them craft scalable design systems.

I'm also the guy behind the free React testing masterclass and the Deploying node.js book.

Thank you very much for checking out this course page.

When I started with design systems 4 years ago, there were many great blog posts and resources to get started, but they were never complete.

When I start building the design system, I run into so many unexplainable issues. There is so much that goes into building a design system that is maintainable and scalable.

What does this course cover?

This course contains a ton. It is a must-have for every frontend engineer. Here's a list of some of the concepts we cover:

  • Atomic design principles
  • Writing scalable and maintainable CSS (SCSS)
  • Write customisable and modular CSS
  • Monorepositories and yarn workspaces
  • Delivering CSS as an external package
  • Structure a codebase to respect atomic design principles
  • Writing scripts for building and automating common frontend tasks
  • Creating npm packages with Typescript
  • Create React.js component libraries
  • Accessible custom components for design systems
  • Rollup, Babel, and Typescript for compilation and bundling
  • Storybook for component documentation
  • Best practices for team collaboration
  • Style guides and linters
  • System documentation with MDX
  • Publishing packages to npm
  • Automated documentation and storybook deployments with netlify

There's so much more we cover in this course. It is highly practical, and you'll have tons of assignments and projects to do to master the concepts you learn.

Who is this course for?

This course is made for almost anyone looking to get stronger at common frontend technologies. This isn't an introduction to frontend development, but I have a whole section dedicated to leveling the plane.

Refund policy?

I offer a 100% money-back guarantee if you feel this course is not a good fit. Just shoot me an email. No questions asked. You are fully protected!

What you'll learn πŸ“š

Module 1: Introducing design systems πŸ‘‡
  • Design systems
  • Popular design systems
  • Atomic Design
  • The course project
  • How to submit assignments / Questions /
Module 2: Css Architecture πŸ‘‡
  • Css architecture checklist
  • Setup folder and file structure
  • Define system variables
  • Assignment design system variables
  • Define foundation colors
  • Assignment define foundation colors
  • Define foundation typography
  • Assignment define foundation typography
  • Define mixins
  • Assignment spacing mixins
  • Global root and css reset
  • Add stylelint and prettier
  • Setup husky pre commit hooks
  • Compile scss to css
  • Compile components to css
Module 3: React for design systems πŸ‘‡
  • Add react package to mono repository
  • Add rollup to compile react
  • Setup a react playground
  • Setup dev script for all packages
  • Identify atoms molecules organisms
  • Assignment identify atoms molecules organisms
  • Develop the color component
  • Dynamically generate utility classes
  • Assignment create image atom
  • Extract the foundation to a separate package
  • Spacing component
  • The select molecule
  • Styles for the select molecule
  • Calculate overlay position
  • Style the select option
  • Selected state of options
  • Animate select caret
  • Render props for custom option
Module 5: Mono repositories with lerna and yarn workspaces πŸ‘‡
  • Setup mono repository architecture
Module 5: Component accessibility πŸ‘‡
  • Expanded and popup aria attributes
  • Control menu items with keyboard
  • Accessible keyboard navigation
Module 6: Unit testingπŸ‘‡
  • Setup babel and Jest
  • Assignment - Component test cases
  • Tests for custom select component
  • Tests for system foundations
Module 7: Storybook with react πŸ‘‡
  • Setup storybook
  • Display component variants
  • Addon knobs
  • Addon Accessibility
  • Regression tests with Chromatic
Module 8: Publish to npm πŸ‘‡
  • Publish to npm with lerna
  • Control published files
  • Conventional commits
  • Commit lints
  • Generate changelogs with lerna
Module 9: CI / CD with Github actionsπŸ‘‡
  • Setup github actions workflow
  • Fix build issues on CI
  • Chromatic with github actions
  • Deploy storybook to netlify

What some nice folks have said about this course πŸ—£οΈ

image of vanessa ating

I'm just 15 videos in, and I can't recommend this course enough! Kati has completely changed the way I develop and structure components and CSS.

image of damilare

Another great course by Kati. Thus far I am loving this in-depth look at design systems. Highly recommended if you want to improve accross all areas of frontend engineering.

image of phebian Chukwurah

For every minute of video I watch, I learn a new pattern, shiny package, or a best practice to a common anti-pattern. Easily the best value I've gotten from a course this year.

Get the Design Systems Course

What’s included πŸ‘‡
  • Get all 10 modules of the course
  • Stream on any device
  • Source code for every lesson
  • Access to all assignments / Solutions
  • Deployments, npm packages, testing
  • Github actions module / CI / CD
  • Unlimited updates / Never expires
  • Unlimited discussions with me on Github
  • 30 days money back guarantee. No questions asked !

Frequently asked questions

Do these videos expire?
No they don't. On the contrary, this course will keep getting fresh content at least 4 times a year. All for free after a one-time purchase.
What happens once I purchase ?
I generate a premium license and send to your email. Then you'll be able to use that license to get full, instant access to the course content.
Do you offer any discounts ?
Yes, I do. If you are a student or under 18, you get all my premium content for free. If this course is too expensive for you, please let me know too. shoot me an email..
What is your refund policy ?
If you're not happy with your purchase within 30 days of purchase, send me an email, and you get a full, instant refund no questions asked !.
Do you have other courses ?
Sure, I do. I have a lot of free content you can checkout on my website and I share very valuable content to my newsletter.
I have more questions
No problem ! You can ask me about anything. Shoot me an email, or send me a direct message on Twitter !