Introducing Color Tokens — bringing Color Variables to your development projects
We’re taking developer handoff in Sketch one step further with a new way to sync colors — from your design system, to development, and beyond!
The design process doesn’t end with developer handoff. When design systems evolve, details change and the products you build around them need to change too. With Color Variables, we solved the issue of keeping colors in sync across your designs. Now, with Color Tokens, we’re bringing that same effortless consistency to your development projects.
Color Tokens give you an always-up-to-date set of values that match the Color Variables in your document or Library. They open a whole new world of ways to bring your designs to other tools, platforms and parts of your work.
Creating Color Tokens
You can export Color Tokens from any of your documents or Libraries with Color Variables in the web app. Right now, they’re available in two formats — CSS and JSON (using the Amazon Style Dictionary format). We’re also working with the W3C Design Tokens Community Group as they define a standard spec for JSON design tokens.
In the web app, you’ll find the option to export Color Tokens in the bottom-right corner of the Components web view, whenever you have the Color Variables tab selected. And if you’re not already familiar with the Components web view, here’s your chance to get acquainted. As well as being the home to Color Tokens, it’s where you can explore all the components in your document or Library, inspect them, and even copy CSS for styles.
Using Color Tokens in your projects
Color Tokens are available to download as a standalone file, which is ideal if you want to quickly grab the CSS and copy it straight into a simple website, for example. For more complex projects, you may want your Color Tokens to update automatically with changes you make to your Color Variables. With that in mind, we added the option to create a public URL with your Color Tokens.
Public Color Tokens URLs will update based on either your latest document or the latest starred update — the choice is yours. Either way, if an update contains changes to your Color Variables, the Color Tokens at your URL will change too.
Public URLs for Color Tokens are great for tools like Storybook — keeping your source of truth for developers up to date. That said, we don’t recommend using them directly in a production environment. For some pointers on integrating Color Tokens URLs with your development setup, check out our sample project and the Amazon Style Dictionary docs.
From design, to development — and beyond!
Whether you’re building a simple personal site and want to keep design updates simple — or you’re in charge of bringing your design system into every corner of your product — we’re sure Color Tokens can be helpful in keeping things consistent.
Color Tokens are just one of many developer handoff updates we’ve brought to Sketch recently — and we’re not stopping there. Our aim is to build a set of tools that cover you for your whole design process. From design, to developer handoff — and beyond. We can’t wait to show you what’s next.
