![]() ![]() ![]() Common *Tokens*Ĭommon tokens relate to a specific context or abstraction. These can be directly used, and are inherited by all other token types (think “purple-500”). Base Variablesīase variables are the primitive values in a design language, represented by context-agnostic names. These are the raw values in code such as color values (HEX, rgba), absolute and relative length units, percentages, numbers, etc. In this case, a button component uses it. “color-action” does (interactive elements such as text links and buttons). DESIGN TOKENS HOW TO“purple-500” says nothing about where and how to apply this color. Personally, I like the following configuration. The way to organize a robust and extensible Token architecture depends on how many levels of abstraction you would like to have. Animation (I wrote an article with tips on this one).Space (dimensions, padding, margins, etc).They should also be useful for everything that gives your Design System personality and character - something I like to call The Anatomy of a Design System. They are also platform-agnostic so it makes it easier to communicate with developers using these terms.ĭesign Tokens are not only useful for colors. They answer “ What options do I have?” yet leave “ What choice do I make?” unclear.ĭesign Tokens are used in place of hard-coded values and variables in order to ensure flexibility and unity across all product experiences and/or platforms. Variables take the mystery out of obscure values but they don’t bridge the gap between naming and use. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |