In her talk, Miriam gives the why, what, and how of using design systems inside your applications. She also introduces Herman, an automated design system generator she helped build.
You might have heard of the Lightning Design System by Salesforce or Vuetify. These are examples of design systems and her talk is about building your own. Design systems can include color pallets, grid systems, toolkits, pattern libraries, spacing, sizes, or even the letter M.
A design system is the integration of design and code. Both are important parts. It can be hard to create design systems with small teams but not impossible. Every client needs it’s own customized design system.
You can start with what you have, by going through apps and start taking screenshots which get organized into groups. CSSstats.com will show you all sorts of information about your CSS.
Once you know what exists, you can start to build a design system.
To start a Design System for a project Miriam gives her clients just colors to look at as a way to start, and she follows this pattern for implementation.
The first two layers in SASS would be just variables, mixins, and functions, which have no output. Scoped Styles in Vue belong at the very bottom, to target things explicitly, which should be the minority of the system.
From the SalesForce design system, you can see how classes can be applied:
Design Tokens (colors) One way we can represent colors is SCSS variables.
However, these are not meaningfully organized, encourage one-offs, and are difficult to automate. Miriam tried using SCSS maps, but they don’t allow references within the map. So she helped come up with a new syntax:
This then makes it easy to have to have multi-level design elements
Another approach to group colors is Yaml Theo, but there are tradeoffs.
Miriam uses Herman to create automated style guides.
It has a whole set of style components to display.
Miriam uses data attributes to create namespaces:
Template logic can be used as well:
Presentational components can also define meaning.
Lastly, she mentions VueDS, an open source tool for building design systems.
Keeping a design system up to date is more important than having it. Start small, make it easy, and expand. Use inline documentation so the developers don’t have to go elsewhere. Automate as much of it as possible.