Services like Brand.ai provide a great way to bootstrap your process. You can start building out a functional design systems engineering process fast. It provides a easy to use web interface for managing colors, fonts and graphic assets.
One of its most interesting features is that it can generate a variety of files to use your color tokens in, including Sass.
Here is an example of the export screen.
This means you can output specific token files that can be used in you Sass build process for the web. You can also load it via JSON for your front-end framework. You can also create a set of imports for your current (or future) iOS and Android apps.
Here is a quick link to the repo.
Tomorrow I will discuss some of the benefits of using a system like this on your own project.
Did you enjoy this post?
My name is James Stone and I am a Senior Software Developer at Futurice in Helsinki, Finland. I typically give talks and write about Design Systems (especially with React), React, TypeScript and how to become a better developer. If you would like for me to send you an email every time I publish a new article or talk, please join my email list. I also will occasiounally send out some secret list only information or offers. I expect the frequency to be about one or two times per week.