I'm interested in design systems, and I am doing a bit of research on the topic. I've decided to start with Design Tokens.
Here's a list of all the resources I've found along the way, with some notes. I'll probably keep this list updated for some time, so this can be considered a living post.
I might publish some articles in the future with notes and conclusions from my research.
If you want to stay in the loop, follow me on Twitter: @daniguardio_la
Design Tokens specifications.
|Design Tokens W3C Community Group||W3C|
|System UI spec||System UI|
Stuff that's related in some way to Design Tokens.
Other related collections (similar to this one).
General purpose design systems.
Design systems specific to projects or organizations.
|Lightning Design System||Salesforce|
|Storybook Design System||Storybook|
|USWDS||US federal government|
Real world implementations of Design Tokens.
|Lightning Component Framework (Design Tokens)||Design Tokens in Salesforce's UI framework (Aura).||Salesforce|
|Primer CSS||GitHub's CSS.||GitHub|
Tools and platforms that involve a variety of features (hard to classify).
|Interplay||"Superpowers for design systems".|
|Design System Kit||"A workbench for collaboratively creating Design Systems".|
|Pattern Lab||"A frontend workshop environment that helps you build, view, test, and showcase your design system's UI components".|
|Diez||"Developer toolkit for expressing visual styles that can be shared across codebases, native platforms, and teams".|
Tools for designing and prototyping UI.
|InVision Design System Manager||"Connects design and code."|
Tools to use Design Tokens in real projects.
|Styled System||Responsive, theme-based style props for building design systems with React.|
|Material UI's system (v5 alpha)||Provides low-level utility functions called "style functions" for building powerful design systems.||Material UI|
|Material UI's theming (v5 alpha)||Theme customization in Material UI.||Material UI|
Plugins or extensions to third-party tools.
|Cabana||Sketch||A Design System Sketch plugin.|
|Storybook Design Token Addon||Storybook||Adds Design Tokens documentation to Storybook.|
Tools for design workflows, documentation and design asset management. Most allow managing Design Tokens, some can export or generate usable resources for development.
|Frontify (style guide)||WYSIWYG, generators.|
|Catalog||Markdown based, live components.|
|zeroheight||WYSIWYG, deep code integration, generators.|
|Abstract||TODO, I'll look into it when Notebooks Free is released.|
Tools for Design Tokens management.
|Specify||"One Design API, for all your design system tools".|
|Design System Manager (DSM)||"Design, Prototype, Document and Development Platform."|
Tools for transforming and handling Design Tokens data.
|Theo||"Abstraction for transforming and formatting Design Tokens".||Salesforce|
|Style Dictionary||"Build system that allows you to define styles once, in a way for any platform or language to consume".||Amazon|
CSS tools that implement Design Tokens or similar functionality.
|Tailwind CSS||Utility classes.|
|daisy UI||Themable Tailwind CSS Components.|
A selection of interesting articles about Design Tokens.
- Living Design System - by Sönke Rohde, Salesforce's VP of UX R&D.
- Tokens in Design Systems - by Nathan Curtis, founder of eightshapes.
- Naming Tokens in Design Systems - by Nathan Curtis, founder of eightshapes.
- The themes are always changing, but the tokens stay the same - by Kyle Gach, Mineral UI.
Learning resources for working with Design Tokens.
- Design Systems for Developers - by Storybook.