Design tokens cheatsheet A Design Systems strength comes from by Oscar Gonzalez, WAS UX Collective

Table Of Content

• Creating a Design System. Part 2— Design system based on tokens.
• A Single Source of Truth With UXPin Merge
• Common *Tokens*
• How to define a design token structure
• California National Parks Magnetic Token Bundle - packaged in a custom laser cut cardboard holder
• From Figma to code with the Figma Tokens plugin
• Standard, where are you?

The usefulness of tokens really becomes apparent when you start moving through the levels. Design tokens can be exported in various formats, such as JSON or YAML, and integrated into development workflows and tools. This makes it easy for developers to access and use the tokens in their code, ensuring consistency and reducing the risk of errors.

Creating a Design System. Part 2— Design system based on tokens.

Because they incorporate design decisions and conveys an intent of use. This eliminates a lot of time looking up specs and creates a universal element that can be adjusted across the design as well. Design tokens are platform-agnostic, meaning that you have created a common design language that can be deployed anywhere without having to make platform-specific adjustments. Specifications are universal between devices and platforms and implementations.

A Single Source of Truth With UXPin Merge

For more on how our spacing system, and how to use space in your designs, see our spacing foundation. There are dedicated color tokens for text, links, icons, backgrounds, borders, blankets, charts, and skeleton loaders. Use these examples to get a better understanding of how different tokens work. Every tone value between 0 and 100 expresses the amount of light present in color. The 100 tone is always 100% white, the lightest tone in the range; the 0 tone is 100% black, the darkest tone in the range. However, you can use a different logic, as long as others will understand it too.

Common *Tokens*

If we wanted to create a design token for a primary active button using this structure, it might look like color_background_button_primary_active or perhaps shortened color-bg-btn-primary-active. This token will contain every type of color code necessary for cross-platform implementation. In a 2014 article published in Salesforce Designer, Salesforce UX VP Sönke Rohde described how the company uses design tokens to apply the same design principles across multiple platforms and software. Instead of using these static properties, designers and engineers reference a token like “uxpin.cta.primary,” representing all four color codes. The color will always be the same regardless of the platform or programming language.

Penpot Introduces Innovative New Design Collaboration Tools and Partners with Tokens Studio to Build an AI Engine ... - Yahoo Finance

Penpot Introduces Innovative New Design Collaboration Tools and Partners with Tokens Studio to Build an AI Engine ....

Posted: Thu, 29 Jun 2023 07:00:00 GMT [source]

Please note that all projects are relying on the same shared resources like data, themes and design tokens of course. Check out the intro article before diving in one of the guides. Design tokens are the perfect tool for coordinating colors in your design systems, but they might seem puzzling to some designers. If you want to create functional and practical design systems, you must familiarize yourself with a highly beneficial concept called design tokens. It gives the designers the long-awaited responsibility and the control to define the actual styles that go in the developed products — while being in their natural habitat of Figma.

These comprehensive guides will help you to better make a selection of framework, as well as they will make the integration process as smooth as possible. Another huge advantage of tokens is their ability to efficiently create various visual styles. Understand how to use design tokens when applying our foundations in your designs.

Consolidating design decisions is a critical, but difficult, part of creating semantic tokens. At this level, we can define the semantic tokens more broadly to reduce the number of tokens needed, making the system easier to maintain and evolve as we continue scaling. The best way to figure out what model works for your teams is to start from a simple system and evolve it based on the feedback and needs of the product teams who use the design system. Gall’s law is important to reflect on and something we believe to be a core guiding principle for successful design systems.

If teams need to add platform-specific properties, they simply update the design token. Design tokens are most beneficial for creating a single source of truth–which is what drove Salesforce to start using them. Everyone must speak the same design language when multiple product teams, engineers, and UX designers work on the same product. Designers should use design tokens to create more consistent implementation of work when it goes to development. Tokens also help manage and maintain design decisions through deployment and ensure that every instance of the design is consistent. Design tokens make the language between designers, developers, and product engineers a little bit easier to understand.

Without looking at the documentation or the value, both designer and developer can tell it is a color token, meant to be used on the background of containers like cards or sections, for example. It also communicates that there might be different variants that convey hierarchy, and it also communicates that it is targeting a specific state of that surface. Component tokens communicate not only the targeted properties but also their states. A Design System’s strength comes from knowing how and when to apply options (like purple-40 or color-warning) correctly to contexts (like backgrounds or typography). This grounds the option as a design decision or what is known as a Design Token in System Design. Also, these platforms are surely going to change and evolve over time.

And at Zeta’s DS for web enterprise products, we’ve embraced the power of design tokens since its inception. Merge components have the same fidelity and functionality as those in the repository. The design system team can use React props (or Args for our Storybook integration) to restrict changes or provide designers with the flexibility to make design decisions.

Or, if you are comfortable coding, use the .json tab and bulk edit all the tokens. The solution is to use abstract names based on tonal values and then combine them with semantic, component-specific tokens (remember the cat above 😅). When the standard is published, it will allow other tools to communicate in the same “language.” Imagine taking colors from the Figma Tokens plugin and plugging them into Adobe Illustrator or Pitch. 😅If you want to learn more about the standard, you can visit the Official Design Tokens Community Group. No matter what, we need a standard if we want to adopt design tokens in multiple apps.

Now to make it all work designers, developers, and team leaders have to come to an agreement on what design elements should be tokens, how they will be used, and how they will be named. How this works in practice is different every time, but requires collaborative discussion on the path to success. The key to design tokens is that they facilitate cross-disciplinary collaboration. More people on a team can understand and use design values without specificity, but with accuracy. In a post from earlier this year, Pavel Laptev shows us how to make these design tokens in Figma and, by using their API, abstract those values out of design mockups and use them in a codebase.

Invoking DesignToken.registerRoot() will cause CSS custom properties to be emitted for the entire document. A root element can also be provided so that CSS custom properties are scoped to that root. The FAST Design Token implementation is designed to provide first-class support for Design Tokens and make setting, getting, and using Design Tokens simple. It doesn’t matter which design tool you use, most likely it will be Figma. Nevertheless, the scheme will work even with the Chinese Pixso.

JSON file the only source of truth and you get a consistent design on all platforms. We use the open-source Figma Tokens plugin (aka Tokens Studio for Figma) to create the tokens. Which are then imported in Figma as styles and exported to GitHub as JSON (the plugin auto-converts the tokens to JSON). From GitHub, the tokens JSON is parsed via Style Dictionary with a couple of native and an in-house transformer to create CSS variables.