1/10/2023 0 Comments The tokens![]() Now that you have answers to the questions “What is a design token?” and “How are they used?” it’s time to explore practices that will help you streamline the process of creating tokens. They can use design tokens in code like npm package and receive design updates without changing code. Developers have access to the latest design attributes via design system software. Last but not least, design tokens simplify the development process. For example, when you design a web version of your product, you can use HEX color value from CSS, but when you design iOS applications, you can use RGBA color format. Tokens help keep your design system values in sync across all projects, and you can format them to meet the needs of any platform. The ability to create a unified look across different platforms is another benefit of design tokens. Designers update the value centrally (in one place), and the new change applies automatically to all designs on every platform. Design tokens provide a way for designers to maintain complete control over the values in their design system. Tokens are used in place of hard-coded values and allow designers to create more flexible design solutions. In contrast to these drawbacks of hard-coded values, tokens offer various benefits to the design process. Plus, it’s relatively easy to forget to change a particular value for some element (or elements) and introduce inconsistencies in the design. However, for real projects, attributes like brand color or typography are used in dozens of different places, and it takes a lot of time to adjust the values manually. Updating a single style value in the design is not time consuming. Design language changes and evolves over time, and when a product team relies on hard-coded values, it has to manually adjust the values every time it modifies a design. There are two ways designers can work with style values-either hardcode them in the design or use tokens. However, each token is applied to a specific need for different components, such as the background color of a primary button or the color of the text in a link-style button or anchor.Illustrating the difference between a variable (blue-400) and a token (button-cta-background-color). Image caption: In this example, the $color-background-primary and $color-text-link tokens reference the $color-palette-blue-60 alias to define the color of the token. For example, if we want to change the $color-background-primary token to use orange instead of blue, we can point that token at a different alias rather than changing the alias itself. This reduces our need to “find and replace” on a large scale.Īlternatively, if we want to make a change to a design token, and not the alias, we can isolate the change to just the design token. If there’s a need to make a change to an alias and have those changes applied system-wide, we only need to change that single alias for it to propagate to everything that references it. ![]() ![]() ![]() Sometimes a token may need to use the same value as another token for example $color-background-primary uses the same hex value as $color-border-neutral, but both just reference the alias $color-palette-blue-60 to define the color.Īnother benefit of the approach is that it enables flexibility. One benefit of this approach is that tokens will reference aliases instead of hard-coded values, which reduces the need to implement duplicate values. We use aliases in Paste to help codify and systematize the desired value that can be referenced by our semantically-named design tokens. The alias + tokens approach The alias + tokens approach page anchor
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |