![]() ![]() Looks impressive, yet why shift from hard-coded values to design tokens? Thus, it is easily transformed everywhere it’s used, following the scheme in vice versa: design decision-design token-component-interface-feature (on all platforms and frameworks). Then, if you want to alter your color to Very Peri #6667AB since trends have changed and apply this primary color for different environments together, you can do it simply by changing the value to #6667AB. Here, the most important thing is that design tokens are dynamic, not static values. And if you break your digital product, you can see the following pattern ‒ feature-interface-component-design token. The design token will be lor = #939597, where “lor” stands for the name, while “#939597” represents its value. ![]() ![]() Let’s say your brand’s primary color is Ultimate Gray #939597 (color of the 2021 year by Pantone ). How is that?Įach token is given a name that refers to a certain design decision and the defined value. They’re used instead of hard-coded values, and they are capable of being converted to any format ‒ be it website, web application, or iOS application. So, what are design tokens? Basically, design tokens are the style values of UI elements, like color, typography, spacing, animation, etc., needed to construct and maintain a design system. We won’t bother you much with details ‒ just say that behind all this, there was tokenization, and it also found its way into web design, introducing the concept of design token. You’ve probably heard about non-fungible-tokens (NFT) that are strikingly invading digital space. What are design tokens in a design system ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |