DESIGN TOKENS UPDATE

For more complex projects, you may want your Color Tokens to update automatically with changes you make to your Color Variables. Using Color Tokens in your projectsĬolor 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. 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. And if you’re not already familiar with the Components web view, here’s your chance to get acquainted. 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. We’re also working with the W3C Design Tokens Community Group as they define a standard spec for JSON design tokens. Right now, they’re available in two formats - CSS and JSON (using the Amazon Style Dictionary format). You can export Color Tokens from any of your documents or Libraries with Color Variables in the web app. They open a whole new world of ways to bring your designs to other tools, platforms and parts of your work. Now, with Color Tokens, we’re bringing that same effortless consistency to your development projects.Ĭolor Tokens give you an always-up-to-date set of values that match the Color Variables in your document or Library. With Color Variables, we solved the issue of keeping colors in sync across your designs. When design systems evolve, details change and the products you build around them need to change too. The design process doesn’t end with developer handoff.

Design tokens