On Creating a Design System - Course Required
Hey guys i was looking for a good course to learn how to create design systems in css, specifically using creating reusable tokens and the various abstraction layers one may need in order to create a design system, and themes using that design system.
I saw beyond CSS might be offering the information needed, but it seems like only the 4th module actually touches the subject which is important to me.
It might stem from naivety but my general idea was to have a two step solution to solve my problems:
1. Create a design system, IE: two foreground colors plus a background color, and their lower intensity variations. - Tokens.css or something similar. (maybe even something line dual-chrome-tokens.css, to signify it is a two color scheme and any theme can be written to support such a scheme)
2. Make a theme out of the system - IE apply styles to buttons, paragraphs, etc. - theme.css: consumes tokens.css
(3. NOT Directly relevant but might help - adding effect classes for composed effects such as advanced animations or other things.)
This way I can switch the base colors/other attributes to change the pallet, or alternatively change the theme completely in but keep color pallet the same - a theme will include animations for example.
So my main question is, which course should i take that would teach me the concepts i would need to achieve the above. I would like to keep it to css only if possible (using svelte), but will use other preprocessors if necessary (ie applying composed classes for effects to an element through css, instead of bloating the class declaration)
Thanks for your responses. And I hope i managed to remain clear, even though i might have showed my inexperience in my questions above.
[PS I was trying to see if there are sane systems out there that would allow sane style customization through css alone. But couldn't find a non-bloated solution.]
5 Replies
This one just launched last month, I think. From some of the best minds in front-end design systems:
https://designtokenscourse.com/
Subatomic: The Complete Guide To Design Tokens
An in-depth course on design tokens: concepts, Figma Variables, code, processes, best practices, and more.
I heard about it from the Shop Talk Show podcast, and they have a 20% off coupon: SHOPTALKSHOWISAWESOME
-# Not sure if it's still valid, though
Or read the book they wrote before this course:
https://atomicdesign.bradfrost.com/table-of-contents/
I was going to recommend that one as well. It is pricey, but not many more qualified people to teach about design systems, plus Brad's a good teacher to boot.
Need to see if I can't get a coupon code for my audience 😄
Thank you guys for the suggestion. I would have enrolled for that course but I think hundreds of dollars is a bit of an overkill for me right now.
Right now I started off with the basics i saw in the in the space agency scrimba course, it is enough to get me started for my basic initial needs. And i add scss for extends for utility classes.
I might buy their book to draw a bit of inspiration from. If ever I need to design something more complex and I get stuck, then I will consider the pricey course.
Ps. Thank you Kevin for creating such high quality videos and courses, you really are a GOATed teacher.
https://learnui.design is a good place to learn some basics. Not design systems per sé, but good overall layout learning
Learn UI Design
The full-length online course on UI design: color, typography, layout, design process, and more. Includes downloadable resources, homework, and a student community.